Jquery in Magento einbinden
In Magento wird defaultmäßig Scriptaculous als Javascript-Framework verwendet. Mit Hilfe von Scriptaculous werden die Effekte in Magento von Hause aus gesteuert. Wie ihr jetzt noch zusätzlich Jquery in den Magento-Shop bekommt, erfahrt ihr mit diesem Artikel.
Zunächst einmal muss sichergestellt werden, dass die Javascript- bzw. Jquery-Dateien korrekt in die HTML-Seite eingefügt werden. Dazu muss in der page.xml, die ihr unter app/design/frontend/default/TEMPLATE/layout/ findet, folgender Quellcode ergänzt werden:
<block type="page/html_head" name="head" as="head"> ... <action method="addJs"><script>scripts/jquery-1.6.min.js</script></action> <action method="addJs"><script>scripts/blogrammierer.js</script></action> </block>
Die Jquery-Dateien sollten dann im Root-Verzeichnis von Magento im Ordner /js/scripts/ liegen, um auch gefunden zu werden. Die Jquery-Scripte können dann in der Datei blogrammierer.js eingefügt werden, allerdings muss darauf geachtet werden, dass sie folgendermaßen aufgebaut sind:
$.noConflict();
jQuery(document).ready(function($) {
// Hier der eigentliche Jquery-Quellcode
});
Damit Scriptaculous und Jquery reibungslos nebeneinander funktionieren, muss Jquery in der Noscript-Variante eingebunden werden, da das $-Zeichen ebenfalls von Scriptacolous verwendet wird. Sollte man Jquery in gewohnter Weise einbinden, funktionieren beide Frameworks nicht mehr.
Guten Tag,
erstmal danke für den Beitrag.
Was ist, wenn die Datei “page.xml” bei mir nicht existiert?
Hey Florian,
eine “page.xml” existiert auf jeden Fall, es ist mehr die Frage wo diese liegt. Guck mal unter dem folgenden Pfad:
app/design/frontend/base/default/layout
Viele Grüße,
Dennis
Hallo,
und wie funktioniert jetzt die Noscript-Einbindung genau?
Wäre für jeden Tipp dankbar. Dann ist das Tutorial auch rund.
Gruß
Hey Marc,
den noscript-Bereich könntest du in einen CMS-Datensatz stecken. Das wäre eine Idee, dir mir spontan einfällt…
Viele Grüße,
Dennis
Hi,
funktioniert soweit gut (Magento 1.5.1.0 & jQuery 1.6.2), nur sollte man noch dazu erwähnen, dass die jQuery-Scripts unbedingt VOR den prototype-Scripts eingebunden werden müssen. Ansonsten kommt es – trotz allem – im IE8 zu Konflikten mit den Events, so dass zwar die jQuery-Scripts funktionieren, aber die prototype-Scripts nicht mehr, z.B. geht die Navigation nicht mehr.
Einfach in page.xml direkt unterhalb von:
und VOR
prototype/prototype.js
die jQuery-Scripts einbinden.
Viele Grüße & danke für diesen Blog-Eintrag
Hi,
sieht schon ganz gut aus. Leider bekomm ich immer die meldung “$.noConflict is not a function”.
Ich habe jQuery 1.6.2.min und meine JQuery Code in der page.xml eingebunden auch mit dem
$.noConflict();
jQuery(document).ready(function($) {
// Hier der eigentliche Jquery-Quellcode
});
ausenrum.
und jquery noch vor prototype.
Kann mir da jemand helfen?
Hi,
der Fehler tritt auf wenn das “$” Symbol verwedet wird. Also müssen wir den Code-Block so ausführen.
jQuery.noConflict();
jQuery(document).ready(function($) {
alert(“Magento”);
});
‘