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.