Leaderboard

It's working perfectly fine now. Thanks, @teppo!

Depending on what you want to do, Alpine JS might not be a good alternative. A big drawdawn ist, that it doesn't use a virtual DOM and can get slow if you want to render many nodes, for example if you want to render many list entries with a pagination. At some point your browser will get slow and sluggish. But it is very good and easy in many other cases. There are also other good libraries out there, that have a similar purpose like vuejs/petite-vue: 5kb subset of Vue optimized for progressive enhancement (github.com) (also does not use a virtual DOM, so the same drawback as Alpine) which shares the same template syntax and reactivity mental model with standard Vue or there is riot.js. Petite-vue might be the right choice for you @jploch. Vite is great and really fast and I am happy to have it as a replacement to webpack and I use it since it appeared in most projects (well actually it is not really a replacement for webpack, because it is NOT a bundler, but it serves a similar purpose).

Thanks for the report, @wbmnfktr. The page list option was misbehaving, this is fixed now in the latest version of the module (1.0.2).

Glad you got it sorted...? Until you didn't...? Please open a separate thread, maybe under dev talk as this is about Alpine. We'll then continue this conversation there, thanks.

Sorry for interrupting the usual programm and topic here but... @franciccio-ITALIANO maybe you want to look up a mentor/tutor here that helps you to maintain and build ProcessWire sites from either the ground up or even to maintain already built sites. I know you from your past questions, requests and and posts in several other topics. As much as I want to see someone helping you... the more I think you need someone that's guiding you from the basics of PHP to the basics and fundamentals of ProcessWire to the state you can work out ProcessWire sites from each and every state and upwards. So... my questions for our awesome community is... who can help and assist @franciccio-ITALIANO to get to a state where he is able to maintain a basic ProcessWire-website? Native italian speakers (is this even the correct way to write this?) go ahead... and let us know. If there is noone who can assist... let me know @franciccio-ITALIANO... I'll put time aside to guide and assist you in some kind but in english. ;)

I developed the new Geffen Playhouse website over the course of 2018/2019 and launched it in September 2019. It has been perhaps the largest project I have been involved in. The Geffen Playhouse went through an entire re-branding done by Base (including a custom font), and I worked with Teak on the new website. Website https://www.geffenplayhouse.org/ Wikipedia https://en.wikipedia.org/wiki/Geffen_Playhouse Base write-up https://www.basedesign.com/work/geffen-playhouse-always-geffen-playhouse-always-new Teak SF write-up https://teaksf.com/work/geffen-playhouse-ticketing-ecommerce-website-design/ Another write-up: https://www.laurentakayama.com/geffen Their previous website was severely antiquated and it wasn't a responsive website (as of 2019!). Instead, it forwarded mobile users to a "mobile-friendly" website on a different subdomain, which I think was hosted by a third party service. However the data containing all the actors, shows, seasons, news and press articles were all in there. So one major aspect of this website was de-duping and importing their data into ProcessWire, along with some post-import cleaning… that's ~25 years of data. The site is built with UIkit 3 for the most part, and also uses FullCalendar for the large and small calendars. There is a custom integration with AudienceView, their ticketing system, which is used to import all the performance showtimes of their shows into ProcessWire. It's not the easiest API to work with (XML), but I eventually got it working. Repeater Matrix is being heavily used for section-based page building. Building out all the necessary matrix types took a long time as there was quite a bit of thinking what types and layouts we needed as we went along. However the end result has given the editors a lot of flexibility. ProCache is being used as well, including a CDN for all assets. This is crucial because when opening season sales are announced, the site gets slammed, but with caching turned on, it's not a problem anymore. On a deeper level, the site uses my new (well 2 years old now), universal and very opinionated base module that provides a menu builder, a standard set of fields/templates/pages, and a bunch of other tweaks that I tend to use on every site. All the fields, templates and pages are set up in a streamlined and editor friendly way. I wasn't able to access their previous CMS backend for various reasons (I only got the MySQL dump), so when developing the site and data model in ProcessWire, I was able to completely re-envision the editor experience and the data model without bias. A quote from one of the marketing directors at Geffen Playhouse: "We absolutely love ProcessWire." More details on my personal website: https://jonathanlahijani.com/projects/geffen-playhouse/

UPDATE: The culprit turned out to be the session.save_path which was not updated to reflect the new php setting. Corrected save path to right version of PHP and all works. I appreciate the help. Thank you all.

Hi @wbmnfktr, look here: https://dr-dsgvo.de/ist-mailjet-datenschutzkonform-nutzbar/ I don't know if this is a reliable source but sounds legit. And did it work for you with the WireMailMailgun?

@kongondo I have experimented with Alpine.js and setting the attributes on the inpufields via PW api like you showed, and it works nicely! It's really a game changer compared to doing it in nativ js or jQuery! My code is now roghly 1/6 the size it was before and it's quite intuitive to use as well. Thanks for the hint! I highly recomend others to try this as well. Btw. it also works together with jQuery without a problem, if you want to keep that as part of your workflow. EDIT: Still having some trouble figuring things out with Alpine. For example I have JSON data saved inside a PW field. Now I want to use that data to pupulate my inputfields. Looking at your example, I guess I have to use alpine.store for that. How would that work?

In the beginning it was too fast for me! I couldn't notice that a change had taken place ?.

Might be a good time to rewrite/expand this tutorial with using vite

@kaz Add two flags to options and play with it: 'scrollWheelZoom' => false, 'dragging' => false, I usually use this configuration. $options = array('markerIcon' => 'flag-checkered', 'markerColour' => 'orange', 'scrollWheelZoom' => false, 'dragging' => true, 'markerTitleField' => '', 'popupFormatter' => function($page) { $out[] = "<center><strong>Sub Header</strong></center>"; $out[] = "<center><img src=\"/images/logo.png\" width=\"100\" height=\"100\" /></center>"; // ** NB: Use escaped double quotes if HTML attributes needed ** return implode('<br/>', $out); } ); In this case, zooming in and out of the map is possible only with the zoom buttons at the top left. But the swipe movement of the card is preserved. For a desktop, this is ideal. And for smartphones dragging the site up on the map picture is replaced by dragging the map up. The user understands this and is looking for a place behind the map in order to hook his finger on the page, not the map. Disabling dragging does not fix the problem. The map does not move, but the page does not move either. The user still needs a place behind the map to swipe.

Hui... that was a show-stopper right here... while I was adding more scripts to the Snippets module on my personal site. Got this error message: Darn… Fatal Error: Uncaught Error: Call to a member function has() on string in site/modules/Snippets/Snippets.module.php:85 #0 wire/core/Wire.php (420): Snippets->___isApplicable() #1 wire/core/WireHooks.php (951): Wire->_callMethod() #2 wire/core/Wire.php (485): WireHooks->runHooks() #3 site/modules/Snippets/Snippets.module.php(50): Wire->__call() #4 wire/core/Wire.php (417): Snippets->hookPageRender() #5 wire/core/WireHooks.php (1062): Wire->_callMethod() #6 wire/core/Wire.php (485): WireHooks->runHooks() #7 wire/modules/Process/ProcessPageView.module (225): Wire->__call() #8 /wire/modules/Process/Proc (line 85 of site/modules/Snippets/Snippets.module.php) This error message was shown because: you are logged in as a Superuser. Error has been logged. While adding a simple JSON-LD to the homepage (ID 1) from within the selection tool. Fixed it for the moment by deleting the module, its database table and cleaning everything up with the Missing module dialogue within ProcessWire. Reinstalled the module afterwards and tried another single page... no luck. Still the same error.

Then Alpine JS it is ?. Learn Vue, say thanks to the creators then say hello to Alpine JS. You will write its code right inside your ProcessWire inputfields, markup, whatever. Everything will be reactive. Make use of Inputfields->attr to assign Alpine properties. You might need the full attribute, e.g. 'x-on:change' instead of @change as ProcessWire might strip the latter out. Below is a quick example. I haven't checked it for errors. Inside your ProcessWire code. <?php // get a ProcessWire inputfield wrapper $wrapper = new InputfieldWrapper(); // get an inputfield text to store a name $field = $this->modules->get('InputfieldText'); // add some usual field values $field->name = 'your_name'; // OR // $field->attr('name', 'your_name') // etc... // let's alpinejs-it! $field->attr([ // MODEL THE VALUE DIRECTLY IN THE STORE // 'x-model' => "\$store.mystore.person.name", // OR HANDLE THE CHANGE YOURSELF // @note: ProcessWire will strip out the '@' - so we use x-on:event instead 'x-on:change' => "handleNameChange",// this is a method inside your Alpine data code ]); // IF YOU NEED TO.... // set a wrapper-level class, e.g., as a show-if // @note we escape some things here, e.g. the $ // could also use JavaScript template literals for the 'some_text', e.g. `some_text` // here we add a hidden class to the wrapper depending on some store value // we could have used x-show or x-if instead $class = "{ hidden: \$store.mystore.some_text==\"some_text\"}"; $field->wrapAttr( 'x-bind:class', $class, ); $wrapper->add($field); // initialise alpine js data // 'persons' could also be an object here, but for more complex objects, better to assign to a function in your code like this $out = "<div x-data='persons'>" . $wrapper->render() . "</div>"; return $out; You JavaScript // ALPINE (version 3+) document.addEventListener("alpine:init", () => { Alpine.store("mystore", { // YOUR STORE FIELDS // for some results results: [], some_text: "some_text", is_modal_open: false, person: {}, }) Alpine.data("persons", () => ({ handleNameChange(event) { this.changeCustomerName(event.target.value) }, changeCustomerName(name) { this.$store.mystore.person.name = name } })) }) Hope this helps.

One is in the works....still in my head though...as I clear my in-tray first! (you know what I'm talking about ?). Yes and yes. If you are using Vue 2, there is a post somewhere in the forums (@elabx, help please, thanks) with a copy-amend-paste code from WP. That code will enable live reload in ProcessWire backend but view will still need to be running on some other port, e.g. 3000. However, you won't have to keep an eye on that as you will be viewing the changes in the ProcessWire backend. I have since adopted Vue 3 and Vite and the live reload in ProcessWire is as simple as this: <?php // e.g., in execute() if developing a Process Module $out = " // 3000 is the port vite is running at $out .= ' <script type="module" src="http://localhost:3000/@vite/client"></script> <script type="module" src="http://localhost:3000/src/main.js"></script>'; //return $out; if in a method/function Vite does not use Webpack. So, no (crazy) Webpack configs needed! The live reload just works! Having said that, I highly recommend Alpine JS (as a Vue alternative, if you can get away with it) and HTMX (no Axios, no JSON!). With either, no build is required! You keep your DOM and work right inside ProcessWire. Future tutorials in the works, as well ?. If you understand Vue then you already understand Alpine JS. If not, I still suggest you get to know the basics of Vue anyway. Hope this helps.

In my case everything was logged as expected. Each and every try was in the logs. The website was almost on point... maybe a minute or so off but yet... pretty good. Almost too good. But hey... perfect... it's working for you now. Awesome! Short update here: While SendGrid and the module work as expected I/we moved on using mailjet.de with WireMailSmtp. The project (as in "client") wants and needs to be perfectly fine with DSGVO/GDPR and therefore Mailjet was the better option. As they (client) send quite a huge amount of mails of any kind they were ready to pay one of their standard plans that should fit their needs. I disabled all tracking, opening and whatever options they offer in the settings as the project should create through all instances only a very small data footprint with as little data as possible. Right now the client and their "data and privacy" consultant are quite happy. So... if you are within the EU (or have been in there) look at mailjet. As Mailgun and Mailjet are somehow one company... I will play with the WireMailMailgun module in the next weeks. Maybe it works.