Bagaimana cara memuat JS tertentu di akhir semua file JS lainnya yang disertakan?

Saya memiliki file fancybox.js tertentu yang ingin saya muat di akhir semua file JS yang termasuk dalam local.xml saya

Jika urutan pemuatan dapat diubah, lalu bagaimana cara file JS dimuat (termasuk) di bagian akhir?

Terima kasih.

layout theme

— Menandai
sumber

Jawaban:

Anda dapat mengurutkan urutan skinatau jsfile di layout.xml dengan menggunakan elemen params dengan atribut nama seperti jawaban ini menjelaskan: -

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

Bagus ... Saya belajar sesuatu yang baru setiap hari.

— Marius

Jika saya hanya memiliki satu JS untuk dimasukkan di akhir semua file JS maka bagaimana metode di atas akan bekerja?

— Tandai

Coba <params><![CDATA[name="zjs_last"]]></params>dan lihat apa yang terjadi (saya tidak 100% yakin). Laporkan kembali jika itu tidak memuat setelah semua yang lain.

— zigojacko

Tidak ada yang entah bagaimana tidak berfungsi .. :(

— Mark

@ Mark - Hmm, oke, saya kira setiap panggilan js akan membutuhkan elemen params dengan atribut nama atau Anda bisa mencoba memodifikasi sehingga Anda dapat memasukkan urutan pengurutan atau apakah tidak mungkin untuk hanya menempatkan panggilan jbox fancybox setelah semua yang lain ?

— zigojacko

~~Saya tidak berpikir Anda dapat menentukan urutan pengurutan untuk file js yang Anda tambahkan~~ (tampaknya Anda dapat melihat jawaban yang diberikan oleh @zigojacko), tetapi saya pikir Anda dapat melakukannya sedikit berbeda, membeli menambahkan blok anak ke headblok.
Semua anak-anak headblok diberikan setelah elemen js dan css.

Inilah yang Anda butuhkan.

Tambahkan ini ke salah satu file tata letak Anda.

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

Kemudian buat file app/design/frontend/{package}/{theme}/template/fancybox/fancybox.phtmldengan konten berikut.

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

— Marius
sumber

Saya tahu pertanyaan ini sudah lama, tetapi di sini adalah cara sederhana untuk memesan file aset Anda menggunakan modul kustom sederhana (diuji):

membuat

app/etc/modules/Company_ReorderAssets.xml

dan masukkan:

 <?xml version="1.0"?>

 <config>

     <modules>

         <Company_ReorderAssets>

             <active>true</active>

             <codePool>local</codePool>

         </Company_ReorderAssets>

     </modules>

 </config>

buat app/code/local/Company/ReorderAssets/etc/config.xmldan masukkan:

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

buat ReorderAssets/Block/Page/Html/Head.phpdan masukkan:

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



    }
 }

Di sini kita membuat fungsi kita addItemFirstdan addItemAfteritu bisa digunakan seperti ini (di dalam sembarang layout.xml).

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

Harap perhatikan skin_js di dalam jalur Anda.

Terima kasih khusus kepada Koncz Szabolcs.

— Claudiu Creanga
sumber