Добавление пользовательских 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 :)