Published

Adding JavaScript and CSS from an npm Package in Shopware 6: A Guide Using SimpleBar

Simplebar
Simplebar

Simplebar is a customizable scrollbars library that enables developers to create beautiful, cross-browser custom scrollbars with minimal effort. It can enhance the user experience by providing more visually appealing and consistent scrollbars across different browsers.

Step 1. Initialize NPM:

Navigate to the <plugin root>src/Resources/app/storefront/ folder and initialize npm

cd src/Resources/app/storefront/
npm init -y

Step 2. Install simplebar

Install simplebar using npm

npm install simplebar

Step 3. Add package to the build system

Create a build folder in current area and add the webpack.config.js file with the following content:

// <plugin root>/src/Resources/app/storefront/build/webpack.config.js
const { join, resolve } = require('path');
module.exports = () => {
    return {
        resolve: {
           alias: {
               'simplebar': resolve(
                    join(__dirname, '..', 'node_modules', 'simplebar')
               )
           }
       }
   };
}

Step 4. Include JS and CSS

  1. Import simplebar in JS

Create a new plugin js simplebar.plugin.js file in src/plugin/ folder and init simplebar elements

// <plugin root>/src/Resources/app/storefront/src/plugin/simplebar.plugin.js

import Plugin from 'src/plugin-system/plugin.class';
import SimpleBar from 'simplebar';

export default class SimpleBarPlugin extends Plugin {
    init() {
        new SimpleBar(this.el, { autoHide: false });
    }
}

Register a new plugin js in the main.js file

// <plugin root>/src/Resources/app/storefront/src/main.js
import SimpleBarPlugin from "./plugin/simple-bar.plugin";

PluginManager.register('SimpleBar', SimpleBarPlugin, '[data-simple-bar]');
  1. Import simplebar styles

Modify base style base.scss file and import simplebar style

// <plugin root>/src/Resources/app/storefront/src/scss/base.scss


@import '../../node_modules/simplebar/dist/simplebar.min';

By following these steps, you’ve successfully integrated the Simplebar NPM package into your Shopware 6 plugin. This not only enhances the visual appeal of your scrollbars but also demonstrates the power and flexibility of using NPM packages within Shopware. Happy coding!

Ref: