jQuery als Extension in Magento einbinden

Geschrieben von Andrej Radonic am 24. Februar 2014.

Die Bibliothek jQuery zählt zu den populärsten Javascript-Frameworks und wird in sehr vielen Magento-Shops verwendet.

Um sie in Magento zu nutzen, muss die Bibliothek eingebunden werden. Dies kann man manuell machen oder der Entwickler nutzt dazu die jQuery Magento-Extension der interSales namens MageJquery.

Die Integration als Modul hat mehrere entscheidende Vorteile gegenüber dem manuellen Weg:

jQuery als Modul in Magento installieren hat Vorteile

Die Installation ist einfach und schnell erledigt
Das Verhalten kann im Backend konfiguriert werden: Aktivieren oder Deaktivieren der Bibliothek, gewünschte Version, gewünschte Repository-URL
Die komplette Library kann per Knopfdruck innerhalb von Magento aktualisiert werden: Einfach im Backend die gewünschte Version angeben und speichern, schon werden automatisch alle Dateien heruntergeladen und installiert
Die Verwendung als Modul vereinheitlicht die Entwicklung – in allen Magento-Shops kommt dieselbe Technik zum Einsatz, mit derselben Installation und denselben Konfigurationsverfahren.

Und so geht das Integrieren von jQuery mit dem MageJquery Magento-Plugin:

Modul MageJquery herunterladen
ZIP-Datei auspacken und auf den Magento-Server laden
Folgendes Shell-Kommando installiert das Modul: modman deploy magejquery
Magento-Cache leeren und ggf. Compiler neu starten
Im Backend das Modul unter System > Konfiguration > interSales Module > MageJqery konfigurieren

Das Modul nun aktivieren und die Konfiguration speichern. Nun fragt das Modul nach der gewünschten Version. Wurde die Version eingetragen, lädt das Modul nach erneutem Speichern automatisch alle benötigten jQuery-Dateien herunter und installiert sie im media-Ordner des Magento-Shops. Außerdem erfolgt automatisch die entsprechende Integration im Template.
Weitere Einstellmöglichkeiten:
- Wenn Sie ein unkomprimierte jQuery-Dateien nutzen wollen, setzten Sie die Option Kompression nutzen (minify) auf Nein.
- Alias Liste: Hier können Sie den/die gewünschten Aliase für das Ansprechen von jQuery-Funktionen definieren.
- Repository URL: Hier hinterlegen Sie die Internet-Adresse des Repositories, aus welchem die Bibliothek heruntergeladen werden soll
- Um jQuery–UI oder jQuery–Mobile zu integrieren, müssen Sie diese zunächst aktivieren.