Skip to content

Frontend/Theming

Currently the module includes the CommerceDemo demo theme which is used in the preview url and to develop locally. It's built using an modern and productive stack:

  • Tailwind CSS, a highly customisable CSS framework which can be used directly in your HTML. No more heavy CSS!
  • Alpine.js, a lightweight tool for progressive enhancement. Sprinkle some javascript on our Twig templates.
  • Vite, a lightning fast build tool ⚡. Only needs a vite.config.js file, less complex than Webpack.
  • Typescript

The demo theme uses a few dependencies. We try to avoid jQuery and go for lightweight, vanilla JS libraries. E.g.

  • Algolia Autocomplete.js which provides a simple way to create a very powerful search box.
  • Splide, a lightweight slider and carousel written in pure Javascript without any dependencies.
  • Notyf, a simple, minimalistic, dependency-free, ~ 3KB Javascript library for toast notifications.
  • Photoswipe a vanilla Javascript lightbox/image gallery without dependencies.

Run Vite dev server with HMR

When we edit our .html.twig, .ts or .css files, we would like to instantly see the changes. Start the frontend dev server with:

cd src/Frontend/Themes/CommerceDemo
npm run dev

This will start up Vite in watch-mode, and also output Typescript errors in the console. The vite_entry_link_tags and vite_entry_script_tags Twig tags in Base.html.twig will check if the dev server is running and output the appropriate tags.

Read more about the Vite & Fork CMS integration at https://github.com/jessedobbelaere/fork-cms-vite-boilerplate