Добавление CSS и JS в <head> с помощью модуля layout.xml для блока


9

конспект

Я хотел бы добавить блок к моему сгруппированному представлению продукта и моему простому представлению продукта. Этот блок будет иметь несколько хороших всплывающих подсказок для состояний наведения, я использую небольшую библиотеку с одним плагином jquery и одной таблицей стилей CSS.

Я хочу включить эти два ресурса в magento только на этих страницах.

Ноты

  • Я использую собственную тему;
  • Кеширование отключено ; а также
  • Мои файлы находятся внутри /jsкаталога;

Так далеко ...

Тем не менее я знал, что одним из способов является использование layout.xmlв моем модуле, сначала это не сработало, поэтому я подумал, что, может быть, мне нужна дополнительная конфигурация внутри моего устройства, config.xmlчтобы сообщить Magento о моих требованиях к компоновке - это тоже не сработало.

К не работает , что я имею в виду, мои активы не были загружены.

Пожалуйста, найдите прикрепленный источник ниже.


Приложение / код / ​​местные / Vendor / Рейтинг / и т.д. / layout.xml

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </default>
</layout>

Приложение / код / ​​местные / Vendor / Рейтинг / и т.д. / config.xml

<?xml version="1.0"?>
<config>

    ...

    <frontend>
        <layout>
            <updates>
                <vendor_rating>
                    <file>layout.xml</file>
                </vendor_rating>
            </updates>
        </layout>
    </frontend>

    ...

</config>

Ответы:


17

Во-первых, ваш файл макета должен быть помещен в app/design/frontend/{interface}/{theme}/layout/.
Во- вторых. Если вы хотите добавлять файлы css и js только на сгруппированные и простые страницы продукта, не используйте <default>дескриптор макета.
Сделайте ваш макет похожим на это:

<?xml version="1.0"?>
<layout>
    <my_handle><!-- declare a custom handle so you won't duplicate the code -->
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </my_handle>
    <PRODUCT_TYPE_simple><!-- layout handle for simple products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_simple>
    <PRODUCT_TYPE_grouped><!-- layout handle for grouped products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_grouped>
</layout>

Большое спасибо, это имеет большой смысл. Я полагаю, так как мой config.xmlопределяет имя XML-файла макета, я могу назвать это как угодно?
ясень

@Takingsides. Да. Имя может быть как угодно.
Мариус

4

Поскольку на это еще не было указано достаточно ясно:

Справочники

XML-файлы макета для пользовательского модуля должны быть независимыми от темы и, следовательно, помещаться в

app/design/frontend/base/default/layout

Вы можете переопределить любой из этих файлов XML в своей пользовательской теме, но в большинстве случаев лучше иметь дополнительный файл макета для конкретной темы, который добавляет изменения. Больше информации: как правильно изменить подход к шаблону Magento?

Имена файлов

Обратите внимание, что эти файлы иногда называют «файлами layout.xml», но layout.xmlна самом деле это не имя файла, которое вы обычно найдете в любом коде Magento. Ваш код работает, если вы поместите свой layout.xmlфайл в правильное место (см. Выше), но принято использовать имя модуля в нижнем регистре:

rating.xml

или лучше

vendor_rating.xml

Помните, что файлы XML макета из всех модулей находятся в одном каталоге, поэтому имя должно быть уникальным!


1

Ваш layout.xml должен идти внутрь

Приложение / Дизайн / Интерфейс / [ВАШ ТАМОЖЕННЫЙ ПАКЕТ] / [ВАША ТАМОЖЕННАЯ ТЕМА] / макет /


0

Как указано выше для вашего конкретного случая, вы не должны использовать его внутри <default>тегов, но, например, вы можете добавить CSS-файлы, которые находятся в вашем корневом каталоге magento / js, app/design/frontend/vendor/theme/layout/local.xmlнапример, в вашем :

<?xml version="1.0"?>

<layout version="0.1.0">
    <default>
        <reference name="head">
             <action method="addItem">
                <type>js_css</type>
                <stylesheet>css/styles.css</stylesheet>
                <params>media="all"</params>
            </action>
        </reference>
    </default>
</layout>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.