de-Novembre

Integrasi jQuery pada Magento

Posted on: January 20, 2010

Bagi Anda developer website terutama magento ini mungkin sedikit mengalami kesulitan dalam pengembangan sistem yang custom. Bagi pemula di Magento dan terutama memiliki keterbatasa pengetahuan terhadap library javascript Magento, yang notabene berbasis scriptaculous yang bersanding dengan prototype javascript framework ini. Namun Anda bisa beralih ke javascript framework lain yaitu jQuery yang lebih mudah.

Silahkan lakukan integrasi antara jQuery d an Magento, dengan melakukan tahapan langkah sebagai berikut:

Installasi jQuery di Magento

  1. Versi terakhir magento, entah mengapa dikeluarkan dengan versi script.aculo.us effects. Download versi terakhir effects.js (1.8.2 right juga bagus). Jangan ambil resiko dulu, rename saja file tersebut sesuai dengan versinya effects-1.8.1.js (tanpa me-replace file effects sebelumnya) yang rendah / versi terdahulu. Sehingga inilah kesalahan dimana jQuery tidak dapat berintegrasi dengan baik pada magento.
  2. Upload/simpan file effects yang baru saja kita download tersebut di [Magento]/js/scriptaculous

  3. Sekarang bukalah file page.xml yang bertempat di [Magento]/app/design/frontend/default/default/layout/page.xml (disini tempat magento me-load semua javascript library, kita akan mengubah load file effects js yang lama dengan yang baru)
  4. pada sekitar line ke 40 terdapat script serupa berikut:

    <action method="addJs">
    <script>
    scriptaculous/effects.js
    </script>
    </action>
    
    atau cari saja menggunakan find/search words, menjadi:
    
    <action method="addJs">
    <script>
    scriptaculous/effects-1.8.1.js
    </script>
    </action>
    
    
  5. Sekarang download jquery klik disini
    
    
  6. Upload/simpan di [Magento]/js/jquery/jquery-1.2.6.noConflict.minified.js
    
    
  7. Buka file tersebut dan masukan code ini di baris paling bawah “jQuery.noConflict();”

  8. Load file javascript jQuery tersebut pada [Magento]/app/design/frontend/default/default/layout/page.xml

  9. <action method="addJs">
    <script>
    jquery/
    jquery-1.2.6.noConflict.minified.js
    </script>
    </action>

  10. Sekarang dimanapun Anda bisa memanggil syntax jQuery, contoh:
    <script type=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery(‘body’).hide(‘slow’);
    jQuery(‘body’).show(‘slow’);
    });
    </script>

  11. Dalam kasus ini kita mengganti kebiasaan jQuery yang terbiasa menggunakan “$” menjadi “jQuery” contoh:”$(document)” menjadi “jQuery(document)”
–Selamat Mencoba–
Advertisements

6 Responses to "Integrasi jQuery pada Magento"

[…] 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 […]

[…] 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 […]

[…] 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 […]

bukannya frameworknya pke zend?

ya betul sekali, ini framework php zend dikawinkan dengan framework javascript scriptaculous. nah pada kesempatan ini menerangkan tentang pengkawinan dengan jquery. barangkali begitu, semoga tidak puas 😀

[…] 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 […]

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

Categories

Advertisements
%d bloggers like this: