Apakah ada cara untuk menambahkan JS / CSS ke halaman footer?

Saya memiliki persyaratan khusus untuk menambahkan JS dan CSS tertentu yang terkait dengan catatan kaki situs web . Apakah ada cara di Magento yang dapat saya tambahkan di bagian footer ?

The footerblok tidak menawarkan dukungan untuk js langsung, seperti kepala.

Tetapi ada sebuah blok dengan nama before_body_endtempat Anda dapat menambahkan semua yang Anda inginkan dengan template atau blok teks.

Saya akan berpikir tentang template Anda sendiri dan jenis blok Mage_Page_Block_Html_Head, maka Anda dapat menggunakan apa yang direkomendasikan oleh @Dexter.

Tidak, Anda memerlukan sesuatu seperti ini, Anda tidak memiliki blok halaman / html_head untuk merujuk juga:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

Dan di dalam template Anda, Anda perlu:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

Bagian header dan footer dirender oleh modul Page di magento. Untuk melihat templat header dan footer, buka

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

Lihatlah file-file lain di folder halaman juga. Di sana Anda dapat melihat header.phtmlbagian header render dari setiap halaman. head.phtmlgunakan untuk menambahkan file js dan css yang berlaku untuk setiap halaman di magento.

Lihat juga file di folder halaman. File-file itu akan membuat untuk setiap halaman sesuai dengan spesifikasi tata letak halaman tertentu.

Buat penelitian serius pada modul ini. Ini akan banyak membantu Anda.

sunting

Anda dapat menambahkan css dan js Anda melalui page.xml. Saya pikir itu akan menyelesaikan masalah Anda. Pergi ke

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

dan tambahkan potongan kode ini di dalamnya defeault handle. (Anda dapat melihat banyak file js dan css ditambahkan di pegangan ini. Cukup tambahkan kode ini di bawah kode-kode itu)

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

Itu dia. Sekarang pastikan file js dan css kustom Anda ada di lokasi

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

Semoga berhasil untuk pekerjaan Anda.

Gunakan XML untuk itu. Untuk menambahkan Js di footer, panggil referensi footer. Kode akan terlihat seperti ini

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

Untuk menambahkan JS di folder skin Anda dapat menggunakan kode berikut

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

Untuk menambahkan css Anda dapat menggunakan kode xml berikut

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

atau Anda juga bisa menggunakan

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>

Untuk javascript, sudahkah Anda mempertimbangkan untuk menggunakan onload atau $ (dokumen) jquery .ready ()?

Itu akan memungkinkan Anda untuk menempatkan kode Anda di header seperti pengaturan khas, tetapi tidak menjalankannya sampai konten yang direferensikan oleh js Anda dimuat.

Kode js filename.js Anda akan terlihat seperti:

$(document).ready( function(){
   your custom js here
});

Kode untuk tata letak Anda akan terlihat seperti: (Anda jelas perlu menambahkan direktori yang sesuai saat Anda mengaturnya.)

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>
</reference>

Ya ada satu cara tetapi Anda harus menambahkan melalui kode seperti di bawah ini tambahkan kode ini di bagian bawah file 1column.phtml sesaat sebelum akhir <body>tag.

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>

Saya sangat merekomendasikan modul halamanpeed mediarox untuk membantu Anda mengoptimalkan javascript (dan css) Anda dan meningkatkan peringkat wawasan halamanpeed google.

Ia bekerja dengan mem-parsing output html oleh Magento dan kemudian melakukan tindakan cut dan paste pada kode untuk memindahkan javascript ke bagian bawah kode html. Prosesnya cepat tetapi paling baik digunakan bersamaan dengan cache halaman penuh untuk menyimpan perubahan html.

Informasi lebih lanjut tentang cara kerja modul ini dan dapat membantu Anda meningkatkan peringkat kecepatan halaman di sini:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/