Sylius Bootstrap Theme

Sylius Bootstrap theme with build process based on Webpack Encore.

It allows to swap to Bootstrap-based theme separately in each channel.

Installation

There are two ways to install a theme. It is possible to copy files in themes/ or add this package as a composer dependency and create a child theme.

The instructions below refer to an installation in the theme folder. Installation as a composer dependency (with child theme) is also documented.

Branch 0.1.x is only compatible with Sylius 1.6. Master is compatible with Sylius >= 1.7.0.

1. Copy files from repository to ./themes/BootstrapTheme

2. Install Encore

   composer require encore

3. Install node dependencies

   yarn
   yarn add @symfony/webpack-encore sass-loader@^7.0.0 node-sass lodash.throttle -D
   yarn add bootstrap@^4.5.0 bootstrap.native@^3.0.0 glightbox axios form-serialize @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

4. Import bootstrap-theme config in the main webpack file

   # ./webpack.config.js
   
   const Encore = require('@symfony/webpack-encore');
   const bootstrapTheme = require('./themes/BootstrapTheme/webpack.config');
   module.exports = [bootstrapTheme];

5. Edit project config files

   # ./config/packages/assets.yaml
   
   framework:
       assets:
           packages:
               bootstrapTheme:
                   json_manifest_path: '%kernel.project_dir%/public/bootstrap-theme/manifest.json'

   # ./config/packages/webpack_encore.yaml
   
   webpack_encore:
       output_path: '%kernel.project_dir%/public/build'
       builds:
           bootstrapTheme: '%kernel.project_dir%/public/bootstrap-theme'

6. To build the assets, run one of the following commands

   # compile assets once
   yarn encore dev
   
   # recompile assets automatically when files change
   yarn encore dev --watch
   
   # recompile assets automatically with live reload
   yarn encore dev-server
   
   # create a production build
   yarn encore production

7. Change theme in the admin panel by visiting the Edit Channel page

Screenshots

Homepage

Product show

Cart

Checkout bar

Changing the theme