Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 03/28/2022 in all areas

  1. It's all hand coded ? The approach is something like this: Start an IntersectionObserver to determine when the image is in the viewport (or close to it) When it's in the viewport I start a requestAnimationFrame loop, turn it off when the IntersecionObserver detects the image left the screen On each tick of the rAF I calculate a new position (get the position relative to the viewport as a %, multiply that by a certain value and assign it to CSS transform: translateY) And as I use StencilJS, I create this behaviour as a web-component, in the end I just have to wrap the image in a <c-image-parallax> block and that's it.
    4 points
  2. Like @bernhard said, a repeater works well for this. The output in the template could look like this: <ul> <?php foreach($page->repeater_faq as $faq):?> <li> <h2><?=$faq->question?></h2> <p><?=$faq->answer?></p> </li> <?php endforeach;?> </ul> If you want to optimize the FAQ page for Google SEO you could additionally add the content in JSON format (not visible on the page). More Info: https://developers.google.com/search/docs/advanced/structured-data/faqpage This is what I usually use: <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ <?php $items = $page->repeater_faq; $item_count = count($items); foreach($items as $key => $value):?> { "@type": "Question", "name": <?=json_encode($value->question)?>, "acceptedAnswer": { "@type": "Answer", "text": <?=json_encode($value->answer)?> } }<?php if ($key === $item_count - 1){echo "\n";} else {echo ",\n";} ?> <?php endforeach;?> ] } </script>
    4 points
  3. ProcessWire 3.0.197 resolves 9 issue reports and adds 3 feature requests. For details in resolved issues and feature requests, be sure to see the commit log. I'll cover a couple of my favorite feature requests that have been added this week: New $files->getCSV() method This comes by way of feature request #400 via @bernhard to add something to abstract away the redundant details of reading a CSV file into one simple method call. This simplifies the reading of a CSV file by abstracting file-open, get-header, get-rows and file-close operations into a single method call, where all those operations are handled internally. All you have to do is keep calling the $files->getCSV($filename) method until it returns false. This method will also skip over blank rows by default, unlike PHP’s fgetcsv() which will return a 1-column row with null value. Here's how you use it: Let's say we have this CSV file (first row is the header): Food,Type,Color Apple,Fruit,Red Banana,Fruit,Yellow Spinach,Vegetable,Green Here's how you'd use the new method: while($row = $files->getCSV('/path/to/foods.csv')) { echo "Food: $row[Food] "; echo "Type: $row[Type] "; echo "Color: $row[Color] "; } There are also several $options supported, see the $files->getCSV() documentation page for more. There's also a new $files->getAllCSV() method that does the same thing but returns all the rows in the CSV file in one call. Improvement to InputfieldPageListSelectMultiple Next was feature request #339 that requested adding the enhancement developed by @Robin S (via the PageListSelectMultipleQuickly module) into the core. This enhancement keeps the selectable page list open for multiple selections rather than closing it for each selection. It also better indicates when an item is selected. While I ended up writing it in a different way than Robin S.'s module, the end result is nearly identical to Robin S.'s short GIF screencast below: Also added this week is a new "visibility" option for Inputfields: Open + Locked (not editable), along with some small hook documentation improvements in the Pages class. Thanks for reading and have a great weekend!
    3 points
  4. @NorbertHAgh, my mistake. There's no need for @alert-success-background. It's just Uikit alert style not used by pw. If you want normal messages to be green, put green color in @alert-primary-background: @alert-primary-background: #32d296; @alert-primary-color: #fff; @alert-warning-background: #faa05a; @alert-danger-background: #f0506e; Here's a screenshot.
    2 points
  5. Padloper 2 has received a number of updates, pushing it closer to a production release. Stripe Finished the Stripe payment gateway. It is based on the latest Stripe Payment Intents + Stripe Elements. The Stripe Elements widget is fully configurable (UI). I will be updating the docs about this. You can test this now in the demo site. Make sure to read 'about' first here. If upgrading, there are a number of simple steps (actually just one simple step). Just create a page titled Stripe in the admin under the payment gateways parent page. Currently, it is not possible to create a payment gateway using the GUI. Shipping Rate Selection If more than 1 shipping rates are matched, the checkout form will now present the customer with a form to select their preferred rate (e.g. express - €5, standard - €2, etc.). [I have just noticed a bug if using the inbuilt form with this; I'll fix asap]. You can test this by adding this product to the basket and selecting Kenya as the shipping country. Variants The demo site and the starter site have been updated to show how to handle products with variants - adding to basket, checkout, etc. You can test by adding this product or this Padloper [fake] product to the basket. Pay using Stripe and you'll even get to download Padloper! OK, file's fake, obviously. Reports View and functionality is now ready. Powered by htmx. Hoping to create a demo video of this and other backend views soon. Downloads This was not ready in the last release. it is now. Test with 'Padloper' product linked to above. If upgrading, you will need to install the related Fieldtype + add it to the download template. I'll write up about this separately. Bug Fixes Fixed a number of bugs. Docs I've updated the docs in some places. New Requirement I have added a new requirement for PHP BC Math Extension. Currently, Padloper will not work without this. Otherwise we have never-ending pennies/cents rounding errors. Whole libraries have been created just on this one issue; just Google it. BC Math solves it for us. Pending Manual Order Creation: this has been a difficult but getting close to finishing it up. Documentation: Especially the most pertinent. Some minor bug fixes. Some PayPal indempotency + rounding issues! If anyone knows how to pass amounts as pennies/cents to PayPal instead of whole currencies, please let me know. It used to work with the old API. I haven't been able to find how to do this in the latest API and checkout SDK. Production Release My plan is to release a stable version in March 2022. Beta testing has finished. Thank you all who've participated. Edit: making the demo site pretty and perform better on smaller screens is still on my todo. It's not urgent though. Thanks.
    1 point
  6. Natasha Marques is a desserts chef and chocolatier from Brazil with an international carreer. Now established in my hometown Porto, she's about to open a shop and already shipping her premium line of sweets and desserts. The website is my usual combo of PW with StencilJS frontend with a content blocks approach. Minimal stack of modules: SeoMaestro, WireMailSmtp, and my own block selector module which is a hacked version of FieldSelectFile. The site is only in portuguese, but have a look anyway: https://arbynatashamarques.com/
    1 point
  7. You can set that in the module's settings of InputfieldPageName:
    1 point
  8. Your usecase FAQ sounds like it would be a good fit for a repeater field. Add two fields to the repeater "question" and "answer" then you can add 1 to n items of FAQs to your page.
    1 point
  9. Very nice! That's probably what I'll try! I've literally never used AJAX so I'll have to see how to send the info to the server but I like this implementation! I'll try to code this first and then if I manage to get it working I was thinking that the next step could be making the AJAX call only before leaving/updating/changing the page (if that's possible), maybe storing checkbox statuses in an array and then updating all of them at once so that every user will only make a call after they've finished editing and not every time they check/uncheck. I'm only familiar with "simple" JS listeners and I don't know how difficult it could be to implement this tho.
    1 point
  10. Hey, @FlorianA! Read this topic if you will.
    1 point
  11. @alexm, No problem. I have sent you an email. Thanks.
    1 point
  12. @ErikMH. As requested, I have split the posts relating to your NullPage errors into its own thread ?. @bernhard, @adrian just tagging your for FYI. Thanks.
    1 point
  13. Oh my God, I was able to "solve" the problem. Just checked this function with a user on his PC and the problem did not occur. It is caused by the "Enpass" (password manager) plugin from the browser. After disabling the "Passwort Manager Popup Function", everything is working again ? I think it's a known Problem: https://discussion.enpass.io/index.php?/topic/27897-enpass-browser-extension-steals-focus-in-webform-when-using-iframes/
    1 point
  14. Hi @Val_0x42, Yep, please ignore my suggestion or question. It is totally fine to use PWs user, maybe a role with only guest rights, but able to register and authenticate. With guest rights, they can see nothing in the backend. To the other points: I like to code old schooled. ? First send a complete form with checkboxes and submit button, so that it also will work without JS, or, more interesting today, when any early JS throws an error and it stops further execution. Then also a "modern page" maybe left unusable when the bound events cannot run, or even got not bound to the checkboxes, etc.. The next step for me would be to disable the submit button on DOMContentLoaded, collect all checkboxes and add a change event to them, for example: (code not tested, written in the browser) ... <form id='myForm'> <label for='i1234'><input id='i1234' type='checkbox' value='1234' /> YOUR CONTENT HERE </label> <label for='i1235'><input id='i1235' type='checkbox' value='1235' /> YOUR CONTENT HERE </label> <label for='i1236'><input id='i1236' type='checkbox' value='1236' /> YOUR CONTENT HERE </label> <label for='i1237'><input id='i1237' type='checkbox' value='1237' /> YOUR CONTENT HERE </label> <label for='i1238'><input id='i1238' type='checkbox' value='1238' /> YOUR CONTENT HERE </label> <input type="submit" name="submit" id="submit" value="SEND" /> </form> <script type='text/javascript'> document.addEventListener('DOMContentLoaded', function(event) { const myForm = document.getElementById('myForm'); myForm.getElementById('submit').style.display = 'none'; // or, for better A11y support, visibility = hidden, plus shrinking the sizes, or move it out of viewport const checkboxes = myForm.querySelectorAll('input[type="checkbox"]'); for(i = 0; i < checkboxes.length; i++) { // add on change event listener for each checkbox in the form: checkboxes[i].addEventListener('change', function(event) { // get the ID and the status (checked|unchecked) and send via AJAX to update the server. Done! :-) }); } }); </script> </body> </html> Hope that helps to get started. ?
    1 point
  15. Eh nothing, all is ready, we have even more with JWT implementation. It's just missing a function which return the pages tree. Something like less than 10 lines of code. Already shipped with : - Authentication - Three different authentication-mechanisms are ready to use. - Access-management via UI - Multiple different applications with unique access-rights and authentication-mechanisms can be defined And you can generate your own routes dynamically by just adding a simple hook. Installation will/should be required in every case, even with a core module. But you should give a try to the AppApi module, you can start in less than two minutes, check : Enregistrement #27.mp4
    1 point
×
×
  • Create New...