Hinzufügen von jQuery zu Magento

Question

Was ist der empfohlene Weg, um jQuery (oder jedes Skript) VOR dem Rest der Skripte hinzufügen, die mit Magento mit local.xml kommen?

Ich habe versucht, (in local.xml) zu verwenden:

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.6.4.js</script>
    </action>
</reference>

aber dies endet mit dem Hinzufügen von jQuery am Ende der Skripte, die von Magento in page.xml im Basispaket hinzugefügt werden. Ich habe sogar versucht, alle Skripte mit zu entfernen:

<action method="removeItem">
...
</action>

alle in page.xml hinzugefügten Skripte zu entfernen und sie dann in local.xml in der von mir benötigten Reihenfolge wieder einzufügen (jQuery zuerst), aber irgendwie landen sie immer in der gleichen Reihenfolge (mit jQuery zuletzt).

Ich bin durch den Magento-Code gegangen und habe überprüft, dass die Skripte entfernt und dann wieder zu $this->_data['items'] in Mage_Page_Block_Html_Head hinzugefügt werden, aber an einem gewissen Punkt, wenn sie der Seite hinzugefügt werden, werden sie mit jQuery zuletzt hinzugefügt.

Ich vermute, dass es einen eleganteren Weg geben muss, dies zu tun, aber ich habe ihn beim Googeln noch nicht gefunden. Alles, was ich gefunden habe, empfiehlt die direkte Änderung der page.xml, was, wie ich an anderer Stelle gelesen habe, keine gute Idee ist.

Answer 1

Ich bevorzuge (und bin am flexibelsten), dies über XML zu tun. local.xml , zwei separate Javascript-Dateien und eine neue Datei, die wir erstellen werden. Die erste Javascript-Datei ist jQuery selbst - völlig unmodifiziert. Die zweite Datei nenne ich no-conflict.js und sie enthält nur eine Zeile:

jQuery.noConflict();

Nun fügen wir diese beiden Dateien zusammen mit einem neuen Block in den Kopfbereich unserer local.xml :

    <reference name="head">
        <block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/jquery-1.7.2.min.js</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/no-conflict.js</name>
            </action>
        </block>
    </reference>

no-conflict.js ist notwendig, damit jQuery neben Prototype, dem standardmäßig in Magento enthaltenen Javascript-Framework, arbeiten kann. Die Beibehaltung von jQuery und einer no-conflict Datei können Sie jQuery bei Bedarf aktualisieren oder herabstufen, ohne die jQuery-Datei selbst bearbeiten zu müssen, um die noConflict() Methode.

In unserem XML haben wir einen neuen Block ( topScripts ), wobei die Vorlagendatei auf top_scripts.phtml .

Navigieren Sie zu /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/ und erstellen Sie diese neue Datei. Sie wird eine Zeile enthalten:

<?php echo $this->getCssJsHtml(); ?>

Jetzt bearbeiten /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml .

Finden Sie die Linie <?php echo $this->getCssJsHtml() ?> in Ihrem head.phtml und fügen Sie diese Zeile direkt darüber ein:

<?php echo $this->getChildHtml('topScripts') ?>

Sie haben jetzt richtig jQuery vor allen anderen Magento Javascript hinzugefügt.

Answer 2

Am besten ist es, das Content Delivery Network zu verwenden, das eine bessere Leistung/Geschwindigkeit für Ihre Website bietet.

Meistens öffne ich einfach template/page/html/head.phtml und direkt vor

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

Ich füge hinzu:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Stellen Sie außerdem sicher, dass Sie die jQuery.noConflict()-Methode ausführen und immer den vollständigen jQuery-Namen anstelle des $ (Dollarzeichen) verwenden, um Konflikte mit Prototypen zu vermeiden ;)

Answer 3

Sie können sie in Ihren Blockdateien mit $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js'); im _prepareLayout() Methode

Eine Einschränkung, Magento verwendet Prototype, so müssen Sie sicherstellen, dass Sie jQuery auf eine andere Variable als einfach setzen $ . Wenn ich dies der Seite hinzufüge, funktioniert es bei mir:

var $j=jQuery.noConflict();

Dann verwenden Sie einfach $j wo Sie normalerweise $

Answer 4

Als Alternative, und anstatt Magento-Dateien jedes Mal manuell zu bearbeiten, können Sie einfach jQuery mit dieser Erweiterung hinzufügen: http://www.intersales.de/shop/magento-magejquery.html

Es lädt die von Ihnen angegebene jQuery-Version herunter und installiert alle benötigten Dateien automatisch, während es auch die Referenzen zu Ihrer Vorlage hinzufügt. Im Backend können Sie die gewünschte Version angeben und auch die Einstellung "no-conflict" aktivieren.