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

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

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

Ответ 1

Просто загрузите файл filename.js в папку assets.

затем отбросьте следующее в разделе theme.liquid head:

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

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

filename.js.liquid

Удачи!

Ответ 2

Если я правильно понимаю, фильтр_активности - это то, что вы ищете.

Чтобы включить JS файл в .liquid файл, вы используете:

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

И файл CSS:

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

Ответ 3

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

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

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

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

Ответ 4

Да, вы должны использовать какой-то язык программирования Liquid :( правильная мрачность. Не было бы неплохо, если бы вы могли использовать PHP :)