Pete

Ooh nice to see autocomplete getting some updates there ?

Thanks again - I've got the demo working. The HTMX demo works with 2 dummy variations under a product, but the Alpine demo doesn't show the options. I don't think it matters too much though as I've still got a lot to look at adapting this to my project first - I'll let you know how I get on.

Wow thanks - I'll take a look and let you know how I get on!

Thank you - I will check it out! My biggest problem is I never make enough time to watch videos and read tutorials - it only happens "in the heat of battle" (where battle is with a deadline ?) whereas I need to get my workload to a level where I can set aside an hour or two each week to learn things properly and have a play around outside of a project. I could probably build up a little library of reusable code based on common scenarios that way instead of having to remember which project I did something on that I need again in a hurry a year down the line (I think we've all been there, right?).

This is my problem - I've just been happily using jQuery since v1 really even though there are much more lightweight tools available now for some of the easier bits and I've never learned Vue etc. I do like HTMX because it makes it easier to see what's happening when you're dealing with simple AJAX requests - what it's firing off, where and so on all written up within the element that it relates to, whereas on a large CRM I've built over the last 6 years it's hard keeping track of everything - scrolling up and down big JS files to find what I've done years ago sometimes. It's not hard finding $(document).on('click', '#elementid'... references really, but seems neater being able to just see it inline in the source code in terms of what's being triggered. Yes even a generic demo would be good, and I hear you on the list of things you intend to do - I've got about 10 years' worth I've not got round to at this point ? although after a long while if theyre still not done then maybe they're no that important?

Actually yesterday at one point that markup was before the closing body tag in my footer - one of the reasons I gave up on using HTMX to replace parts of it is I couldn't work out how to open the modal itself (change modalopen to true) AFTER the htmx response was finished. I was, of course, trying not to open the modal on the button click and then have a delay whilst the variables were filled in but I suspect there's some simple HTMX/Alpine combo that does the job. So if you're up for teaching me something ridiculously simple like that I would very much appreciate it too ?

Thanks! Yeah I did initially start rewriting a big PHP function I've used on other projects called buildModal() to use HTMX to just update the necessary bits but then after a while I realised I was reinventing something I'd already built so probably not the best use of my time when I'm trying to finish something in a hurry (plus it was the weekend and I was getting annoyed with myself for working the weekend so gave up too easily ? ). I think my other thought was that the empty markup is only about 4kb so "why not load the whole thing?" especially since you have to replace the content with some sort of markup anyway - but that does add up over time and on this shop repeat customers would genuinely open up that 3-5x per order and there are a lot of orders daily so the 4kb does add up I guess! I did read about nextTick and custom events but couldn't wrap my head around it yet. I probably need to watch some videos too - I find the docs for both HTMX and Alpine confusing and a little inaccessible for me at least - I have real trouble learning without lots of real-world examples and the docs probably aren't the best place to find those. If there's a good source of HTMX and Alpine (combined) video tuts out there that folks could recommend I'd love to check them out. If you're up for doing a simple demo that would be great - as much as possible I'd like to just re-use your functions from Demo 1. I'm happy to change my modal code to just update the modal - I have been playing with it a bit more today. The template for it at the moment is simply: <?php namespace ProcessWire; /** @var $title */ /** @var $formID */ /** @var $url */ /** @var $content */ /** @var $action */ /** @var $buttons */ /** @var $scripts */ ?> <div id="modal-wrapper" x-data="{modalopen: true}" x-cloak> <!-- Modal Backdrop --> <div id="modal-backdrop" x-show="modalopen" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0" x-transition:enter-end="transform opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="transform opacity-100" x-transition:leave-end="transform opacity-0" tabindex="-1" role="dialog" x-bind:aria-hidden="!modalopen" class=" z-90 fixed inset-0 overflow-y-auto overflow-x-hidden bg-gray-900 bg-opacity-75 md:p-4 lg:p-8" > <!-- Modal Dialog --> <div class="flex flex-col shadow-sm bg-white overflow-hidden w-full max-w-3xl mx-auto" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-125" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-125" role="document" > <div id="modal-title" class="py-4 px-5 lg:px-6 w-full bg-gray-50 flex justify-between items-start"> <?php if ($title) { ?> <h4 class="font-medium"> <?php echo $title ?> </h4> <?php } ?> <div class="-my-4"> <button type="button" class="close inline-flex justify-center items-center space-x-2 border font-semibold focus:outline-none px-2 py-1 pt-4 leading-5 text-sm rounded border-transparent text-gray-600 hover:text-gray-400 active:text-gray-600 ml-4" x-on:click="modalopen = false" > <svg class="hi-solid hi-x inline-block w-6 h-6 -mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/> </svg> </button> </div> </div> <form id="<?php echo $formID ?>" class="InputfieldForm ajaxForm my-0" method="POST" action="<?php echo $url ?>" enctype='multipart/form-data' autocomplete="off"> <div class="p-5 lg:p-6 grow w-full"> <div class="block-content pb-3 text-gray-600"> <div id="messageBox"></div> <?php echo $content ?> </div> </div> <div class="py-4 px-5 lg:px-6 w-full bg-gray-50 text-right space-x-1" id="modal-buttons"> <?php echo $buttons ?> </div> </form> </div> <!-- END Modal Dialog --> </div> </div> <!-- END Modal Backdrop --> <div id="modal-scripts"><?php echo $scripts ?? '' ?></div>

I think this is more of a "Pete doesn't understand Alpine yet" issue but wondering if someone can help. I've got a Buy Now button on a product grid that renders a modal via HTMX. I'm using Padloper demo data code (modded slightly) to display the price/options markup. For a product without variations I can get that to work. But for a product with variations, because the modal content being loaded via HTMX contains alpine x-init that is being added to the DOM after the original page has loaded, the Alpine code won't work so the popup looks like this (it should say "Select an option") then if you click on an option it says this: Then funnily enough if you close the modal and open it again (or click a "Buy Now" button for another product with variations) it seems to work: Also simply closing the modal and clicking Buy Now on the same product, the modal now works too. The code returned via the HTMX request that loads the modal looks like this, so I suspect it's that initVariants() code that just needs to be changed to not be x-init? Or something else needs re-triggering somewhere along the line - I'm not sure. <div id='padloper_add_single_product' hx-trigger="padloperfetchupdatedcart delay:500ms" hx-post="/?action=update-cart" hx-target="#padloper_side_cart" hx-vals='{"is_single_product_add": 1, {padloper_cart_update_product_quantity: 2, act: "update-cart"}'> <div <?php echo ($isProductWithVariants) ? " x-init='initVariants()'" : '' ?>> <?php if ($isProductWithVariants) { echo renderProductVariants($product); } echo renderPriceAndAddToCart($product); $cart = $padloper->cart; $numberOfTitles = $cart->getNumberOfTitles(); $totalAmount = $cart->getTotalAmount(); $totalQuantity = $cart->getQuantity(); ?> <div id='cart-summary' class='hidden'> <span>Products: <span id='numberOfTitles'><?php echo $numberOfTitles ?></span></span> <span>Quantity: <span id='totalQty'><?php echo $totalQuantity ?></span></span> <span>Price: <span id='totalAmount'><?php echo $totalAmount ?></span></span> </div> <div id='cartnotice'></div> </div> </div> initVariants is part of the Padloper Demo Data so lives inside this code: Alpine.data("Padloper2DemoData", () => ({ ... I'm having a lot of fun learning Alpine and HTMX but really having trouble wrapping my head around this and don't want to rebuild it all in jQuery at this stage so any help would be greatly appreciated!

Thanks Bernhard - I had to remove the Save button when adding a new page with a particular template today for a specific reason, so here was my solution which I arrived at thanks to your code above: $this->addHookAfter("ProcessPageEdit::buildForm", function($event) { $page_id = (int)$this->input->get->id; $page = $this->pages->get($page_id); if ($page->template->name == 'my_template_which_only_needs_publish_but_not_save') { $form = $event->arguments(0); // We want to check the publish button is actually visible first - usually there is "isNew=1" at the end of the URL but that can be removed // manually so best to use a more thorough check $publish_button = $form->getChildByName('submit_publish'); if ($publish_button) { $save_button = $form->getChildByName('submit_save'); $form->remove($save_button); } } } }); This will of course revert to just showing the Save button once the page has been saved. Hope that helps someone in future (probably me in about 6 months time when I forget all about it - that's usually the case ? ).

Ha just had another case today where I needed this and forgot I'd already worked it out once nearly a year ago ? This happens to everyone right? ?

@zoeck Thanks for pointing that out I think it's all fixed now. Curious as I was very sure I'd enabled page numbers already. This blog was a conversion from a Wordpress website to ProcessWire where the aim was simply to keep exactly the same theme and migrate the content. Rather than use the existing files and unpick it from Wordress, I opted to rebuild using Tailwind CSS which I've become addicted to lately and it's always a pleasure as you can pretty much just take a design and get going only occasionally needing to come up with custom styles in your stylesheet. Some tips that you may find useful: 1. preg_replace your content to add native loading="lazy" to all images: preg_replace('/<img((.(?!loading=))*)\/?>/i', '<img loading="lazy"$1>', $content); 2. A tailwind shade generator: https://www.tailwindshades.com/ for example enter #ff9900 then click the colour and you can see all the shades, but more importantly copy and paste them into your Tailwind config file to have them available in your code: for example I can then use: <p class="text-orange-peel-800">My orange appears to have gone rotten</p> ?

Thanks @adrian something odd going on with caching assets there so I've turned it off for now ? It was working 10 hours ago but will probably be something simple.

I noticed in TinyMCE it's also possible to have predefined HTML templates for snippets of markup which sounds neat. I can't think of any obvious uses right now and HannaCode is likely more powerful for this, but it does make me wonder if there's a way of combining it with HannaCode so that inserting a HannaCode could also show you what the markup would look like: https://www.tiny.cloud/docs/tinymce/6/template/ ? From what I can see it only inserts parsed HTML so without a way of wrapping it in some sort of ID/data attribute that could be problematic.

@ryan ProcessWireUpgrade can't seem to see 3.0.206:

I'd 100% love to see the snapshots feature make a comeback eventually - clients can do... "funny" things sometimes (and I've been guilty of it too ?), though I appreciate it's a hard one to crack.

Hi Adrian, it's been a while since I needed this functionality and didn't realise I'd left my own module still up - I'll likely take it down soon and direct people to yours if you think that makes sense? I'm going to use yours for a project, but can I suggest an option to hide the login form? For normal maintenance I wouldn't let any roles log in and as superuser I'd just go to the right URL instead is my thinking. It may also be worth changing the title of your module in the directory to "Protected/Development/Maintenance Mode" so those keywords are found during search as currently only mine comes up for "maintenance".

@bernhard I can't quite work out what the code would look like there, because if I bd() the inputfields on the page, it only shows the "outer" combo field name, not the subfields. Something else to note using my code is that if you output the field DATA (not the inputfield markup) on the frontend (which in my case is a country) using code like this: echo $user->billing_details->country; it won't show the data as it doesn't know what the key/value pairs are supposed to be when formatting the data. So I got around that by doing: echo $user->getUnformatted('billing_details')->country; Which simply outputs whatever you had stored in the DB. I'm sure there's some way of covering all this in 2 hooks or less using your method bernhard but not sure what it would look like for a combo field. For now my 2 hooks and outputting the unformatted value gets me where I need to be. I just wish I'd remembered about getUnformatted 90 minutes ago ?

Ah thanks @bernhard that does make sense, I'll check it out!

I encountered an odd error today and I cannot for the life of me work out what caused it: However I added !is_null($fieldObject) before the count on the line in question (and the other 2 places that same piece of code crops up) and that sorted it. For whatever reason the field object was null. EDIT: Ah - I think this is a PHP8 thing actually which explains why it was working last week and not this week - that's probably it ?

If anyone's wondering how to get the data to save, you need to set the options again prior to processing the input. So here's my example - first hook adds my options to the field so they render, second hook makes the options available when processing the input: wire->addHookBefore('InputfieldSelect::render', function($event) { if($event->object->name == 'my_select_field_name') { $countries = [1 => 'UK', 2 => 'USA', 3 => 'Etc etc']; $event->object->setOptions($countries); } }); $wire->addHookBefore('InputfieldSelect::processInput', function(HookEvent $event) { // Get the object the event occurred on, if needed $InputfieldSelect = $event->object; if ($InputfieldSelect->name == 'my_select_field_name') { $countries = [1 => 'UK', 2 => 'USA', 3 => 'Etc etc']; $event->object->setOptions($countries); } }); Using this in a complicated project where I've got custom tables for some data and it works nicely. Possibly also worth noting this works for checkboxes and radios I think as they are all extended from InputfieldSelect

Thank you - I had Covid last week so haven't had time to look at this yet but looking forward to testing it out this week.

This module is great - thank you. I'd love to see the addition you mentioned above though as there are some forms where I only want to display hCaptcha to guest users since logged-in users on the site I'm working on are already validated by this point. I guess the permission should just hide/not render the form and skip it during form validation but not sure how easy that is. I guess the way to do that in the meantime would be via hooks, so using your example below from the docs, but only target visitors who aren't logged in and render it for just those visitors: <?php // site/init.php wire()->addHookAfter('ProcessPageEdit::buildForm', function (HookEvent $event) { $form = $event->return; $submitButton = $form->getChildByName('submit_save'); if ($submitButton) { $hCaptcha = $event->wire('modules')->get('InputfieldHCaptcha'); $hCaptcha->set('label', __('Spam Protection')); // ... configuration goes here $form->insertBefore($hCaptcha, $submitButton); } $event->return = $form; }); I'll give that a go and see how I go.

Oh nice - wish I'd looked harder before doing it my own way as that sounds ideal ?

I've also been using this great module on another WP conversion project to do the same thing: https://processwire.com/modules/custom-paths/ I'm not 100% sure if it checks for uniqueness (probably) but since everything's being imported by a script I wrote I know they are unique for now.

Haha just got caught out by it again 3 months later and end up here only to find my own comment on it ?