¿Cómo cargar un JS específico al final de todos los demás archivos JS incluidos?


8

Tengo un archivo fancybox.js específico que quiero cargar al final de todos los archivos JS incluidos en mi local.xml

Si se puede cambiar el orden de carga, ¿cómo se puede cargar un archivo JS (incluido) al final?

Gracias.

Respuestas:


12

Puede ordenar el orden skino los jsarchivos en layout.xml utilizando el elemento params con un atributo de nombre como esta respuesta explica:

<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>

Bien ... aprendo algo nuevo todos los días.
Marius

Si solo tengo que incluir un JS al final de todos los archivos JS, ¿cómo funcionará el método anterior?
Marcar el

Intenta <params><![CDATA[name="zjs_last"]]></params>ver qué sucede (no estoy 100% seguro). Informe si eso no lo carga después de todos los demás.
zigojacko

No, no está funcionando de alguna manera .. :(
Marque el

@ Mark - Hmm, está bien, supongo que cada llamada js requerirá un elemento params con atributo de nombre o podrías intentar modificar para que puedas incluir un orden de clasificación o no es posible simplemente colocar la llamada js de fancybox después de todas las demás ?
zigojacko

2

No creo que pueda especificar un orden de clasificación para los archivos js que agrega (aparentemente puede ver la respuesta proporcionada por @zigojacko), pero creo que puede hacerlo de manera un poco diferente, compre agregando un bloque secundario al headbloque.
Todos los elementos secundarios del headbloque se representan después de los elementos js y css.

Esto es lo que necesita.

Agregue esto a uno de sus archivos de diseño.

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

Luego cree el archivo app/design/frontend/{package}/{theme}/template/fancybox/fancybox.phtmlcon el siguiente contenido.

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

1

Sé que esta pregunta es antigua, pero aquí hay una manera simple de ordenar sus archivos de activos utilizando un módulo personalizado simple (probado):

crear

app/etc/modules/Company_ReorderAssets.xml

e inserte:

 <?xml version="1.0"?>

 <config>

     <modules>

         <Company_ReorderAssets>

             <active>true</active>

             <codePool>local</codePool>

         </Company_ReorderAssets>

     </modules>

 </config>

crear app/code/local/Company/ReorderAssets/etc/config.xmle insertar:

<?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>

crear ReorderAssets/Block/Page/Html/Head.phpe insertar:

<?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;



    }
 }

Aquí creamos nuestras funciones addItemFirsty addItemAftereso se puede usar de esta manera (dentro de cualquier layout.xml).

Ejemplo 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>

Tenga en cuenta los skin_js dentro de su ruta.

Un agradecimiento especial a Koncz Szabolcs.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.