Wie überschreibe ich am besten jQuery Plugins in Shopware 5

Gerade als Shopware Entwickler ist es wichtig den Aufbau von jQuery Plugins und dem StateManager zu verstehen. Da alle Plugins nach einem Publish / Subscribe Muster aufgebaut sind ermöglicht es Shopware bestehende Plugins mit eigenen Funktionen zu erweitern. Allerdings reicht es manchmal nicht aus nur auf das Event zu subscriben, wenn man die ganze Funktion umschreiben möchte.

Wie sind jQuery Plugins in Shopware aufgebaut?

In diesem Blogpost schauen wir uns an, wie wir die vorhandenen jQuery Plugins von Shopware überschreiben. Ich zeige Euch wie Ihr ganz einfach jQuery Plugins überschreiben könnt, ohne gleich den ganzen Code zu ersetzen und damit Fehler verursacht. Für den Anfang wäre es ideal, wenn Ihr schonmal mit Javascript oder JQuery gearbeitet habt. Falls nicht, kein Problem es geht auch so!

Wie Du ein jQuery Plugin überschreibst

Shopware hat eine neue Methode eingeführt die es ermöglicht Plugins zu überschreiben. Diese Methode nennt man $.overridePlugin, diese ist an das jQuery Objekt gebunden und kann so überall im Storefront verwendet werden.

Wir müssen also um ein Plugin komplett überschreiben zu wollen im Grunde den Namen des Plugins und den Namen der Methode kennen. Im Beispiel zeige ich Euch wie Ihr den Product Slider überschreiben könnt:

;(function ($, window) {
	'use strict';
    $.overridePlugin('swProductSlider', {
    	override the plugin functions
    });
})(jQuery, window);

Wichtig ist das die Quelldatei in Eurem Plugin im frontend/ _public/src/js/ Ordner befindet und genau so benannt ist wie die Datei, die Ihr überschreiben wollt. Wie hier zum Beispiel frontend/ _public/src/js/jquery.product-slider.js. Das war es auch schon! Total einfach, oder? :)

UPDATE: Solltest Du ein Theme haben, musst Du die js Datei noch in das $javascript Array in Deiner Theme.php hinterlegen.

protected $javascript = [
    'src/js/jquery.product-slider.js'
];

Shopware jQuery Plugins extenden

Wenn Ihr nicht die ganze Funktion überschreiben möchtet, sondern nur einen Teil könnt Ihr auch mit der extend Methode arbeiten. Shopware hat die Möglichkeit hinzugefügt die Ursprungsfunktion aufzurufen und Ihr zusätzliche Logik hinzuzufügen. Dieses könnt Ihr mit der Oberklasse superclass machen. Hier zeige ich Euch ein Beispiel wie man im Product Slider die init Function erweitert, ohne alles zu überschreiben:

;(function ($, window) {
'use strict';
  $.overridePlugin('swProductSlider', {
      init: function () {
          var me = this;
          me.superclass.init.apply(this,arguments);
      }
  });
})(jQuery, window);

Nochmal zusammengefasst wie Du ein jQuery Plugin am besten überschreibst

• Mit der Publish / Subscribe Methode kannst Du Events oder auf ganze Funktionen subscriben und diese umändern.
  
• Um ein Plugin komplett zu überschreiben, benutzt Du die Methode $.overridePlugin
  
• Wichtig ist, dass Du denselben Namen und dieselbe Ordnerstruktur wie bei der Quelldatei verwendest.
  
• Mit der me.superclass Methode kannst Du Plugins erweitern und extenden ohne den ganzen Code mit einfügen zu müssen.
  

In der Shopware Dokumentation wird Dir nochmal genau erklärt wie die JQuery Plugins aufgebaut sind und wie Du zum Beispiel mit dem StateManager arbeitest. Mehr Iinfos gibt es hier: https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/