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/
