Write your own javascript in the storefront at the Shopware

In this blog, you are going to learn “How to write your own storefront javascript plugin at Shopware.”
I hope you know the directory structure of Shopware 6 plugin, if you don’t know, see here- https://docs.shopware.com/en/shopware-platform-dev-en/internals/directory-structure.

Storefront JavaScript plugins are vanilla JavaScript ES6 classes that extend from our Plugin base class.
Firstly, create a Resources/app/storefront/src/test-plugin folder and put a test-plugin.plugin.js file in there. For more background information on JavaScript classes, take a look here.

test-plugin.plugin.js

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

export default class TestPlugin extends Plugin {
    init() {
        window.onscroll = function() {
            if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
                alert('seems like there\'s nothing more to see here.');
            }
        };
    }
}

In the above file create and export a TestPlugin class that extends the base Plugin class. Each Plugin has to implement the init()method. This method will call when your plugin gets initialize and is the entry point to your custom logic. In my case, I add a callback to the onScroll event from the window and check if the user is scrolling to the bottom of the page. If so we display an alert.

main.js

import TestPlugin from './test-plugin/test-plugin.plugin';

const PluginManager = window.PluginManager;
PluginManager.register('TestPlugin', TestPlugin);

Now you have to register your plugin in the PluginManager. Create a main.js file inside your Resources/app/storefront/src folder and then get the PluginManager from the global window object.

You also can bind your plugin to an DOM element by providing an css selector.

import ExamplePlugin from './test-plugin/test-plugin.plugin';

 const PluginManager = window.PluginManager;
 PluginManager.register('TestPlugin', TestPlugin, '[data-test-plugin]');

In this case, the plugin just gets execute if the HTML document contains at least one element with the data-scroll-detector attribute. You could use this.el inside your plugin to access the DOM element your plugin is bound to. Lastly, you have to add a small code snippet for the HotModuleReload server to work with your custom plugins.

Create an Resources/views/storefront/page/content/ folder and create an index.html.twig template. Inside this template extend from the @Storefront/storefront/page/content/index.html.twig and overwrite the base_main_inner block. After the parent container of the blog add a template tag that has the data-example-plugin attribute.

{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}

{% block base_main_inner %}
    {{ parent() }}

    <template data-example-plugin></template>
{% endblock %}

This template extension your plugin is active on every content page, like the homepage or category listing pages.

I hope it will help you. Thanks for reading. Happy Coding 🙂
Thank You.