Verwendung von jQuery in Magento

Bei der Arbeit entwickeln wir eine Website für einen Kunden mit der Magento eCommerce-Software. Das ist das erste Mal, dass ich sie benutze, und ich finde sie ziemlich fantastisch (und sie ist kostenlos!). Es gibt vieles, was daran gefällt, worüber wir wahrscheinlich ein anderes Mal sprechen werden, aber sie verwendet Prototype für eine JavaScript-Bibliothek. Nun, ich bin sicher, Prototype ist wunderbar und alles, aber ich verstehe kein Wort davon. Ich würde lieber die Bibliothek verwenden, die ich kenne und liebe, jQuery. Aber Prototype und jQuery vertragen sich bekanntermaßen nicht. So geht man damit um.

1. Die neueste Version von Magento kommt mit einer etwas veralteten Version der script.aculo.us effects-Datei, was Teil des Problems ist. Holen Sie sich die neueste Version (derzeit 1.8.2). Sie möchten sie vielleicht mit der Versionsnummer am Ende umbenennen, wieeffects-1.8.1.js
2. Laden Sie die Datei unter [Magento]/js/scriptaculous hoch
3. Öffnen Sie die Dateipage.xmlunter [Magento]/app/design/frontend/default/default/layout/page.xml
4. Auf etwa Zeile 41 befindet sich eine Zeile wie diese

   <action method="addJs"><script>scriptaculous/effects.js</script></action>

   Ändern Sie den Dateinamen auf Ihre neue Datei

5. Die Layout-Dateien sind normalerweise gecacht, daher müssen Sie diesen Cache löschen, um die Auswirkung zu sehen. Melden Sie sich im Backend an und gehen Sie zu System > Cache-Management
6. Wählen Sie im Menü "Alle Caches" "aktualisieren" und speichern Sie (was Ihren Cache löschen sollte)
7. Laden Sie eine Store-Seite neu und zeigen Sie den Quellcode an, um sicherzustellen, dass Ihre neue Datei diejenige ist, die geladen wird
8. Jetzt müssen Sie jQuery auf Ihrer Seite einbinden. Sie könnten eine neue Zeile zur Datei page.xml hinzufügen oder Sie könnten die gemeinsame head.phtml-Datei unter [Magento]/app/design/frontend/default/default/template/page/html/head.phtml öffnen – und Ihr <script> für jQuery dort hinzufügen
9. Der letzte Schritt ist sicherzustellen, dass jQuery im .noConflict();-Modus läuft. Das ist der letzte Schritt, um sicherzustellen, dass es gut mit Prototype zusammenarbeitet
10. Nun müssen Sie noConflict einstellen und Code in diesem Modus schreiben. Im Grunde ersetzen Sie das normale "$" durch eine neue Kurzform ($j in diesem Fall).

    var $j = jQuery.noConflict(); 
    
    $j(document).ready(function(){
        $j("#test").css("padding","10px");
    });

Hinweis: Ich habe diese Lösung nicht erfunden, ich wollte nur Informationen konsolidieren, die ich bei der Recherche gefunden habe. Hauptsächlich stammten sie aus dem Wiki und diesem Thread, die Sie für weitere Informationen heranziehen können.