Skip to content

Sylius Bootstrap theme with build process based on Webpack Encore

Notifications You must be signed in to change notification settings

nediam/BootstrapTheme

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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@^7.0.0 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

Homepage

Product show

Product page

Cart

Cart page

Checkout bar

Checkout bar

Changing the theme

Changing the theme

About

Sylius Bootstrap theme with build process based on Webpack Encore

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 83.5%
  • JavaScript 13.9%
  • CSS 2.6%