Comment charger un JS spécifique à la fin de tous les autres fichiers JS inclus?

8

J'ai un fichier fancybox.js spécifique que je veux charger à la fin de tous les fichiers JS inclus dans mon local.xml

Si l'ordre de chargement peut être modifié, comment charger un fichier JS (inclus) à la fin?

Merci.

marque
la source

Réponses:

12

Vous pouvez trier l'ordre des fichiers skinou jsdans layout.xml en utilisant l'élément params avec un attribut de nom comme cette réponse explique: -

<action method="addJs"><!-- this will be shown second -->
    <script>prototype/javascript1.js</script>
    <params><![CDATA[name="js002_second"]]></params>
</action>
<action method="addJs"><!-- this will be shown first -->
    <script>prototype/javascript2.js</script>
    <params><![CDATA[name="js001_first"]]></params>
</action>
zigojacko
la source
Sympa ... J'apprends quelque chose de nouveau tous les jours.
Marius
Si je n'ai qu'un seul JS à inclure à la fin de tous les fichiers JS, comment fonctionnera la méthode ci-dessus?
Mark
Essayez de <params><![CDATA[name="zjs_last"]]></params>voir ce qui se passe (je ne suis pas sûr à 100%). Signaler si cela ne le charge pas après tous les autres.
zigojacko
Non, ça ne fonctionne pas d'une manière ou d'une autre .. :(
Mark
@Mark - Hmm, d'accord, je suppose que chaque appel js nécessitera un élément params avec l'attribut name ou vous pouvez essayer de le modifier pour pouvoir inclure un ordre de tri ou n'est-il pas possible de placer simplement l'appel j fancybox après tous les autres ?
zigojacko
2

Je ne pense pas que vous puissiez spécifier un ordre de tri pour les fichiers js que vous ajoutez (apparemment, vous pouvez voir la réponse fournie par @zigojacko), mais je pense que vous pouvez le faire un peu différemment, achetez en ajoutant un bloc enfant au headbloc.
Tous les enfants du headbloc sont rendus après les éléments js et css.

Voici ce dont vous avez besoin.

Ajoutez-le à l'un de vos fichiers de mise en page.

<reference name="head">
    <block type="core/template" name="fancy" as="fancy" template="fancybox/fancybox.phtml" />
</reference>

Créez ensuite le fichier app/design/frontend/{package}/{theme}/template/fancybox/fancybox.phtmlavec le contenu suivant.

<script type="text/javascript" src="<?php echo Mage::getBaseUrl('js').'/fancybox.js'?>"></script>
Marius
la source
1

Je sais que cette question est ancienne, mais voici un moyen simple de commander vos fichiers de ressources à l'aide d'un simple module personnalisé (testé):

créer

app/etc/modules/Company_ReorderAssets.xml

et insérer:

 <?xml version="1.0"?>

 <config>

     <modules>

         <Company_ReorderAssets>

             <active>true</active>

             <codePool>local</codePool>

         </Company_ReorderAssets>

     </modules>

 </config>

créer app/code/local/Company/ReorderAssets/etc/config.xmlet insérer:

<?xml version="1.0"?>

 <config>

     <modules>

         <Company_ReorderAssets>

             <version>1.0.0</version>

         </Company_ReorderAssets>

     </modules>

     <global>

         <blocks>

             <class>Company_ReorderAssets_Block</class>

             <page>

                 <rewrite>

                     <html_head>Company_ReorderAssets_Block_Page_Html_Head</html_head>

                 </rewrite>

             </page>          

         </blocks>

     </global>

 </config>

créer ReorderAssets/Block/Page/Html/Head.phpet insérer:

<?php



 class Company_ReorderAssets_Block_Page_Html_Head extends Mage_Page_Block_Html_Head {



    public function addItemFirst($type, $name, $params = null, $if = null, $cond = null) {



        if ($type === 'skin_css' && empty($params)) {

            $params = 'media="all"';

        }



        $firstElement = array();

        $firstElement[$type . '/' . $name] = array(

            'type' => $type,

            'name' => $name,

            'params' => $params,

            'if' => $if,

            'cond' => $cond,

        );



        $this->_data['items'] = array_merge($firstElement, $this->_data['items']);



        return $this;



    }



    public function addItemAfter($after, $type, $name, $params = null, $if = null, $cond = null) {



        if ($type === 'skin_css' && empty($params)) {

            $params = 'media="all"';

        }



        $firstElement = array();

        $firstElement[$type . '/' . $name] = array(

            'type' => $type,

            'name' => $name,

            'params' => $params,

            'if' => $if,

            'cond' => $cond,

        );



        if (array_key_exists($after, $this->_data['items'])){



            $pos = 1;

            foreach ($this->_data['items'] as $key => $options){

                if ($key == $after) :

                    break;

                endif;

                $pos +=1;

            }



            array_splice($this->_data['items'], $pos, 0, $firstElement);



        }



        return $this;



    }
 }

Ici, nous créons nos fonctions addItemFirstet addItemAfterqui peuvent être utilisées comme ceci (à l'intérieur de n'importe quel layout.xml).

Exemple de layout.xml:

 <?xml version="1.0"?>

 <layout version="0.1.0">

    <default>

         <reference name="head">

            <action method="addItemFirst"><type>skin_js</type><script>js/jquery.js</script></action>

            <action method="addItemAfter">

                <after>skin_js/js/jquery.js</after>

                <type>skin_js</type>

                <script>custom_folder/javascript.js</script>

            </action>

            <action method="addItemAfter">

                <after>skin_js/js/jquery.js</after>

                <type>skin_js</type>

                <script>custom_folder/another_javascript.js</script>

            </action>

         </reference>

    </default>

 </layout>

Veuillez noter les skin_js à l'intérieur de votre chemin.

Un merci spécial à Koncz Szabolcs.

Claudiu Creanga
la source