poljpocket

Hüttenzauber - The magic of the Swiss Alps. Eat, celebrate and sleep in the most beautiful places in the mountains. Today, I am presenting to you a very cool and challenging project we tackled and successfully finished last summer. Obviously, Fruitcake is 100% a ProcessWire agency at this point but still, this project especially proves again and again that ProcessWire’s flexibility and unopinionated structure just works for us every time. Gone are the days where we are breaking and bending other CMSs to work the way we need it to work. “Hüttenzauber” is a well-known brand in the Bernese Alps skiing and hiking destinations. Lately, they expanded into other regions of the Swiss Alps and accumulated a variety of locations they are both managing and running from their central offices at the birthplace of the enterprise, Lenk im Simmental. Coding one of our latest projects to date was a cool but also daring challenge. We set out to replace a few dozen single websites for each of the different locations with one big website. The general goal was to streamline all the information and present a concise yet still quite independent experience to the website’s visitors. In addition to the independent experiences, the website features a plethora of central features like a search map, an illustrative blog, cool events and a web shop whose contents however, are again compiled together from blog articles written for or events happening at the different locations. The website was conceptualized, designed and programmed 100% in-house by us. It features tons of content which is completely available in both German and English (with a small JavaScript language detection function). ProcessWire admin: have exactly one source of truth I think we can be proud of the challenge we set out to achieve: Have every information only ever written down once. This is most beneficial for the client since they can for example change the hotel’s address once and it is then displayed at many different locations automatically. The client factually only needs to work with our database we created in the ProcessWire admin area and the website presents that information in a variety of places automatically. One example of that in action is restaurants. There are two types of restaurants: locations which actually are restaurants but also restaurants inside other locations, e.g. hotels. The client can easily a new restaurant inside a hotel (in PW terms that is just add a “restaurant” as a child of a “hotel”) and just set up all of it’s information like descriptions, menus, booking links and images. This entry will automatically display on the search map as part of the hotel, be added to the “book a table” buttons everywhere across the website and also have it’s information and download links be displayed on the hotel’s detail page. And by the way, the client also can (and does!) add hotels inside hotels, e.g. a small resort with independent booking but which factually is part of a bigger hotel complex. They add, press save and “it just works!” 🤯 To achieve this goal, we made extensive use of the beloved “addHookProperty” method to for example output a list of all the “book-a-table” links for any specific page which makes programming the front end of the website a whole lot easier! 🥳 The culmination of all this is a simple and easy tree structure in the admin area like this (this is just part of it): All the information one might add about a restaurant or hotel is entered in each entry’s fields. Every coordinate, address and image is only ever entered once. All of this for example results in the search map and floating booking buttons completely automatically: Not only there, but also in the menus: Content «Page Builder» In addition to all the meta information, all of the pages should allow to have a completely independent experience for a visitor. That is why any restaurant and hotel gets it’s own landing page which acts as a mini landing page. There, the information is broken down: Booking links show only for the location itself (remember, there still might be multiple 😉), events are automatically filtered by location and sub-restaurants are displayed automatically. Yet still, all of the content feels dynamic because we make heavy use of @ryan’s Repeater Matrix module. For some of the blocks, the information is entered directly but for others, the information is grabbed from the events catalog or the blog entries and automatically filtered as appropriate for the page where the block is displayed on. For example, the events block on a hotel page only displays events for that specific location whereas if the events block is used on the homepage, everything is displayed. Here is a few of the blocks the client can use on any page: Webshop with Print@Home vouchers To finish up this showcase, now for the most interesting part for all developers here, the webshop and all it’s interfaces to external services. From the very beginning, we knew, we needed to use something which will offload the cart and checkout parts of the shop completely because we don’t have the capacity to create a full webshop application for this project and there was nothing around we could build upon (this is only partly true, there is @Gadgetto's SnipWire which was a big inspiration). Obviously, nowadays there are alternatives around the corner like @bernhard’s RockCommerce which might just be the on-page solution for cart and checkout ProcessWire needs. Although the shop might seem small and unimpressive when looking at it from the user’s perspective, a lot has to happen in the background. Part of it is that we had to combine two types of products and part of it is the actual technologies we ended up using. The first product type is your standard product which gets shipped to the buyers. These products are easy compared to the second type - a streamlined experience starting in the shop where the user picks a value and a greeting for a print-at-home voucher, pays for it and together with the order confirmation is sent the voucher as a PDF ready to be printed. This lead us on an adventure where we came across asynchronous payment confirmation, custom payment processors for SnipCart and a small translation layer mapping one API to the other. In the end, we built a system of three modules for ProcessWire like this: The heart of the system is our «Snipart Integration» module. Think of it as a baby-SnipWire. It adds webhook handling, a custom payment provider API and JSON product info endpoints for SnipCart to work on the website. Building on the custom payment provider API, we have the «Wallee interface» which acts as a translation layer from the asynchronous API Wallee speaks to the synchronous one SnipCart uses. Further, we have the «Boncard interface» which adds webhook handlers to reach out to the print-at-home provider to generate and fetch the PDFs and finally sending them to the client, using our fourth and last external provider: SendGrid. Since SnipCart already uses SendGrid, this one was easy to decide. Also, there is a very good integration available with WireMailSendGrid. All of the modules have been built with reusability and modularity in mind: all of them have a configuration screen to add API secrets amongst other settings. They can be used as a package or in parts. This is useful if for example, you don’t need Wallee as a payment provider or do not have Boncard’s print-at-home vouchers in your webshop. Also, more custom payment providers are easily added using the main module’s API and webhook handlers. Conclusion There is still much to tell especially about the shop and custom payment providers’ implementations and challenges we faced. If you guys are interested, I can start working on a case study. Let me know! I will leave you with a few links for you to look at and/or get more information: https://huettenzauber.ch/ our main subject https://www.fruitcake.ch/projekte/huettenzauber/ our portfolio entry about the project COMING SOON link to page on ProcessWire Showcase Also, I don't want you to miss out on what's running behind the scenes: ProFields: Combo ProFields: Repeater Matrix Seo Maestro ProcessRedirects Tracy Debugger WireMailSendGrid All of this rocks on ProcessWire v227.

Another approach is to use NFS to share a volume across Droplets. NFS tutorial from DigitalOcean themselves: https://www.digitalocean.com/community/tutorials/how-to-set-up-an-nfs-mount-on-ubuntu-20-04 Here is a source which uses Docker but the concept is the same: https://www.infraspec.dev/blog/nfs-fs-as-docker-volume/

Hi Dave, Thanks for clarifying. In ProcessWire, every page has a parent (the only exception is the homepage which always has ID=1). So the best you can do is set the homepage as the items' parent to factually "clear" the parent. Observe that the permalink thus will be /{$page->name}, which factually means, they don't have a parent. To keep things organized though, I think you already did what you are supposed to do: create a new parent page and move all the race pages there as children.

Hi Alexis, I think if you upgrade from a version so old, there will be problems. First of all, yes the new master version is just around the corner but 243 isn't the stable release just yet. For now, try using the master version, a.k.a. 229. Next, I think your 404 errors might stem from a routing problem. Try comparing the .htaccess files in your root directory. Since this is outside the wire directory, it might not be the newest version and in that many years, there might have been changes. If that doesn't help, have a look at the logs directory (site/assets/logs), specifically for exceptions and errors. They might lead you to what the problem is. Feel free to post any errors here which might help us to find the problem together.

Are you maybe missing the .htaccess file in your root directory? If you're copying files around with Finder, it won't move the .htaccess files which aren't in a subfolder.

Happy new year to you too! Could it be that you are dealing with mixed content problems? Can you try using http://localhost instead of https://localhost (note the s)? Did you set the httpHosts property in config.php to be localhost?

This will be fixed in the new master version :) https://github.com/processwire/processwire/commit/29b1fa0e4583db77babf699a6ea3bb062903060f

This could also be a browser issue. One example would be a cached 301 redirect from an old staging install on the same URL. Modern browsers are caching these forever and it's a pain to make them forget the redirects.

Hi Dave, can you elaborate a bit on what your goal is? I assume, you have the links to the child pages somewhere on the website (the part your visitors see), right? What do you mean by "unlink them"?

Yep, see the first two screenshots in my post above 😁

And even more. This is how the page names and titles show up in the database. Looks like it is using some non-standard punycode to encode the names and this is also where everything seems to break:

Some more peculiarities which might help us:

There you go running on the same test install from above: You are on to something here.. that looks very inconsistent! Note how the page name in the log message is always correct but shows wrong in the "Settings" tab.

You are right, copy-pasta mistake. I just copied your stuff over. But I corrected it right now and it doesn't make a difference (and yes, it's only about the rewrite rules and doesn't affect the PW admin in any way). Maybe you will find something with the hooks I have talked about above.

You can maybe start by looking into where the problem occurs. You can for example use Tracy's bd() function to output the page name before and after every saveReady and saved hook. This will at least let you see in which part of the code you have to go dig for more. Do you have any hooks already in use for Page::saveReady and Page::saved? On which PW version are you?

You are obviously right! I am sorry... I tried your settings in a quick-and-dirty local Docker install using the blank site profile. I can use your whitelist no problem: This is what I added to the files:

This uses the PageNameTranslate rules which you can configure in Modules > Configure > InputfieldPageName. By default, it will replace ä with a, ö with o and ü with u. One of the first things I change on new sites. BTW: @bernhard's RockMigrations has an automation for this.

Did this site - by any chance - reside on a Mac at some point? Mac file systems sometimes pull strange stuff like that (e.g. a meta file with a dot in front, but the exact same filename otherwise). ProcessWire just looks at everything in the modules directory and gets confused by that.

Well, what I mean is that your deployments function won't work on any installation which needed the .htaccess edited (= comment out FollowSymlinks line) for ProcessWire to run properly. If you are checking for symlink function and work around it if it's not available, I retract everything I said :).

I am seeing the same as OP on many of our hosting partners: Some just won't allow you to use FollowSymlinks. Ever. This renders your plugin unusable on these installations. You should maybe mention this in your docs somewhere...

That's very sad to hear.. I used to use Linux during my university days (15 years ago) because for computer science, it just made the most sense. Later, I used Windows mainly because I was forced to do so at work (in the past). So finally, I decided to again move away from Windows right about when Microsoft really added an unbearable amount of bloat and tracking bulls*** with Windows 10 and later on 11. I first went with Manjaro because I thought it was an easy introduction to the "Arch way" but that was a mistake: Manjaro is still very opinionated and does a few things which didn't work for me. So this isn't any different to just using Ubuntu with pacman. So I took the courage and went full Arch. Installation isn't too bad if you know your way around the command line. Since I was using WSL on Windows and used to run Linux for years before, this isn't a problem for me. I must say, I have never looked back. Arch isn't very plug-and-play, that's true. But also, it doesn't stand in your way. Back then, I even moved my work PC to Arch after a few weeks because I got very confident with using it at home. There also, I never looked back: Everything is just faster and especially when your machine is idling, it is actually not doing anything. Ever. Gone are random "jetplane takeoffs" and slowdowns (search indexing, updates, antivirus). Also, on my Laptop, the battery lasts forever longer than with Windows. Right now, I am using a simple GNOME desktop environment on top of Arch. I am using PHPStorm and Docker CE for local development. All of these are just a few package installs away. No need to mention that web development is just so much easier on Linux. For my work scenarios: Printers are basically plug-and-play with Linux (much more than Windows!). Same for SMB shares on the network. Microsoft 365 has 99% of it's features in their web apps these days (Outlook, SharePoint, Excel, Word, ...), even Teams works perfectly as long as you are not using Firefox. What am I missing? Basically nothing important! There are a few very small things. One example: We have a Miracast thing in the conference room to share our screens to which just doesn't work for Linux. No biggie, because there is also a HDMI cable 🙂

Not that this will solve your problem or have anything to do with it, but I can see a <head> tag inside another <head> tag when looking at your source code. W3C validity check brings some more problems to the surface, especially with your meta tags: https://validator.w3.org/nu/?doc=https%3A%2F%2Fzar.co.com%2F You could try fixing at least everything in <head> and try again.

How would your structure look like in WordPress?

For such cases, even more readability: $wire->addHookAfter('Pages::saveReady(template=news)', function($event) { // [...] } This way, the hook doesn't even get called if template isn't news. Also, I think you can even get rid of the second guard clause like this: $wire->addHookAfter('Pages::saveReady(template=news,day!=)', function($event) { // [...] } If the page doesn't have a day field, the selector doesn't match and the hook isn't called. This is untested though 😊

Cool to see a project about my home country but not in my home country! Greetings from Switzerland! A very cool blog you have there. Model trains bring me back to my childhood, we had a ton of Märklin trains and of course, most of them were Swiss trains 😍 I think many of us feel this way. Welcome to the family 😊