Wie lade ich ein bestimmtes JS am Ende aller anderen enthaltenen JS-Dateien?

Ich habe eine bestimmte Fancybox.js-Datei, die ich am Ende aller in meiner local.xml enthaltenen JS-Dateien laden möchte

Wenn die Ladereihenfolge geändert werden kann, wie kann dann am Ende eine JS-Datei geladen (enthalten) werden?

Vielen Dank.

layout theme

— Kennzeichen
quelle

Antworten:

Sie können die Reihenfolge skinoder jsDateien in layout.xml sortieren, indem Sie das params-Element mit einem Namensattribut verwenden, wie in dieser Antwort erläutert: -

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

Schön ... ich lerne jeden Tag etwas Neues.

— Marius

Wenn ich nur ein JS am Ende aller JS-Dateien habe, wie funktioniert dann die obige Methode?

— Mark

Versuchen Sie zu <params><![CDATA[name="zjs_last"]]></params>sehen, was passiert (ich bin nicht 100% sicher). Melden Sie sich zurück, wenn dies nicht nach allen anderen geladen wird.

— Zigojacko

Nein, es funktioniert irgendwie nicht .. :(

— Mark

@Mark - Hmm, okay, ich vermute, jeder js-Aufruf erfordert ein params-Element mit dem Namensattribut, oder Sie können versuchen, ihn so zu ändern , dass Sie eine Sortierreihenfolge einfügen können, oder es ist nicht möglich, den Fancybox-js-Aufruf einfach nach allen anderen zu platzieren ?

— Zigojacko

~~Ich denke nicht, dass Sie eine Sortierreihenfolge für die von Ihnen hinzugefügten js-Dateien angeben können~~ (anscheinend können Sie die Antwort von @zigojacko sehen), aber ich denke, Sie können es ein bisschen anders machen, indem Sie dem headBlock einen untergeordneten Block hinzufügen .
Alle headuntergeordneten Elemente des Blocks werden nach den Elementen js und css gerendert.

Hier ist was Sie brauchen.

Fügen Sie dies einer Ihrer Layoutdateien hinzu.

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

Erstellen Sie dann die Datei app/design/frontend/{package}/{theme}/template/fancybox/fancybox.phtmlmit dem folgenden Inhalt.

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

— Marius
quelle

Ich weiß, dass diese Frage alt ist, aber hier ist eine einfache Möglichkeit, Ihre Assets-Dateien mit einem einfachen benutzerdefinierten Modul (getestet) zu bestellen:

erstellen

app/etc/modules/Company_ReorderAssets.xml

und einfügen:

 <?xml version="1.0"?>

 <config>

     <modules>

         <Company_ReorderAssets>

             <active>true</active>

             <codePool>local</codePool>

         </Company_ReorderAssets>

     </modules>

 </config>

erstellen app/code/local/Company/ReorderAssets/etc/config.xmlund einfügen:

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

erstellen ReorderAssets/Block/Page/Html/Head.phpund einfügen:

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



    }
 }

Hier erstellen wir unsere Funktionen addItemFirstund addItemAfterdiese können so verwendet werden (in jeder layout.xml).

Beispiel für 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>

Bitte beachten Sie die skin_js in Ihrem Pfad.

Besonderer Dank geht an Koncz Szabolcs.

— Claudiu Creanga
quelle