de-Novembre

Merubah Catalog Magento Menjadi semiAccordion Menu

Posted on: January 20, 2010

Sebelumnya mohon maaf apabila hasil modifikasi masih kurang memuaskan, apabila ada pertanyaan, kritik dan saran yang lebih baik lagi hal ini sangat penulis harapkan.

Apabila Anda bosan dengan sistem menu Catalog pada Magento yang seperti itu saja atau masih standard, dan mempunyai keinginan untuk merubahnya atau mencoba gaya baru. Anda bisa merujuk pada tutorial ini.

Sebelumnya perlu Anda ketahui bahwa Magento sistem tidak secara automatis mendukung javascript jQuery. Permasalahan ini telah dibahas pada tutorial sebelumnya yaitu, Integrasi jQuery pada Magento

Langkah-langkah :

  1. Proses modifikasi dimulai pada “top.phtml” yang terdapat pada {magento_path}/app/design/frontend/default/default/template/catalog/category/navigation/top.phtml
  2. Tambahkan script berikut:
    <script type=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery(‘li.parent > a’).attr(‘href’, ‘javascript:void(0);’);
    //colapse all the submenus at the first load
    jQuery(‘ul#nav-disable ul’).hide(‘fast’);
    //expand the active submenus
    jQuery(‘li.active > ul’).show(‘slow’);
    //expand on click for the parent menu/submenu
    jQuery(‘li.parent’).click(function(){
    //select the child of the selected parent menu/submenu class
    var sGet = jQuery(this).attr(‘class’).split(‘ ‘);
    //expand the child of the selected parent menu/submenu
    jQuery(‘.’+sGet[1]+’ > ul’).show(‘fast’);
    });
    });
    </script>
  3. Langkah selanjutnya Anda bisa berkonsultasi dengan designer web tentang penempatan pada website ini.

Setelah mengikuti langkah-langkah diatas, sebenernya ada tiga bagian penting (dalam design / css / js) yang harus diketahui dari sistem parentheses Catalog strukture Magento yaitu : .parent, .active dan .last. Dengan mengetahui 3 bagian tersebut, Anda bisa memulai untuk mempelajari sifat-sifat dan karakteristik masing-masing identifier, dan selanjutnya Anda bisa custom sistem Anda sendiri.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: