Добавление пользовательских CSS и JS в Shopify

Я работаю над получением вертикальных вкладок для страницы на Shopify, используя тему "Атлантика". Поскольку эта тема по умолчанию не имеет вертикальных вкладок, я использовал внешние JS и CSS "jQuery-jvert-tabs".

мой вопрос в том, если я загружаю файлы JS и CSS в качестве активов, как связать их со страницей, на которой я хочу их использовать, и как использовать их на странице после этого, если у меня есть определенные элементы стиля, доступные там тоже?

18
css html javascript jquery shopify

3 ответов

загрузите на активы.

затем поместите следующее в свой theme.liquid глава:

{{ 'filename.js' | asset_url | script_tag }}

кстати, вы должны переименуйте файл и добавьте .жидкое расширение

filename.js.liquid

удачи!

23

Если я правильно понял, то фильтр asset_url это то, что вы ищете.

включить файл JS в a .жидкий файл, вы используете:

{{ 'script.js' | asset_url | script_tag }}

и файл CSS:

{{ 'style.css' | asset_url | stylesheet_tag }}
25

Если вы не хотите загрязнять глобальное пространство имен, вы можете ограничить JavaScript или CSS определенными областями.

Shopify использует простой оператор if вместе с дескриптором страницы для этого(для www.foo.com/abcd/bar - " бар " был бы ручкой).

{% if page.handle == "bar" %}
    {{ 'your_custom_javascript.js' | asset_url | script_tag }}
    {{ 'your_custom_css.css' | asset_url | stylesheet_tag }}
{% endif %}

Это чрезвычайно полезно, если вы хотите внести небольшие изменения в определенные страницы.

3