Magento menambahkan CSS dan JS termasuk ke footer

Saya sedang melakukan beberapa optimasi Yslow dari situs Magento saya dan saya mencoba untuk menambahkan CSS dan Js ke footer situs.

Saat ini saya menggunakan tag referensi kepala dalam tata letak XML dan menggunakan addJsdan addCsstindakan untuk memasukkan semua file saya. Saya mencoba menukar referensi kepala ke footer, tetapi diberi kesalahan ketika saya mencoba melihat situs tersebut. Apakah ada cara untuk melakukan ini di local.xml atau apakah ini harus dilakukan dengan hardcoded di file template footer itu sendiri?

Saya tahu ini bukan jawaban untuk pertanyaan Anda tetapi sesuatu yang mungkin ingin Anda pertimbangkan.

Magento menggunakan javascript inline yang cukup banyak, terutama pada halaman detail produk. Karena javascript tergantung pada skrip eksternal yang dimuat dalam header, Anda juga perlu memindahkan semua skrip inline ke file eksternal dan menambahkannya di footer.

Anda mungkin lebih cepat dan lebih baik dengan mengompresi CSS dan JS dengan alat yang ada di Magento dan menggunakan kompresi gzip dan header kedaluwarsa yang jauh untuk mempercepatnya. Dengan cara itu 'lag' yang disebabkan oleh javascript dan CSS akan dijaga seminimal mungkin tanpa perlu mengubah Magento default dan tata letak ekstensi pihak ke-3. Dengan cara ini, saat Anda meningkatkan Magento atau ekstensi, Anda tidak perlu mengulang semua pekerjaan.

.Htaccess yang disediakan oleh proyek boilerplate HTML5 memberikan kompresi gzip ini dan tajuk kedaluwarsa yang jauh, Silakan periksa http://inchoo.net/ecommerce/magento/magento-boilerplate/

Langkah pertama adalah membuat blok yang disebut "kaki" yang pada dasarnya sama dengan "kepala" tetapi Anda akan menampilkannya di tempat yang berbeda. Anda dapat menambahkan ini ke page.xml:

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

Sekarang Anda dapat menambahkan JS / CSS (meskipun CSS di footer tidak disarankan) menggunakan perintah ini di salah satu file XML Anda:

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

Di dalam page/html/foot.phtml:

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

Di file templat halaman Anda (mis. page/1column.phtml) Anda harus menampilkan blok ini sebelum tag body penutup:

    <?php echo $this->getChildHtml('foot') ?>

Jika Anda menggunakan templat Magento default, Anda akan mendapatkan kesalahan JS. Ambil bentuk pencarian mini misalnya ( catalogsearch/form.mini.phtml). Ini memiliki skrip inline ini:

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

Ini akan dipanggil segera setelah dimuat, karena tidak ada dalam penangan siap dokumen apa pun. Varien belum ada karena ada di footer, jadi Anda mendapatkan kesalahan. Anda bisa memperbaikinya dengan menambahkan penangan siap dokumen atau dengan memindahkan semua JS inline seperti ini ke file eksternal yang juga dimuat di footer. Masalah seperti ini akan terjadi di seluruh situs, terutama di kasir dan halaman produk yang dapat dikonfigurasi.

Masalah lain yang mungkin Anda temui adalah jika Anda menggunakan jQuery bersama Prototipe dalam mode noConflict. Anda harus memastikan jQuery dimuat sebelum Prototipe sehingga tidak ada konflik yang terjadi.

Untuk Magento v1.6 + (perlu menguji di versi yang lebih lama);

1 - buat file templat page/html/footer/extras.phtmldengan konten ini:

<?php echo $this->getCssJsHtml() ?>

2 - Tambahkan simpul html ini ke tata letak Anda xml:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - Itu dia!