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 0

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 Theme oder 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 wars auch schon! Total einfach oder? :)

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 Ursprungs Funktion 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 den selben Namen und die selbe 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/

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

Noch keine Kommentare vorhanden.

Was denkst du?

Shopware SEO
Guide 2018

shopware seo guide

Genug von schlechten Rankings?

mehr erfahren

Tools, die wir

verwenden

seobility

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Theme: Eigenes Listing Layout erstellen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Staging Umgebung – Was ist das und warum brauchst du eine?
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Plugin Theme anpassen
Wie du jedes Icon in Shopware 5 anpassen kannst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
© 2017 by 8mylez. Powered by Goltfisch GmbH.