Leaderboard

https://www.centura.ca We finally put Centura's national website online. A whole journey of a year and a half that began with an important phase of analysis. Centura is one of Canada's leading distributors of floor and wall coverings. Seven administrative regions with different prices, four user profiles each with their privileges, daily synchronization with an inventory system, an ElasticSearch search and a concern for speed, these are the main challenges in the development of this site. And of course, everything must be adapted to the mobile. It is a smooth launch, without drum or trumpet, to stabilize the site, to know the reactions of the administrators, the pleasures and frustrations of the users. The primary goal was to provide a national showcase for this important distributor. Centura has an inventory system that includes tens of thousands of products, the SKUs. However, this large database does not contain descriptions or groupings by collections. So we used ProcessWire as a central data management point, where images and text meet inventory. Since Centura is divided into seven administrative regions with 14 distribution centres, it was essential to leave control over the local aspects of these divisions, such as opening hours, collections sold in the region, promotions, etc. In addition, one region, London and Windsor, is going it alone. It was important to add it to the list and direct the visitor to the right region (and another CMS). As a distributor, Centura deals with retailers to sell its products. He also negotiates at a higher level with architects and construction contractors. Four types of users were identified. The consumer who can keep favorites in his profile. The retailer who can query the central inventory and who has access to promotions and other documents. The architect or designer who can order free samples. The installer interested in ordering tools or installation products. Apart from consumers, the remaining types of members are managed (approved) by each branch. The branch administrators therefore had to be able to "visualize", to locate this information in the tree structure. This involved creating four types of profiles, four main forms, allowing everyone to have a custom dashboard. People registered in these profiles are registered "under" each branch. Let us not forget the daily synchronization, done at night, in order to reflect new products, price changes, etc.. Since the new SKUs are "orphaned" before being associated to a collection, the import mechanism, inspired at the base of the module the Ryan Cramer, Import Pages from CSV, allows to identify what has been changed from what is new. This last category is placed in the tree structure under a page called Orphaned Skus. The site managers can create collections in the Products section and associates through a Page reference field the SKUs. When saving, since SKUs now have an association, they are pushed under the collection, so administrators can easily spot what belongs to what. This large site required the intensive use of various fields, including Page reference, Repeater Matrix. The ProFields collection was a great help, as was ListerPro, widely used by both us and the administrators. What a choice to create batch actions with custom actions! This last module would however deserve a little more love, because it is a little more difficult to understand for the administrator user. We also used Form Builder, but the programmers preferred to build the four main forms themselves, as too much interaction was needed with other components of the site. The documentation for this module is anemic. If the use of the module speaks for itself, its use by API is immediately more cryptic. However, we promise to explore it further in order to leave as much control as possible to the administrator. Another aspect that could be improved in ProcessWire is language management. The internationalization system is fantastic and we have nothing to say about it, but the translation of coded texts is rather hell. For the administrator user, finding a translation and modifying it is very complicated and sometimes incomprehensible. Indeed, what is marked by the __("token") function can be changed in two places for each translation (English and French in our case). But when the time comes to modify these translations again, you have to remember that it is the "token" that governs the search... Moreover, unlike Drupal, if identical __("token") commands are found in different PHP files, you have to translate them in several places! There are ways to use pages inside the site to feed all translations of the site, this takes time and good planning. You can also use a central translation file, but with large sites, it can become cumbersome. There are two types of search in this site. The search by facets of coating products required the use of Elasticsearch which allowed an almost instantaneous display of products. For tools and installation products, we used a more standard model, built with ProcessWire. Why two search systems? There was a questions of time and budget here. The second search is quite different in practice. Caching the site was of course important. Several obstacles to this one: the use of numerous cookies, in particular those of the choice of region and language by the user, the regional variation of the prices, the variation also of the collections to show. Finally, nginx in node balancing. Unfortunately, we could not use the ProCache module, depending on the htaccess file. It is possible to translate ProCache rules into nginx rules. We were, however, reluctant to depend on something over which we had little control. So we opted instead to pull the strings of the cache, as we saw fit, with the features of ProcessWire. It should also be remembered that nginx also has very powerful caching features. In the near future, however, we will revisit ProCache. We, at Spiria, love working with ProcessWire. The more we create sites with this CMS, the more we develop reusable components, which greatly speeds up the creation process. At the moment, we are setting up four "microsites" of products for another company. These sites will then be linked to a central site for "information exchange". In another case, we have to create two sites that operate in parallel. The customer wants to manage the information in a single site while pushing to a second certain information. Our main challenge remains the notoriety of ProcessWire which is sometimes difficult to sell against giants such as Wordpress and Drupal. However, by creating sites the size of Centura, we are confident that this great CMF/CMS will take its rightful place. Speaking of Centura, the journey continues. An online shop will be created, as well as a blog. ProcessWire makes it possible to create solutions adapted to each company without escalating costs. In other words, you can easily do without Wordpress plugins or Drupal modules, because a customized solution is always more profitable than trying to deconstruct what others have done. Translated with www.DeepL.com/Translator

I tend to use wireHttp. Here's a recent example: https://github.com/adrianbj/CookieManagementBanner/blob/a8e66127bdcbd80e10ac797ad5cbb143644c7857/CookieManagementBanner.module#L38-L39 $http = new WireHttp(); $userLocation = $http->getJSON('https://extreme-ip-lookup.com/json/'.$this->get_user_ip_addr());

Congrats to such a nice-looking, professional and big site-launch! It depends how you are using it. If you already have the ProFields package, you should have used https://processwire.com/blog/posts/functional-fields/ That way, you can have one central tpl/page, and store every single string that needs to be translateable in one place. For bigger sites, it's a godsend. Read the above post and try it out sometime.

@adrian, @Guy Verville Thanks for your inputs. I tested WireHttp a little today and I must say that it's quite convenient, so I will use it. The beauty of PW, one tool for almost all tasks. $clantag = "test"; $token = "---"; $url = "https://site.com/" . urlencode($clantag); $http = new WireHttp(); $http->setValidateURLOptions([ 'convertEncoded' => false, 'encodeSpace' => true ]); $http->setHeaders([ 'Accept' => "application/json", 'Authorization' => "Bearer " . $token ]); $response = $http->getJSON($url); d($response);

@gmclelland that real-estate site is most definitely built with PW, it has the x-powered-by: ProcessWire CMS header ? @OLSA just released a wonderful module a few days ago - with the main purpose of exactly that: storing various "setup" / configuration settings in just one single field, therefore avoiding native-PW-field-bloat. I tried it out and can really recommend it.

Hello All, I've been working on a new Fieldtype + Inputfield combination that handles street addresses. I've been using it now for about 3 months on my latest administration system for a charity and, so far, it seems to be working really well for them. It's based on the meta-data from Google's LibAddressInput project and uses the data feeds from that to build a cache of address formats used by various countries. My initial testing was aided by @Macrura and @adrian - and they were later joined by @mel47 and @BFD Calendar - so a big thank-you to them all. You can access the repository on GitHub and the Module Repository. Here's a few images from the project. First up: config screen. Here's an early version... ...and a more recent update... Here's a UK-based address. The module can integrate with my tag parser, if installed. Note that the output is formatted according to the output meta-data from the feed - which should match the preferred postal preferences of the destination country. Which subfields are required, and their regex expressions (if any) are also pulled from the feed and used as validation rules on the input side. Here's an address in the Netherlands - inputfield layout is currently adjusted on save - if you've configured it to adjust based on the destination country. Hopefully this will eventually be ajax driven. Use of the address preview is configurable and the HTML output can include micro-format data. Address sub-fields can also be used in selectors... Back with inputs, if you prefer a table-based input - you can have it... Format hints (unfortunately, I've found that many users need these)... Let me know if you find any issues or if you have any feature requests. So far, I have this from the previous testers... Allow multi-lingual address input for countries that support a multi-lingual postal system (like Canada.)

Because it is simply amazing, has an improved user experience, is more lightweight, better looking and has nicer features than version 4. Almost everybody will profit. Please consider voting at github for this feature: https://github.com/processwire/processwire-requests/issues/217

New website design for HealthCARE Express. Used UIkit3 for the front end look. Jquery Store locator for the locations page. PW Modules used: Hanna code, google map marker, Inputfield Ace Extended, MarkInPageTree, Video embed for YouTube/Vimeo, and an in house asset minification module. Backend is pretty unique. Basically, I use the processwire templates for UIKit items instead of pages. ie. card.php, container.php, section.php. navbar.php, grid.php, slideshow.php. I also add some extra things like page.php, inner_page_heading.php, image.php, page_snippet.php, text.php. (Page snippet is if I want to run php.) Most of the root pages in the admin page tree use the page.php template. Their children are either detail pages or layout rows for that page. I also have a blog.php that uses the page.php file, just because that lets me force the children to be blog posts. The page and blog templates have fields like meta page title, meta page description, selected page layout, css, js, images, files. All markup is added through admin as well through things like the selected page layout. I have one page in my page tree for page layouts and I add children for the markup. ie. I can add a "Service" page layout to the backend, and add a "page heading" child, an intro "section" child, a service "grid" child, etc. You can check out screenshots. It basically gives me a page builder! The children of the grid page are forced to be cells, and have gui to select the columns and such. I have a css field and a js field attached to almost everything. On page save, if that page has one, it pulls them all and merges them all into one css file and saves it to the server with a timestamp as filename. That way all php, css, and js code is done through backend.

Hi @thetravelwriter I don't think that there any migration tool for static sites, but using an HTML DOM parser and PW API you can easily migrate your data.

@tpr nice portfolio site. You might want to fix your AdminOnSteroids link at the top though ?

I've rebuilt my portfolio site with Eleventy static site generator and it was a joy to work with. It's node js based and you can use markdown or a bunch of template engines. I went with nunjucks which has very similar syntax to twig or latte and supports template inheritance, layouts, filters, etc too. As it's based on node you can use all the available npm packages, eg for filters. Data can be set at global, directory or template levels (json, js or md formats), which is very handy. Pagination, urls and collections are very versatile, you can tweak it to your likings. It has a built in --serve switch that starts a server and watches for changes which makes checking changes is convenient. And its very fast, takes for my 30 page site about 3-5 seconds to rebuild. It took some time for me to get some features to work, sometimes I ended up filing a ticket at GitHub. That said it's not perfect but the development is active so bugs are probably be fixed soon. This was my first project in it but if I look back many of my projects could use it (or other SSG), where there's no need for admin and forms. This site was in WordPress and I planned to replace it PW, but Eleventy was a greater challenge to try. Now the whole site is under 4 Mb, previously it was 109 + the DB. Of course size does not matter much but I like to keep things at the bare minimal. It has high pagespeed values which I could tweak to get 100/100 (gtmetrix 100/95, with the only issue of not having a cdn), but reverted those tweaks for a simpler development flow. http://rolandtoth.hu/portfolio/ https://www.11ty.io

Is the white tab the active one? If not, I would change it so, and perhaps remove the bottom border. However, perhaps pills instead tabs would look better here, I will make some mockups when I will have time.

Ok @bernhard - here's a try a tabs. I think this works ok and looks ok, although I am sure someone out there will want to tweak the look of it - looking at you @tpr ? - and happy for your thoughts! Is everyone happy enough with this so I can finish it up and commit?

Hi all, Introducing a new GDPR Cookie Management Banner module. https://github.com/adrianbj/CookieManagementBanner https://modules.processwire.com/modules/cookie-management-banner/ This module was sponsored by VentureWeb in Squamish, BC, Canada. I converted a Drupal module written by Oliver Walker from VentureWeb into what you see here. The Drupal module requires jQuery so at the moment, this module also requires jQuery. I will probably remove this sometime soon. This module certainly has similarities to MarkupCookieConsent but provides the user with the following features: The user can accept all cookies or they can choose to not accept tracking/marketing cookies. Module config options allow you to: define all text and button labels (multi-language support) manually increment the cookie policy version which forces the user to review their consent again select whether users can manage their cookies, or just accept all option to limit display of banner to users only in European Union (by IP address) position selection (top or bottom overlay, or content pushed down from the top) It comes with basic default styling which is easily overwritten by site CSS The module sets various values to the dataLayer array which works together with Google Tag Manager - please read through the code in /assets/js/CookieManagementBanner.js to get a better idea of how this works and what is made available for GTM. You can wrap your tracking/marketing cookie code in a check for the localstorage key of: pwcmbAllowCookies if(localStorage.getItem('pwcmbAllowCookies') == 'y') You can also provide a link on your site (probably in the footer) like this that will allow the user to show the banner even after they have saved their preferences / accepted. <a href="#cookies" class="js-pwcmb-notice-toggle">Manage Your Cookies</a> Would love to hear feedback from anyone who gives this a go.

I would like to just show my appreciation to ProcessWire and all the guys that have put work in to make it what it is now. I have use many, many CMS's in my time. Statamic, Drupal, WordPress, ConcreteCMS, CraftCMS etc... And they all have their strengths and weaknesses. But I can honestly say, ProcessWire is by FAR the best Content Management System I've ever, EVER used. I can honestly say the only weakness ProcessWire is the lack on eCommerce. But, that isn't even a weakness of ProcessWire. The tools are there for us to create an eCommerce system. I'm a front-end developer but with ProcessWire it empowers me to realise anything. Honestly, when one of the designers asks "Can we do this?" it feels so great to say YES! I, with very little backend experience built a real-estate system that completely runs on ProcessWire pulling in from an external feed (Vebra) and I did it with ease! I just wanted to say thank you, thank you for creating a framework in which, people like myself, who love front-end but find back-end daunting can pick it up and literally do anything with EASE. ProcessWire gives me so much confidence and makes me feel so good about myself. I've recently been working on an WooCommerce website, and I can't tell you how much I've been missing ProcessWire. Thank you @ryan for making a system that is so simple, even simpletons like myself can dream big. Lots of love, Tom Edit: Interestingly I feel like it would be easier to build an eCommerce system using ProcessWire than it would trying to completely reskin WooCommerce, like seriously, WooCommerce stop injecting markup and putting them in core functions.

We recently finished a relaunch of the website of the consulting firm Engfer Consulting: engfer-consulting.de. Built with ProcessWire 3 and Bootstrap 4. Features Bilingual website (UPDATE: The English page is now available! the English page is inactive at the moment, as the content is not ready yet) A strong, simple data structure for job offers and news, allowing for a custom search page and fulltext search Sectioned content-blocks built with a Repeater Matrix (ProFields) Reusable components available as page reference fields Automatic generation of open graph-tags, with manual overrides available on each page Contact forms with a custom recipient depending on the current page Modules used: ProFields ProForms Sitemap Cookie Management Banner Duplicator Tracy Debugger Wire Mail SMTP Admin Links in FrontEnd Technical insights Most of the content is built using a Repeater Matrix field. Each section has an optional heading and a select-field for background colors. Some of the sections available include: Text blocks (a repeater-field for multi-column text) Feeds / listing of the latest job offers or news (with a field to control the number of entries shown) Displaying a team member or quote (selected through a page reference field) Downloadable files (a multivalue field for file uploads) Those sections can be combined and stringed together arbitrarily, so any number of page templates showing different contents can be built. The job offers template, in contrast, features fixed fields for taxonomy assignment, description, contact person, preview image and so on, making the job offer pages uniform and easily accesible. The (technically) most interesting part of the site is the job overview page, which contains custom filters that are automatically generated from the available taxonomy terms. The stylesheets are written in SASS, built with Bootstrap 4. Only the base and grid SASS files of Bootstrap are included, along with the Bootstrap components that we ended up using. Using Bootstrap 4 as a framework in this way makes development & styling blazingly fast, once all the utility classes are commited to muscle memory ... > Our Agency. Screenshots

Thanks, I gave it a go and it was almost perfect ? The main issue I found is that you applied the padding to the list items and not to the links inside them so not the whole tabs were clickable (or at least the links weren't entirely fill the tabs). I also enlarged the tab sizes to make them easier to click on. Plus I removed the dotted border styles, for me it now looks less "crowded". I needed to replace these items in 2 CSS files as I remember, but perhaps there are other places too (#D9E1EA is the new border-color I used): dotted silver => solid #D9E1EA As for hiding the active tab's bottom border, I enlarged the link's bottom padding by one pixel and applied a negative 1px bottom margin (instead of the existing box-shadow). I have also added some padding to the edit link at the end of the tab bar for easier click. I didn't like the white background on hover because it looked the same as the active item, so I made it slightly darker instead. Feel free to add/modify these if you feel so. styles.css

The change to the region selector has changed recently. Weird that the logo code has not followed. Thanks for this. I will make this corrected first in the next morning. update: strange, the code calling the logo is the same for every situation. I don't have this issue here. The source the problem seems related to cache.

Here is how the map row looks. Its a regular grid item with the collapse gutter option set and the first child cell set to 1/3 on large screens. I could do the map side as a map.php template though instead of a php snippet even though its just 5-10 lines of code. I did a contact_form.php for the basic form I used on the contact page. It's easy to use checkboxes to know what fields to make with you add it to the page. Address, phone and such is still pulled from hanna codes so if you don't want fax you just leave it blank. My goal is to be able to import the whole row from an external library of some sort and not have to build them.

Just commit if you are ready, I will get back to this when I will nothing else to do ?

I like the first one. Is the dotted border style intentional or comes from tracy core? I think solid would be better. The brown color is also from tracy core? Seems too old fashioned to me, I think very pale blue would be more modern, eg like borders in the reno theme.

Thank you. It is interesting. As we don't know if we will host the two sites, it can be tricky to get there. But I will give it a try!

Thanks @gebeer - I forgot about that. I have pushed a new version that uses wireRenderFile instead. It definitely wasn't available in older versions of PW.

Nice website and really unique approach for building it. ? Just my opinion, but you should consider that in the case you ever want to switch the framework or build the website with a different structure, that I think great parts of your setup will become obsolete. Not that it is likely, because with the UIkit framework you have made a excellent choice as framework, but this approach is maybe not really future proof because it heavily depends on one framework. Also, if you haven't already, it would be best to use unique titles for everything (fe. sections, slideshow etc.), because otherwise using the page search will be difficult. I had a similar setup years ago with Page Tables (nowadays I prefer Repeater Matrix) and it was hard to find the right element, because I had named everything similar. ? Regards, Andreas

You have the link as follows (note the space): https:// github.com/rolandtoth/AdminOnSteroids

Absolutely awesome ? tpr is right about the bottom border but it's already great imho ?? for my understanding I'd also see the white tab as the active one (having the same colour as the dump section)

I modified Batch Child Editor to work with my use case of not requiring title field for templates. Commented out: if(!in_array('title', $convertedFieldPairings)) { if(in_array('add', $this->data['pageSettings'][$pp->id]['editModes']) || in_array('replace', $this->data['pageSettings'][$pp->id]['editModes'])) { $this->error($this->_("You must include a \"title\" field in the CSV Field Pairings, unless the only available modes are \"Edit\" and \"Update\".")); } } To create a new naming scheme, changed row 1560 to: $this->setPageTitleOrName('name', trim($childTemplate . "-" . $this->wire('sanitizer')->text($childFieldValue) . "-" . $x), $np, $newPage); After //populate numeric array of field names $fieldsArray = array(); foreach($np->fields as $f) $fieldsArray[] = $f->name; I added $this->populateField($np, $fieldsArray[$i], $childFieldValue); so it would not leave the first field blank. Btw. there are new releases of ParseCsv: https://github.com/parsecsv/parsecsv-for-php/releases It has received a big renovation, PHP 7.2 support etc. I was unable to make it work, but I did not sacrifice much time on it. Another library to consider is https://github.com/thephpleague/csv

@szabesz - this isn't the count of a PageArray that you were looking for, but it does return the ID of each page and is linked to the edit interface for the page. Is this at all useful? I think this is simple and clean enough not to be too messy

Im on mobile so I can't do a mock-up but I vote for a text based solution like matjazp mentioned and I would put the tabs above the dump. Just like the tabs in processpageedit. They would be code for the mouse and would not mess up alignments on the left or right. I don't want any automatic additional info. As Adrian said the need is always different and the solution is just one extra dump away. Please save your time Adrian ? thanks for all your great work! Still waiting for a donation button ?

I prefer buttons or links top left with descriptive text instead of icons...

Another UX thing is that icons on the left require shorter mouse movements, well most of the time ? Sure... I am really thinking of the basics here, nothing more: id, count() that's all that comes to my mind ?

Thanks, looks ok, except the possibility of the icons "jumping" because of the scrollbar. Is it possible to move them to the left instead? If it's a collection of pages (WireArray and derived) then we could see the number of pages, for example. My idea is to see the basics so that there is no need to click on anything if that is enough. BTW, it will also work with bd(), won't it?

An interesting read: https://dba.stackexchange.com/questions/75091/why-are-simple-selects-on-innodb-100x-slower-than-on-myisam

I've been using Licecap on MacOS as well - seems to work pretty well, but honestly haven't investigated what else is out there.

Ok, here is a really quick and dirty demo. Obviously the links need to look nicer and the selected one needs to be highlighted, but hopefully you get the idea. Any thoughts before I clean it up?

That was my suggestion: But I guess that's more effort than just implementing a new method dumpVerbose() with different settings. Let's wait for adrian to wake up - good morning btw ??

This week we take a look at a couple of reasons why you might want to choose InnoDB as your MySQL database engine when installing ProcessWire— https://processwire.com/blog/posts/using-innodb-with-processwire/

@Jonathan Lahijani That snippet changes the engine for tables, but there are other things need to be changed of InnoDB when using utf8mb4: https://github.com/processwire/processwire/blob/341342dc5b1c58012ae7cb26cffe2c57cd915552/install.php#L958-L969

Your idea is to stick to "dump", while Adrian's idea is different. Let's not try to merge the two ideas, but come up with a solution to support Adrian's original idea which is great, I think.

At first glance I liked the array-approach, but thinking about it a little bit more I think it is not a good idea to modify the type of the originally dumped object. It should really output the correct type. Also @szabesz suggestion would be a wrong output for my understanding. Having one d() call output two dumps on the other hand can also be misleading. IMHO the best solution (and I guess also the simplest one) would be to have d() output the debuginfo version and dv() = dumpVerbose() output the verbose info with debugInfo = off. I don't think that a config setting is necessary or any better. I think it's even more confusing and one more thing to keep in your mind. Another setup and you might end up in another output. Not the best option. d() and dv() would just be one thing to remember across all setups and it would produce a consistent output always and everywhere. EDIT: Another option I could think of would be something like this, having a toggle in the label section showing/hiding one or the other but outputting only one visible object for one single dump and also showing correct variable types: The label, eg d($page, 'my custom label'); could also be shown right beside the toggles

I agree, we should avoid making this "impression". However, UI-wise I like the first approach a lot more: more compact and makes a group of the two. Cannot you somehow output this:

Nice play on words there. -- In the article you mentioned you could modify your tables to InnoDB by exporting, doing a search/replace, then re-importing. You can also do it like this: <?php namespace ProcessWire; // assuming this script is in the pw root dir; backup your database first, just incase! include(dirname(__FILE__).'/index.php'); $query = $database->query("SELECT table_name FROM information_schema.tables WHERE table_schema='{$config->dbName}';"); foreach($query->fetchAll() as $row) { $table = $row[0]; $database->query("ALTER TABLE $table ENGINE=InnoDB;"); }

I'm enjoying this discussion. I would love to see more people sharing screenshots of their setups and techniques describing how they handle complex layout requirements. @OLSA - That's a really nice site and a good example of a site with a lot of different page layout styles. Did you create that in Processwire? If so, care to share how the pages are built in Processwire? Looks like another interesting technique was just shared:

The current PW homepage has a few screenshots of the admin featuring the old UI. @ryan For what it's worth and because I had 5 minutes I remade it in the new UIKit theme. It's just a screengrab - nothing fancy. Might not even be the right size but it's been annoying me irrationally for months ?

Thx @Mackski I've done a slightly different approach: You now have the option between three methods: save() show() download() The save() method will return the resulting file urls and paths on success: @flydev thx I've added it to the modules directory ?