rob1f / BootstrapTheme

Sylius Bootstrap theme with build process based on Webpack Encore

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

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 node-sass lodash.throttle -D
   yarn add bootstrap bootstrap.native 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