Як додати Jquery в Magento?

10

У моєму поточному проекті на сторінці про нас мені потрібно додати вкладки для перемикання між різними розділами. Я знаю, що це можна зробити за допомогою вкладок Jquery, але я не знаю, як це зробити при інтеграції з magento.

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, і ви можете додати спеціальні ручки оновлення на сторінку about us, щоб спеціально націлити цю сторінку. Теги сценарію також повинні бути розбиті на власний файл javacript, а також імпортуватися через макет xml.

— Тайлерське ремесло

7

Я б не радив редагувати ваш head.phtmlшаблон для цього. У більшості випадків вам не потрібен спеціальний шаблон голови у вашій власній темі, тому що основний вже робить свою роботу.

Також особисто мені не подобається писати код, який базується на винятках (якщо A, то це робити, якщо B, то це робити). Якщо вам потрібно багато різних Java-скриптів на безлічі різних сторінок, то ваші дані 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>

— 7очем
джерело

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>

— користувач956584
джерело

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 ("увімкнено" + currentEventName, відповідь);

TypeError: element.dispatchEvent не є функцією

element.dispatchEvent (подія);

Я не хотів $всюди змінюватися . Отже, я зробив три файли javascript таким чином:

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 та прототип, схоже, добре працюють.

— Гоголя
джерело

2

Додайте наступне у верхній частині сторінки дизайну

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

І використовувати jQuery як $jзамість$(Eg:$j('.class').hide();)

PS: Ви можете використовувати будь-яку іншу змінну замість jvar$j

— Джитін У. Ахмед
джерело