Добавление jQuery в Magento

Question

Каков рекомендуемый способ добавления jQuery (или любого скрипта) ДО того, как остальные скрипты, поставляемые с Magento, используют local.xml?

Я пытался использовать (в local.xml):

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.6.4.js</script>
    </action>
</reference>

, но это заканчивается добавлением jQuery в конец сценариев, добавленных Magento в page.xml вбазовый пакет.Я даже пытался удалить все сценарии, используя:

<action method="removeItem">
...
</action>

, чтобы удалить все сценарии, которые были добавлены в page.xml, а затем повторно добавить их в local.xml в том порядке, в котором они мне нужныбыть в (сначала jQuery), но каким-то образом они заканчиваются в том же порядке (с последним jQuery).

Я прошел по коду Magento и убедился, что сценарии удаляются, а затем повторно добавляется в $ this -> _ data ['items'] в Mage_Page_Block_Html_Head, но в какой-то момент, когда они добавляютсяна страницу они добавляются с помощью jQuery last.

Я предполагаю, что должен быть более элегантный способ сделать это, но я еще не нашел его в своем поиске по Google.Все, что я нашел, рекомендует напрямую модифицировать page.xml, который я читал в другом месте, не очень хорошая идея.

Answer 1

Мой предпочтительный (и самый гибкий способ) сделать это через XML с использованием local.xml, двух отдельных файлов Javascript и нового файла, который мы создадим. Первый файл Javascript - это сам jQuery - полностью без изменений. Второй файл, который я называю no-conflict.js, содержит только одну строку:

jQuery.noConflict();

Теперь мы добавим оба этих файла вместе с новым блоком в раздел заголовка нашего local.xml:

    <reference name="head">
        <block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/jquery-1.7.2.min.js</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/no-conflict.js</name>
            </action>
        </block>
    </reference>

no-conflict.js необходимо, чтобы позволить jQuery работать вместе с Prototype, структурой Javascript, включенной в Magento по умолчанию. Хранение jQuery и отдельного файла no-conflict позволяет обновлять или понижать версию jQuery по мере необходимости без необходимости редактировать сам файл jQuery, добавляя метод noConflict().

В нашем XML мы создали новый блок (topScripts) с файлом шаблона, установленным на top_scripts.phtml.

Перейдите к /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/ и создайте этот новый файл. Он будет содержать одну строку:

<?php echo $this->getCssJsHtml(); ?>

Теперь редактируйте /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml.

Найдите строку <?php echo $this->getCssJsHtml() ?> в вашем head.phtml и добавьте эту строку прямо над ней:

<?php echo $this->getChildHtml('topScripts') ?>

Теперь у вас правильно добавлен jQuery перед любым другим Javascript Magento.

Answer 2

Лучше всего использовать сеть доставки контента, которая будет лучше по производительности / скорости для вашего сайта.

Я в основном просто открываю template / page / html / head.phtml и прямо перед

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

Я добавляю:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Также убедитесь, что вы запускаете метод jQuery.noConflict () и всегда используете полное имя jQuery вместо $ (знак доллара), чтобы избежать конфликтов с прототипом;)

Answer 3

В качестве альтернативы, и вместо того, чтобы каждый раз вручную редактировать файлы Magento, вы можете просто добавить jQuery, используя это расширение: http://www.intersales.de/shop/magento-magejquery.html

Что вам нужно, так это загрузить указанную вами версию jQuery и автоматически установить все необходимые файлы, а также добавить ссылки на ваш шаблон. В бэкэнде вы можете указать нужную версию, а также активировать настройку без конфликтов.

Answer 4

Вы можете добавить его в свои файлы блоков с помощью $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js'); в методе _prepareLayout()

В одном предупреждении, Magento использует Prototype, поэтому вам нужно убедиться, что вы установили jQuery в другую переменную, отличную отпросто $.Добавление этого на страницу заставило меня работать:

var $j=jQuery.noConflict();

Тогда вы просто используете $j там, где вы обычно используете $