Blog

Magento – Menggunakan jQuery di Magento


Secara default Magento menggunakan Prototype untuk library javascriptnya. Namun terkadang kita membutuhkan beberapa hal yang sulit untuk dilakukan prototype, maka kita disini akan mencoba untuk menginstall dan menggunakan jQuery sebagai library tambahan. Oh, ya sempat beberapa waktu lalu ada yang memberi tahu saya bahwa kedepannya magento tidak akan menggunakan prototype lagi dan akan bermigrasi total ke jQuery.

1. Download jQuery kemudian simpan di js -> jQuery -> filejQuery.js
2. Buka file app/design/frontend/default/template_custom/layout/local.xml

<?xml version="1.0" encoding="UTF-8"?>
<layout>
	<default>
		<reference name="head">
			<action method="addJs"><script>jquery/filejQuery.js</script></action>
		</reference>
	</default>
</layout>
 

3. Masuk ke backend, pilih CMS, add new CMS
4. Buat jQuery toggle sederhana seperti berikut :
html :

<p class="trigger"><a>Click here</a>
</p><div class="toggle_container">
<div class="block">
<ul>
<li>List item 01</li>
<li>List item 02</li>
<li>List item 03</li>
<li>List item 04</li>
</ul></div>
</div>
 

jQuery :

<script type="text/javascript">
 jQuery.noConflict();
 jQuery(document).ready(function(){
	jQuery(".toggle_container").hide();
	 jQuery("p.trigger").click(function(){
	 jQuery(this).toggleClass("active").next().toggle();
	});
});
</script>

5. Lihat hasilnya pada frontend sesuai link CMS page anda. Selesai
6. Semoga membantu 😀