FOL9000

Magento mit jQuery

von

Eigentlich muss man nicht lange suchen, um die nötigen Infos zur Integration von jQuery in Magento zu bekommen. Trotzdem hier nochmal eine Zusammenfassung.

jQuery ‚anpassen‘

Ein eigentliches Anpassen ist es nicht, aber trotzdem: Da Magento Scriptaculous nutzt, sollte man, um Konflikte zu vermeiden, jQuery zunächst in den Kompatibilitätsmodus setzen. Dies geschieht ganz einfach dadurch, dass man folgende Zeile

jQuery.noConflict();

an das Ende der jQuery-Datei setzt.

Welche jQuery-Datei man benutzt ist natürlich egal, aber in Produktiv-Umgebungen sollte es natürlich die minimierte Version sein.

jQuery nach Magento kopieren und integrieren

jQuery soll/sollte ein eigenes Verzeichnis im JavaScript-Verzeichnis von Magento bekommen, deshalb zunächst unter /js ein Verzeichnis jquery anlegen. Dann einfach die modifizierte jQuery-Datei dort hineinkopieren.

Damit Magento diese Datei auch berücksichtigt, muss sie im Layout angegeben und geladen werden. Die Angaben dazu werden in der Datei page.xml des Themes gemacht. Für das Modern-Theme also in

/app/design/frontend/default/modern/layout/page.xml

Dort oder in der entsprechenden anderen Datei folgendes einfügen. Die Zeile gehört dorthin, wo auch die anderen ähnlichen Zeilen zu finden sind.

<action method="addJs"><script>jquery/jquery-1.2.3.min.js</script></action>

Dies in die page.xml zu schreiben ist sicher nicht immer die eleganteste Art des Einbindens. Besser wird es in vielen Fällen sein, jQuery in der local.xml des eigenen Themes einzubinden. Der Code sieht dort natürlich gleich aus, zur Abwechslung hier aber mit komplettem Kontext:

<layout>
  <default>
    <reference name="head">
      <action method="addJs"><script>jquery/jquery-1.2.3.min.js</script></action>
    </reference>
  </default>
</layout>

(V.a. wegen der Versionsnummer natürlich in beiden Fällen den Dateinamen anpassen!)

Fertig

Zum Schluss das obligatorische Leeren des Caches nicht vergessen und jQuery sollte vernünftig in Magento integriert sein.

[UPDATE: In einem neueren Artikel erläutere ich, wie jQuery (und JavaScript-Code überhaupt) sauberer eingebunden werden kann und nicht im globalen /js-Verzeichnis abgelegt werden muss. ]

Kommentare sind geschlossen.