Magento menambahkan CSS dan JS termasuk ke footer


15

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?



1
Memberikan kesalahan yang Anda terima saat mencoba melihat situs setelah pertukaran Anda mungkin membantu orang menjawab pertanyaan Anda.
Alan Storm

3
Selain memindahkan JS ke footer, saya cukup yakin Anda tidak ingin memindahkan CSS ke footer. Itu harus di <head>.
pspahn

Checkout @sonassi menautkan ke pos lama saya. Salah satu solusinya benar dan berfungsi, tetapi perlu diketahui bahwa Anda mendapatkan beberapa file JS gabungan saat Anda mengaktifkan penggabungan. Ini tampaknya terjadi jika Anda memasukkan JS menggunakan pegangan yang berbeda juga.
Mark Weston

CSS di kaki. Yuck pada tampilan halaman ... Dan JS harus dilakukan hanya untuk eksternal termasuk yang dapat memblokir tampilan halaman. Apa pun yang disajikan dari server Anda harus ada di kepala. Kerangka kerjanya, kerangka kerja banyak digunakan dalam perakitan halaman dan harus ada sebelum halaman mulai di-render. Sebagian besar rekomendasi diikuti secara membabi buta tanpa memahami (pemujaan kargo) mengapa Anda merusak.
Fiasco Labs

Jawaban:


7

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/


2
Kesalahan OP sangat mungkin disebabkan oleh pemuatan yang tidak sesuai pesanan - sebagian besar skrip inline memerlukan prototipe et al. Jika Anda hanya memuat ini di footer, sudah terlambat. Menghapus inline JS akan menjadi langkah pertama. Banyak pekerjaan - semoga berhasil.
Kristof di Fooman

4

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.


2

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!


Metode yang jauh lebih sederhana daripada yang di atas untuk menambahkan skrip js sebelum tag penutup tubuh
asherrard
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.