sylius/bootstrap-theme

Bootstrap Theme for Sylius

Installs: 22 818

Dependents: 3

Suggesters: 0

Security: 0

Stars: 65

Watchers: 18

Forks: 23

Open Issues: 16

Language:HTML

v0.1.2 2020-06-28 21:07 UTC

This package is auto-updated.

Last update: 2020-09-29 08:21:29 UTC


README

68747470733a2f2f73796c6975732e636f6d2f77702d636f6e74656e742f7468656d65732f73796c6975732f6173736574732f696d672f73796c6975732d626f6f7473747261702e706e67

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

Homepage

Product show

Product page

Cart

Cart page

Checkout bar

Checkout bar

Changing the theme

Changing the theme