จะเพิ่ม Jquery ใน Magento ได้อย่างไร?

10

ในโครงการปัจจุบันของฉันในหน้าเกี่ยวกับเราฉันต้องเพิ่มแท็บเพื่อสลับระหว่างส่วนต่าง ๆ ฉันรู้ว่าสิ่งนี้สามารถทำได้โดยแท็บ Jquery แต่ฉันไม่รู้วิธีการทำเช่นนี้เมื่อรวมกับวีโอไอพี

magento-1.9 magento-1 jquery

— don7
แหล่งที่มา

2

สมมติว่าคุณได้สร้างหน้า CMS แล้วและชื่อของหน้านั้นคือAbout Usชื่อนี้ควรรวมอยู่ในif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

ตอนนี้เพิ่มรหัสนี้ในของคุณ 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; ?>

จากนั้นเปิดส่วนเนื้อหาของหน้า CMS ของคุณ

<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>

วางรหัสนี้และจะสร้างแท็บ jquery ในส่วนหน้าของคุณหวังว่านี่จะช่วยได้

นี่คือลิงค์อ้างอิงหากคุณมีข้อสงสัย

— dh47
แหล่งที่มา

ขอบคุณที่ใช้งานได้

— don7

3

การเพิ่มสคริปต์และแท็กที่กำหนดเองลงในไฟล์ head.phtml ขัดต่อแนวทางปฏิบัติที่ดีที่สุดของ Magento ควรเพิ่มแท็กสคริปต์ใหม่ผ่าน layout xml และคุณสามารถเพิ่มตัวจัดการการอัปเดตที่กำหนดเองไปยังหน้าเกี่ยวกับเราเพื่อกำหนดเป้าหมายหน้านั้นโดยเฉพาะ แท็กสคริปต์ควรแบ่งออกเป็นไฟล์ javacript ของตัวเองเช่นกันและนำเข้าผ่าน layout xml เช่นกัน

— Tyler Craft

7

ฉันจะไม่แนะนำให้แก้ไขhead.phtmlเทมเพลตของคุณสำหรับสิ่งนี้ เวลาส่วนใหญ่คุณไม่ต้องการเทมเพลตหัวแบบกำหนดเองในธีมของคุณเองเนื่องจากแกนหลักทำงานอยู่แล้ว

โดยส่วนตัวแล้วฉันไม่ชอบเขียนโค้ดที่มีพื้นฐานมาจากข้อยกเว้น (ถ้า A จากนั้นทำเช่นนี้ถ้า B แล้วทำสิ่งนี้) หากคุณต้องการจาวาสคริปต์ที่แตกต่างกันจำนวนมากในหน้าต่าง ๆ มากมายคุณhead.phtmlจะได้รับการเติมเต็มหากมีคำสั่งมากมาย

ฉันแนะนำให้เพิ่ม jQuery ผ่านโครงร่าง XML ด้วยเพจ CMS คุณสามารถเพิ่ม XML เลย์เอาต์พิเศษในผู้ดูแลระบบเมื่อแก้ไขเพจ ที่นี่คุณจะพบตัวอย่างการตั้งค่าเทมเพลตที่แตกต่างให้กับหน้าเกี่ยวกับเรา ในทำนองเดียวกันคุณสามารถเพิ่ม jQuery ลงในหน้าเกี่ยวกับเรา เพิ่ม XML โครงร่างนี้:

<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
แหล่งที่มา

4

หรือเพียงคัดลอกชุดรูปแบบที่คุณต้องการเช่นเดียวกับskin\frontend\[your theme]\default\js\และเพิ่มลงในธีมของคุณpage.xml:

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

— user956584
แหล่งที่มา

3

เอาล่ะฉันได้พบวิธีที่จะทำให้ต้นแบบ jQuery และบูตทำงานโดยไม่รบกวนกับแต่ละอื่น ๆ jQuery.noConflict()และโดยไม่ต้องใช้ การตั้งค่ารูปแบบของฉัน ( page.xml) กำลังติดตาม (ถอดเพื่อความสะดวกในการอ่าน)

<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>

ฉันได้รับข้อผิดพลาดดังนี้:

TypeError: element.attachEvent ไม่ใช่ฟังก์ชัน

element.attachEvent ("บน" + actualEventName, Responder);

TypeError: element.dispatchEvent ไม่ใช่ฟังก์ชัน

element.dispatchEvent (event);

ฉันไม่ต้องการเปลี่ยนแปลง$ทุกที่ ดังนั้นฉันสร้างไฟล์จาวาสคริปต์สามไฟล์ดังนี้:

proto_to_temp.jsมีรหัสต่อไปนี้:

var $tempPrototypeDollar = $;

after_jquery.jsมีรหัสต่อไปนี้:

$ = jQuery;

after_all.jsมีรหัสต่อไปนี้:

$  = $tempPrototypeDollar;

ในขณะที่คุณอาจจะสามารถคาดเดาแล้วสคริปต์แรกกำหนดปัจจุบัน$ตัวแปร (เจ้าของต้นแบบ) $tempPrototypeDollarให้กับตัวแปรชั่วคราวเรียกว่า สคริปต์ที่สองเพียงแค่กำหนดที่จะjQuery $สคริปต์ที่สามกำหนดเนื้อหาของกลับไป$tempPrototypeDollar$

ฉันรวมสคริปต์ทั้งสามนี้ตามลำดับต่อไปนี้:

<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>

ทั้งหมดนี้แก้ไขปัญหาสำหรับฉันและตอนนี้ jQuery, bootstrap และ prototype ทั้งหมดดูเหมือนจะทำงานได้ดี

— โกกอล
แหล่งที่มา

2

รวมสิ่งต่อไปนี้ไว้ในส่วนบนของหน้าการออกแบบ

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

และใช้ jQuery $jแทน$(Eg:$j('.class').hide();)

PS: คุณสามารถใช้ตัวแปรอื่น ๆ แทนjใน var$j

— Jithin U. Ahmed
แหล่งที่มา