Shopware jquery Plugin 一些内置方法

In general, all jquery plugin will be put in the following direction:
themes/Frontend/Responsive/frontend/_public/src/js/

In this folder, you can find all the JS Plugins from Shopware itself.
You can create a new plugin OR customize those exists(NOT recommend).

How to customize an existing plugin?

1. $.publich:

• to publish/register the Plugin

$.publish('plugin/PluginName/Methode', [ me, event ]);

2. $.subscribe:

• to get the plugin folder path which published by $.publish()
• to take your customzied changes

$.subscribe("plugin/PluginName/Methode", function(event, me) {
    var $el = me.$el,
        opts = me.opts;
    console.log(opts);
    // ...
});

How can I bind the plugin to my theme?

1. JavaScript Datei (z.B. frontend/_public/src/js/jquery.myFile.js)

(function($){
    $.subscribe("plugin/PluginName/Methode", function(event, me) {
        var $el = me.$el,
            opts = me.opts;
        console.log(opts);
        // ...
    });
})(jQuery);

2. Theme index/index.tpl or index/header.tpl

• depends on where you put your <script link="..."></script> code, but it really doesn't matter

{block name="frontend_index_header_javascript_jquery_lib" append}
    <script src="{link file='frontend/_public/src/js/jquery.myFile.js'}"></script>
{/block}

Official tutorial for jquery plugin: https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/