ম্যাজেন্টোতে জ্যাকারি কীভাবে যুক্ত করবেন?

10

আমাদের সম্পর্কে পৃষ্ঠাতে আমার বর্তমান প্রকল্পে আমার বিভিন্ন বিভাগের মধ্যে স্যুইচ করতে ট্যাব যুক্ত করতে হবে আমি জানি জ্যাকারি ট্যাব এটি করতে পারে তবে ম্যাজেন্টোর সাথে সংহত করার সময় আমি কীভাবে এটি করব তা জানি না।

magento-1.9 magento-1 jquery

— don7
সূত্র

2

ধরে নিলাম আপনি ইতিমধ্যে একটি সিএমএস পৃষ্ঠা তৈরি করেছেন এবং সেই পৃষ্ঠার 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; ?>

তারপরে আপনার সিএমএস পৃষ্ঠার সামগ্রী বিভাগ খুলুন।

<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 ট্যাব তৈরি করবে ope এটি সাহায্য করে ope

আপনার যদি সন্দেহ থাকে তবে এখানে একটি রেফারেন্স লিঙ্ক।

— dh47
সূত্র

— থ্যাঙ্কিও আপনি

3

Head.phtml ফাইলে স্ক্রিপ্ট এবং কাস্টম ট্যাগ যুক্ত করা ম্যাজেন্টোর সেরা অনুশীলনের বিরুদ্ধে। নতুন স্ক্রিপ্ট ট্যাগগুলি লেআউট এক্সএমএল এর মাধ্যমে যুক্ত করা উচিত এবং সেই পৃষ্ঠাটি নির্দিষ্ট করে লক্ষ্য করতে আপনি আমাদের সম্পর্কে পৃষ্ঠায় কাস্টম আপডেট হ্যান্ডলগুলি যুক্ত করতে পারেন। স্ক্রিপ্ট ট্যাগগুলি নিজের জাভাক্রিপ ফাইলের মধ্যে বিচ্ছিন্ন করা উচিত এবং পাশাপাশি লেআউট এক্সএমএল এর মাধ্যমে আমদানি করা উচিত।

— টাইলার ক্রাফট

7

আমি head.phtmlএটির জন্য আপনার টেম্পলেটটি সম্পাদনা করার পরামর্শ দেব না । বেশিরভাগ সময় আপনার নিজের থিমে কাস্টম হেড টেম্পলেট প্রয়োজন হয় না কারণ মূলটি ইতিমধ্যে এটির কাজ করছে।

এছাড়াও ব্যক্তিগতভাবে আমি ব্যতিক্রমগুলির উপর ভিত্তি করে কোডটি লিখতে পছন্দ করি না (যদি A হয় তবে এটি করুন, বি যদি তা করে থাকে)। আপনার যদি প্রচুর বিভিন্ন পৃষ্ঠায় বিভিন্ন জাভাস্ক্রিপ্টের প্রয়োজন হয় তবে আপনার head.phtmlবিবৃতি যদি প্রচুর পরিপূর্ণ হয়।

আমি XML বিন্যাসের মাধ্যমে jQuery যুক্ত করার পরামর্শ দেব। সিএমএস পৃষ্ঠাগুলির সাহায্যে পৃষ্ঠা সম্পাদনা করার সময় অ্যাডমিনে অতিরিক্ত লেআউট এক্সএমএল যুক্ত করার ক্ষমতা আপনার রয়েছে। এখানে আপনি আমাদের সম্পর্কে পৃষ্ঠায় একটি ভিন্ন টেম্পলেট সেট করার একটি উদাহরণ খুঁজে পান। একইভাবে আপনি আমাদের সম্পর্কে পৃষ্ঠাতে jQuery যুক্ত করতে পারেন। এই লেআউটটি এক্সএমএল যুক্ত করুন:

<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: तत्व.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

— জিতিন ইউ আহমেদ
সূত্র