Magento में Jquery कैसे जोड़ें?

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
स्रोत

— थैंक्यू

3

स्क्रिप्ट और कस्टम टैग को head.phtml फ़ाइल में जोड़ना Magento की सर्वोत्तम प्रथाओं के विरुद्ध है। नए स्क्रिप्ट टैग को लेआउट xml के माध्यम से जोड़ा जाना चाहिए और आप उस पृष्ठ को विशेष रूप से लक्षित करने के लिए हमारे बारे में कस्टम अपडेट हैंडल जोड़ सकते हैं। स्क्रिप्ट टैग को तोड़ दिया जाना चाहिए क्योंकि यह स्वयं के जेवाक्रिप्ट फ़ाइल के साथ ही लेआउट xml के माध्यम से भी आयात किया गया है।

— टायलर क्राफ्ट

7

मैं इसके लिए आपका head.phtmlखाका संपादित करने का सुझाव नहीं दूंगा । ज्यादातर बार आपको अपनी थीम में कस्टम हेड टेम्प्लेट की आवश्यकता नहीं होती है क्योंकि कोर पहले से ही अपना काम कर रहा होता है।

व्यक्तिगत रूप से भी मुझे ऐसा कोड लिखना पसंद नहीं है जो अपवादों पर आधारित हो (यदि ए तो ऐसा करें, यदि बी तो ऐसा करें)। यदि आपको बहुत सारे अलग-अलग पृष्ठों पर बहुत से अलग-अलग javascripts की आवश्यकता होती है, तो आपके head.phtmlबहुत सारे if स्टेटमेंट्स भरे होंगे।

मैं लेआउट XML के माध्यम से jQuery जोड़ने का सुझाव दूंगा। सीएमएस पृष्ठों के साथ आप पृष्ठ को संपादित करते समय व्यवस्थापक में अतिरिक्त लेआउट 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

या आप के लिए सिर्फ सरल प्रतिलिपि विषय dir, जैसे 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 ("पर + वास्तविकईनाम, उत्तरदाता");

TypeError: element.dispatchEvent एक फ़ंक्शन नहीं है

element.dispatchEvent (घटना);

मैं $हर जगह नहीं बदलना चाहता था । इसलिए, मैंने निम्न के रूप में तीन जावास्क्रिप्ट फाइलें बनाईं:

निम्नलिखित कोड वाले 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, बूटस्ट्रैप और प्रोटोटाइप, सभी ठीक काम करने लगते हैं।

— गोगोल
स्रोत

2

डिज़ाइन पृष्ठ के शीर्ष में निम्नलिखित शामिल करें

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

और $jइसके बजाय jQuery का उपयोग करें$(Eg:$j('.class').hide();)

PS: आप jvar के बजाय किसी अन्य चर का उपयोग कर सकते हैं$j

— जितिन यू। अहमद
स्रोत