Bagaimana cara menambahkan Jquery di Magento?

Dalam proyek saya saat ini di halaman tentang kami, saya perlu menambahkan tab untuk beralih di antara bagian yang berbeda. Saya tahu ini bisa dilakukan oleh tab Jquery tapi saya tidak tahu bagaimana melakukan ini ketika mengintegrasikan dengan magento.

Dengan asumsi Anda sudah membuat Halaman CMS dan nama halaman itu adalah About Usnama ini harus dimasukkan dalamif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Sekarang tambahkan kode ini di app/design/frontend/your_package/your_theme/template/page/html/head.phtml

<?php $headBlock = $this->getLayout()->getBlock('head');
    if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='About Us'): 
    ?>
    <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">jQuery.noConflict();</script>
    <script type="text/javascript"> jQuery(function() { jQuery( "#tabs" ).tabs(); });</script>
    <?php endif; ?> 

Kemudian buka bagian konten Halaman CMS Anda.

<div style="float: right; width: 200px;">&nbsp;
<p>{{block type="tag/popular" template="tag/popular.phtml"}}</p>
</div>
<div id="tabs" style="width: 680px;">
<ul>
<li><a href="#tabs-1">You text here.</a></li>
<li><a href="#tabs-2">You text here.</a></li>
<li><a href="#tabs-3">You text here.</a></li>
</ul>
<div id="tabs-1">
<p>You text here.</p>
</div>
<div id="tabs-2">
<p>You text here.</p>
</div>
<div id="tabs-3">
<p>You text here.</p>
<p>You text here.</p>
</div>
</div>

rekatkan kode ini dan ini akan membuat tab jquery di frontend Anda. Semoga ini bisa membantu.

di sini adalah tautan referensi jika Anda ragu.

Saya tidak akan menyarankan untuk mengedit head.phtmltemplate Anda untuk ini. Sebagian besar waktu Anda tidak memerlukan templat kepala khusus di tema Anda sendiri karena inti sudah melakukan tugasnya.

Juga secara pribadi saya tidak suka menulis kode yang didasarkan pada pengecualian (jika A maka lakukan ini, jika B maka lakukan ini). Jika Anda memerlukan banyak javascript yang berbeda pada banyak halaman yang berbeda, maka Anda head.phtmlakan dipenuhi dengan banyak pernyataan if.

Saya akan menyarankan untuk menambahkan jQuery melalui layout XML. Dengan halaman CMS Anda memiliki kemampuan untuk menambahkan tata letak tambahan XML di admin saat mengedit halaman. Di sini Anda menemukan contoh pengaturan template yang berbeda dengan halaman tentang kami. Dengan cara yang sama Anda dapat menambahkan jQuery ke halaman tentang kami. Tambahkan tata letak XML ini:

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.x.x.js</script>
    </action>
    <block type="core/text" name="jquery.noconflict">
        <action method="setText">
            <text><![CDATA[<script type="text/javascript">var $j = jQuery.noConflict();</script>]]>
            </text>
        </action>
    </block>
</reference>

Atau hanya menyalin sederhana ke direktori tema Anda, sukai skin\frontend\[your theme]\default\js\dan tambahkan ini ke tema Anda page.xml:

<action method="addItem">
    <type>skin_js</type>
    <script>js/jquery-1.9.1.min.js</script>
</action>

Oke saya telah menemukan cara untuk membuat prototipe, jQuery dan bootstrap berfungsi tanpa mengganggu satu sama lain dan tanpa menggunakan jQuery.noConflict(). Pengaturan tata letak saya ( page.xml) diikuti (dilucuti agar lebih mudah dibaca):

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>

Saya mendapatkan kesalahan seperti berikut:

TypeError: element.attachEvent bukan fungsi

element.attachEvent ("on" + actualEventName, responder);

TypeError: element.dispatchEvent bukan fungsi

element.dispatchEvent (event);

Saya tidak ingin berubah di $mana-mana. Jadi, saya membuat tiga file javascript sebagai berikut:

proto_to_temp.js memiliki kode berikut:

var $tempPrototypeDollar = $;

after_jquery.js memiliki kode berikut:

$ = jQuery;

after_all.js memiliki kode berikut:

$  = $tempPrototypeDollar;

Karena Anda mungkin sudah bisa menebak, skrip pertama memberikan $variabel saat ini (dimiliki oleh prototipe) ke variabel sementara yang disebut $tempPrototypeDollar. Script kedua hanya ditugaskan jQueryuntuk $. Skrip ketiga memberikan konten $tempPrototypeDollarkembali ke $.

Saya memasukkan ketiga skrip ini dalam urutan sebagai berikut:

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all jQuery related code has been included -->
</block>

Ini menyelesaikan semua masalah bagi saya dan sekarang jquery, bootstrap dan prototipe, semua tampaknya berfungsi dengan baik.

Sertakan yang berikut di bagian atas halaman desain

<script>
var $j = jQuery.noConflict();
</script>

Dan gunakan jQuery sebagai $jganti$(Eg:$j('.class').hide();)

PS: Anda bisa menggunakan variabel lain daripada jdi var$j