Bagaimana cara menambahkan Jquery di Magento?

10

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.

magento-1.9 magento-1 jquery

— don7
sumber

2

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.

— Dh47
sumber

terima kasih ini berhasil

— don7

3

Menambahkan skrip dan tag khusus ke file head.phtml bertentangan dengan praktik terbaik Magento. Tag skrip baru harus ditambahkan melalui tata letak xml dan Anda dapat menambahkan pegangan pembaruan khusus ke halaman tentang kami untuk menargetkan halaman itu secara khusus. Tag skrip harus dipecah menjadi file javacript itu sendiri juga dan diimpor melalui tata letak xml juga.

— Tyler Craft

7

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>

— 7ochem
sumber

4

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>

— pengguna956584
sumber

3

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.

— Gogol
sumber

2

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

— Jithin U. Ahmed
sumber