Reorder Magento JavaScript inclus (addJs)

Je garderai cela simple … sur mes pages de produit, je dois supprimer le fichier prototype.js et le remplacer par la dernière version du prototype. Jusqu'à présent, using local.xml, je l'ai remplacé avec succès à l'aide de ceci:

<action method="removeItem"><type>js</type><name>prototype/prototype.js</name></action> <action method="addJs"><script>prototype/prototype-new.js</script></action>

La question est que maintenant, le prototype est chargé sous tout ce qui comprend d'autres qui l'arrête de fonctionner.

Existe-t-il un moyen de définir l'ordre d'un JavaScript, en utilisant local.xml sans devoir supprimer et ajouter à chaque fichier?

Vous pouvez utiliser l'élément params, avec l'attribut HTML "groupe de données", Magento mettra des éléments avec "params" définis après tout élément sans jeu "params". Vous pouvez utiliser local.xml dans votre thème pour assurer l'ordre de ces éléments (je recommande de laisser Magento ajouter ses fichiers standard en premier):

 <action method="addJs"> <script>prototype/javascript0.js</script> <params><![CDATA[data-group="js002"]]></params> <!-- creates first group js002 --> </action> <action method="addJs"> <script>prototype/javascript1.js</script> <params><![CDATA[data-group="js002"]]></params> <!-- appends to created group js002, after javascript0 --> </action> <action method="addJs"> <script>prototype/javascript2.js</script> <params><![CDATA[data-group="js001"]]></params> <!-- creates first group js001 --> </action> <action method="addJs"> <script>prototype/javascript3.js</script> <params><![CDATA[data-group="js001"]]></params> <!-- appends to created group js001, after javascript2 --> </action> <action method="addJs"> <script>prototype/javascript4.js</script> <params><![CDATA[data-group="js002"]]></params> <!-- appends to created group js002, after javascript1 --> </action> <action method="addJs"> <script>prototype/javascript5.js</script> <!-- no params supplied, will be rendered before any groups --> </action>

L'ordre dans lequel les éléments avec l'ensemble "params" est rendu uniquement déterminé par l'ordre dans lequel les actions sont exécutées. Les éléments sont regroupés par la valeur de "params", donc une fois que le groupe "js001" est défini par la première action (javascript2.js), les actions successives avec le même nom de groupe ajouteront à ce groupe, etc.

Dans l'exemple ci-dessus, l'ordre de rendu sera:

Prototype / javascript5.js (pas de params, vient en premier)
Prototype / javascript0.js (premier groupe de params créé "js002")
Prototype / javascript1.js (premier groupe de params créé "js002")
Prototype / javascript4.js (premier groupe de params créé "js002")
Prototype / javascript2.js (deuxième groupe de params créé "js001")
Prototype / javascript3.js (deuxième groupe de params créé "js001")

Les éléments ajoutés à l'aide de AddJtem AddJs, addCss, etc., sont répartis de la même manière, mais ils diffèrent (et seront super-groupés en conséquence) par type (voir ordre ci-dessous), chaque groupe dans les super-groupes commandés en interne comme expliqué ci-dessus:

Js
Skin_js
Js_css
Skin_css

Mage_Page_Block_Html_Head $ _data; Contient le tableau de ces articles, donc je suppose que vous pouvez le filtrer pour votre propre bien. Les méthodes par défaut ne permettent pas de définir l'ordre des éléments ajoutés.

Je me rends compte que cette publication est assez ancienne, mais je suis tombée sur elle tout en recherchant ce problème, alors j'ai compris pourquoi pas.

Je ne sais pas si c'est la solution la plus élégante, mais ça fonctionne assez bien pour nous.

J'ai fondamentalement créé un nouveau bloc dans mon local.xml comme ceci: <block type="core/template" name="prehead" template="page/html/prehead/main.phtml" />

Ensuite, j'ai simplement modifié mes mises en page principales (1column.phtml et les amis) pour contenir ceci: <head> <?php echo $this->getBlockHtml('prehead') ?> <?php echo $this->getChildHtml('head') ?> </head>

Dans main.phtml j'ajoute mon JS que je veux charger en premier

<script type='text/javascript' src='<?php echo $this->getSkinUrl('js/require.js', array('_secure'=>true)); ?>'></script> <script type='text/javascript' src='<?php echo $this->getSkinUrl('js/main.js', array('_secure'=>true)); ?>'></script>

Cela nous convient aussi, car il nous permet encore de modifier le main.js en fonction de la page sur laquelle nous sommes en faisant quelque chose comme ça dans local.xml :

<checkout_onestep_index translate="label"> <label>One Step Checkout</label> <block type="core/template" name="prehead" template="page/html/prehead/checkout.phtml" /> </checkout_onestep_index>

J'espère que cela aide quelqu'un qui se heurte à cela.

-Ken

Puisque local.xml est enfin chargé par le système magento, le xml mentionné est fusionné enfin. C'est peut-être la raison pour laquelle votre nouveau prototype est chargé sous d'autres scripts.

Sinon, vous pouvez remplacer la méthode Mage_Page_Block_Html_Head :: getCssJsHtml () et jouer avec elle.

Merci

Ok, voici ma solution. Première copie de l'application \ code \ core \ Mage \ Page \ Block \ Html \ head.php vers l'application \ code \ local \ Mage \ Page \ Block \ Html \ head.php

Ensuite, ajoutez cette fonction au fichier:

 public function replaceItem($type, $name, $replace) { $newArray = array(); foreach($this->_data['items'] as $key => $value) { if($key == $type.'/'.$name) { $newArray[$type . '/'. $replace] = array( 'type' => $type, 'name' => $replace, 'params' => $value['params'], 'if' => $value['if'], 'cond' => $value['cond']); } else { $newArray[$key] = $value; } } $this->_data['items'] = $newArray; return $this; }

Maintenant, dans votre fichier de mise en page .XML, vous trouverez une ligne comme celle-ci:

 <action method="replaceItem"><type>js</type><name>prototype/prototype.js</name><replace>onestepcheckout/prototype/prototype.js</replace></action>

Les paramètres sont exactement comme pour removeItem MAIS maintenant, le fichier de remplacement sera injecté dans la liste au même endroit que le fichier d'origine. Il héritera également le même paramètre, si et cond. Veuillez utiliser ce code avec soin car je viens d'écrire et de faire des tests de base!

Je pense que la solution de Barny Shergold est la plus correcte, mais le commentaire sur l'évitement de changer les fichiers de base est correct. Pour avoir le meilleur des deux mondes, vous pouvez implémenter la solution de Barny dans un module qui étend la classe Mage_Page_Block_Html_Head comme suit:

Yourcompany / Layouthelper / etc / config.xml

 <?xml version="1.0"?> <config> <modules> <Yourcompany_Layouthelper> <version>0.0.1</version> </Yourcompany_Layouthelper> </modules> <global> <blocks> <page> <rewrite> <html_head>Yourcompany_Layouthelper_Block_Html_Head</html_head> </rewrite> </page> </blocks> </global> </config>

Yourcompany / Layouthelper / Block / Html / Head.php

 class Yourcompany_Layouthelper_Block_Html_Head extends Mage_Page_Block_Html_Head { public function replaceItem($type, $name, $replace) { $newArray = array(); foreach($this->_data['items'] as $key => $value) { if($key == $type.'/'.$name) { $newArray[$type . '/'. $replace] = array( 'type' => $type, 'name' => $replace, 'params' => $value['params'], 'if' => $value['if'], 'cond' => $value['cond']); } else { $newArray[$key] = $value; } } $this->_data['items'] = $newArray; return $this; } }

Jquery conflit avec Prototype dans magento:

La solution la plus simple est d'ajouter à la fin de votre fichier jquery principal.

 jQuery.noConflict();

Ou créez votre fichier js personnalisé et ajoutez cette ligne et incluez également ce fichier après les js principaux.