Wie überschreibe ich am besten jQuery Plugins in Shopware 5

Wie überschreibe ich am besten jQuery Plugins in Shopware 5

Nicole Wolf 07. Mai 2018 2

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/

2 Kommentare

  • Es reicht zum Überladen eines JS-Plugins (zumindestens in Shopware 5.6.2) nicht aus, dass die Datei genauso wie die zu überladene Quelldatei benannt ist und im selben Verzeichnis abgelegt wurde.

    Damit die Änderungen wirksam werden, muss zusätzlich noch ein Eintrag in der Theme.php des eigenen Themes für die Überladung gemacht werden.
    In meinem Fall habe ich das jquery.emotion.js Plugin überladen und dazu den folgenden Eintrag hinzugefügt:

    protected $javascript = [
    'src/js/jquery.emotion.js'
    ];
  • Hey Flo,

    vielen Dank für den Hinweis! Ich habe den Blog Beitrag angepasst und erweitert, dass es bei einem Theme noch in die Theme.php eingetragen werden muss.

    Gruß
    Alexander

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Tracking für deinen Shopware Shop einrichten - Teil 1

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Über 8mylez

✓ 31 Mitarbeiter

✓ Shopware Gold Partner

✓ 35.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2022 by 8mylez GmbH //  Impressum + Datenschutz