L'ajout de jQuery pour Magento

Quelle est la méthode recommandée pour ajouter jQuery (ou un script) AVANT que le reste des scripts qui viennent avec Magento à l'aide de local.xml?

J'ai essayé de l'utiliser (en local.xml):

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

mais cela finit par l'ajout de jQuery à la fin des scripts qui sont ajoutés par Magento dans page.xml dans le package de base. J'ai même essayé de supprimer tous les scripts à l'aide de:

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

pour supprimer tous les scripts qui ont été ajoutés dans page.xml et puis de rajouter dans local.xml dans l'ordre j'ai besoin d'eux pour être (jQuery premier), mais de toute façon, ils se retrouvent dans le même ordre (avec jQuery dernier).

J'ai franchi la Magento code et de vérifier que les scripts sont arriver supprimé puis réinstallé dans $this->_data['items'] dans Mage_Page_Block_Html_Head, mais à un certain point, quand ils sont ajoutés à la page, ils sont ajoutés avec jQuery dernier.

Je devine qu'il y a une façon plus élégante de le faire, mais je n'ai pas encore trouver dans ma recherche sur Google. Tout ce que j'ai trouvé recommande la modification de page.xml directement, j'ai lu d'ailleurs n'est pas une bonne idée.

InformationsquelleAutor Luke | 2011-09-29
  1. 9

    Le mieux est d'utiliser le réseau de diffusion de contenu qui sera de mieux en performance/vitesse pour votre site web.

    J'ai surtout il suffit d'ouvrir template/page/html/tête.phtml et à droite avant de 

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

    - Je ajouter:

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

    Aussi assurez-vous d'exécuter le jQuery.noConflict() la méthode et de toujours utiliser la totalité de jQuery nom au lieu de l' $ (signe dollar) pour éviter les conflits avec prototype 😉

    • Cela a très bien fonctionné! Merci. Une seule modification est que le http: est absent depuis le début de l'attribut src. Ne me laisse pas modifier parce que mon montage n'était pas > 6 caractères.
    • Super 😉 , c'est à cause de mod_pagespeed, désolé pour ça. Mise à jour de ma réponse.
    InformationsquelleAutor Kenny
  2. 15

    Mon préféré (et de la manière la plus souple) de le faire est par le biais de XML à l'aide de local.xml, deux fichiers Javascript, et un nouveau fichier que nous allons créer. Le premier fichier Javascript jQuery est lui-même--complètement modifiée. Le second fichier que j'appelle no-conflict.js et il ne contient qu'une seule ligne:

    jQuery.noConflict();

    Maintenant, nous ajoutons ces deux dossiers, avec un nouveau bloc, à la tête de la section de notre 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 est nécessaire pour permettre jQuery pour travailler aux côtés de Prototype, le framework Javascript inclus dans Magento par défaut. Maintien de jQuery et un no-conflict fichier séparé vous permet d'augmenter ou de réduire jQuery en tant que de besoin, sans la nécessité de modifier le fichier jQuery de façon à inclure le noConflict() méthode.

    Dans notre XML, nous avons créé un nouveau bloc (topScripts) avec le fichier de modèle défini à top_scripts.phtml.

    Accédez à /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/ et de la création de ce nouveau fichier. Il contient une ligne:

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

    Maintenant modifier /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml.

    Trouver la ligne <?php echo $this->getCssJsHtml() ?> dans votre head.phtml et ajoutez cette ligne directement au-dessus d'elle:

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

    Vous avez maintenant correctement ajouté jQuery avant toute autre Magento Javascript.

    • Créative! C'est maintenant mon nouveau préféré, aussi bien de façon!
    • Bien que cela fonctionne, il n'est pas de répondre à la question de savoir comment inclure Jquery avant le reste des scripts.
    • Edité pour ajouter jQuery AVANT tous les autres Magento Javascripts!
    • Cela peut être modulaire de sorte qu'il met jQuery en place, sans même avoir besoin de faire une édition de local.xml si vous le prenez à sa conclusion logique. Aussi +1 pour faire le noconflict en tant que fichier séparé. Je méprise toutes les instructions qui vous disent d'ajouter votre noconflict ligne à la fin de la bibliothèque jQuery. Plus tard, quelqu'un fait une bibliothèque jQuery mise à jour et l'ensemble de prototype/jQuery incompatibilité dresse sa tête hideuse et des grèves de votre site de commerce électronique, de la surface de la terre.
    • Si vous faites référence à la méthode de la accepté de répondre alors que vous êtes correct et l'édition local.xml est inutile. Cependant, avec cette solution, vous êtes coincé avec jQuery sur chaque page et pas de moyen efficace de l'exclusion, si cela devient nécessaire. Le point de l'utilisation de la structure de bloc et le XML est d'ajouter de la flexibilité. Le compromis est une mineure de la complexité, mais il n'a rien d'un novice ne peut pas saisir.
    • Juste essayé et il a entraîné dans les fichiers inclus deux fois..en haut de l'en-tête comme qu'elle est censée être, mais aussi le bas de la tête à la suite de tous les autres fichiers JS.
    • Votre thème doit déjà être configuré pour ajouter jQuery dans le pied de page. Vous aurez besoin de comprendre d'où il de faire cela et de supprimer l'un des doubles comprend.

    InformationsquelleAutor cfx
  3. 1

    Vous pouvez l'ajouter à votre bloc de fichiers avec $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js'); dans le _prepareLayout() méthode

    Une mise en garde, Magento utilise Prototype, de sorte que vous aurez besoin, vérifiez que vous avez défini de jQuery pour une autre variable autres que simplement $. En ajoutant ceci à la page de le faire fonctionner pour moi:

    var $j=jQuery.noConflict();

    Alors il suffit d'utiliser $j où vous utilisez normalement $

    • Ne pas ajouter cela à la _prepareLayout() la méthode nécessitent la modification des fichiers de base? Ou est-il un moyen de remplacer les fichiers de base de l'intérieur de mon thème?
    • Si vous essayez d'étendre les fonctionnalités, plutôt que de créer votre propre, prendre un coup d'oeil à prattski.com/2010/06/24/... et prattski.com/2010/06/24/.... Si vous créez votre propre thème, vous pouvez toujours juste l'ajouter dans le <head>
    InformationsquelleAutor jprofitt
  4. 1

    Comme une alternative, et au lieu de modifier manuellement Magento fichiers à chaque fois, vous pouvez simplement ajouter jQuery à l'aide de cette extension: http://www.intersales.de/shop/magento-magejquery.html

    Ce qu'il fait pour vous est de télécharger la version jQuery, vous définissez et installer tous les fichiers automatiquement, tout en ajoutant également les références de votre modèle. Dans le backend, vous pouvez spécifier la version désirée et aussi activer le non-conflit.

    InformationsquelleAutor user3346811