This repository contains various demos for Padloper (aka Padloper 2.). Each branch is a standalone demo. This can be based on a feature (e.g. product customisation at checkout) or a technology (htmx, hyperscript, jQuery, etc.).
Please read this main README before attempting to use the demos.
The main branch itself does not have any demos. Instead, its purpose is to:
- Outline a high-level intro to the demos.
- Outline requirements, generic notes and instructions.
- List and summarise what the individual demos contain.
This repository contains templates, partials, assets and scripts to help you quickly get started with Padloper 2 organised around various demos. It is advisable to go through the Padloper documentation, at least the getting started section.
- A copy of Padloper.
- Demo-specific requirements, e.g. some Third-Party JavaScript library.
This is not meant to be a full-blown site. In addition, the styling is incomplete and the original images need to be optimised.
Demo sites mimick a ProcessWire site folder structure without the folders assets and modules and without the files .htaccess and config.php. Folders whose names are prefixed with an underscore should not be added to your site. They serve several purposes, e.g. store screenshots, i.e. _screenshots or fields data, i.e., _fields, etc.
Add everything to your /site/ folder making sure to ignore folders whose names start with an underscore, e.g., _somefolder.
ProcessWire fields required for a demo to work properly will have their JSON configs included in a _fields folder at the root of the demo. That folder is not for deployment. Instead, use the file fields_data.json inside the folder to import the required fields into your ProcessWire site. You can then edit the fields if you wish, e.g. change the labels, descriptions, etc.
See /templates/partials/ folder for templates rendered as partials in other templates. Also see the function getPartialTemplate() in /templates/_func.php.
The php files inside /templates/padloper/ are custom Padloper template render files specifically for checkout process.
Make sure to enable URL Segments on the products and categories templates on your site.
/templates/images/ folder contains images (hardcoded for now) for a demo. For instance, for DEMO 1, the slider on the homepage.
The different demos might utilise third-party JavaScript libraries, for instance.
- htmx
- alpine.js
- hyperscript
- jQuery
When used, unless stated otherwise, these will be pulled from their respective CDNs from within /templates/_main.php.
Custom JavaScript code if used in a demo will be available in the file /templates/scripts/main.js. Custom JavaScript code are not minimised.
Most of the demos use Tailwind CSS. If a different CSS Framework is used, this will be stated in the demo's README. The file containing the Tailwind CSS will be available in the file /templates/styles/tailwind.css. Tailwind CSS files are not minimised and might also require purging.
Custom CSS code if used in a demo will be available in the file /templates/styles/main.css. Custom CSS code are not minimised.
You need to create a products and a categories page under your root page (home). They should use the similarly named templates respectively.
The template files for above pages are:
/templates/products.php -> for all or single product.
/templates/categories.php -> for all or single category.
You will also need a checkout page. Please follow the instructions in the Padloper documentation for setting that up.
@note: shop pages (exports), e.g. products not included in this repo.
Unless stated otherwise, all demos use a partial templates approach. This means using ProcessWire TemplateFile Class to render micro/partial templates within other templates. This increases the flexibility of the templating strategy.
This is the main Padloper demo. It is a complete demonstration of a Padloper shop frontend including products and categories/collections display, single product display, add products to checkout and checkout process. It utilises htmx and alpine.js in various places including checkout. It uses an ajax-powered checkout via htmx. This means ajax responses are html.
This is identical to Demo 1 except that checkout ajax is powered by jQuery instead of htmx. This means that responses to ajax are json.
TBD
This is identical to Demo 1 except that checkout is not ajax-powered. Hence, it doesn't use htmx.
TBD
Demo 2 is similar to Demo 1. In addition, it demonstrates how to add inputs for and collect, process and display customer requests for customisation of elibigle products in their order.
Demo 3 demonstrates how to use hooks to validate VAT numbers and amend the applicability of EU digital goods tax in relation to business customers. It uses extra custom inputs similar to Demo 2.
Demo 4 shows how you can add a Buy Now button. This allows a one-click-add-to-cart-and-go-to-checkout experience.
Demo 5 shows how you can have a checkout form with only a minimum number of inputs.
Demo 6 demonstrates how to use hooks to set initial customer details to the checkout form values at order confirmation. I.e., a pre-filled form.