Как добавить 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
источник

Спасибо, это сработало

— don7

3

Добавление сценариев и пользовательских тегов в файл head.phtml противоречит лучшим рекомендациям Magento. Новые теги сценариев должны быть добавлены с помощью макета XML, и вы можете добавить пользовательские маркеры обновления на страницу о нас, чтобы специально ориентироваться на эту страницу. Теги скрипта также должны быть разбиты на его собственный файл javacript и импортированы через layout xml.

— Тайлер Крафт

7

Я бы не советовал редактировать ваш head.phtmlшаблон для этого. В большинстве случаев вам не нужен специальный шаблон заголовка в вашей собственной теме, потому что основной уже выполняет свою работу.

Также лично мне не нравится писать код, основанный на исключениях (если A, то делай это, если B, то делай это). Если вам нужно много разных javascript-кодов на разных страницах, то вы head.phtmlбудете заполнены множеством операторов if.

Я бы предложил добавить 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 ("on" + actualEventName, responseder);

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 и prototype, похоже, работают нормально.

— Гоголь
источник

2

Включите следующее в верхней части страницы дизайна

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

И использовать JQuery, а $jне$(Eg:$j('.class').hide();)

PS: вы можете использовать любую другую переменную вместо jvar$j

— Джитин У. Ахмед
источник