Shopify - использование операторов if в файлах js.liquid и scss.liquid

Question

Я пытаюсь объединить файлы JS вместе в 1 файл, однако мне нужно установить условия, используя инструкции if в файле js.

Я создал файл.js.liquid, но он не работает; Я добавил тест, например:

{% if template contains 'index' %} 
    console.log('homepage loaded'); 
{% endif %} 

пример того, что я пытаюсь сделать, конечно, есть много, что нужно сделать.

{% if settings.the_simpsons_enabled and settings.simpsons_video_enable %} 
    // video popup 
    $(".video-popup").videoPopup(); 
{% endif %} 

Условные операторы также не работает в scss.liquid файлов либо:

{% if template contains 'index' or template contains 'collection' or template contains 'product' %} 
    @import url("{{ 'owl.carousel.scss' | asset_url }}"); 
{% endif %} 

Любые идеи, почему, если бы не работать, или если ее вообще возможно? Я предполагаю, что это жидкий файл.

Answer 1

Расширение Liquid для таких файлов, как CSS или JS, позволяет использовать жидкие переменные, но не инструкции.

Таким образом, {{write_my_liquid_var_here}} будет работать. {% if liquid_statement%} сделать что-то {% endif%} не будет.

Answer 2

Что касается Shopify и SASS

Следующая не будет работать, как вы не можете использовать @import в файлах Shopify в SASS.

@import url("{{ 'owl.carousel.scss' | asset_url }}"); //This will not work 

Что касается использования условных жидких заявлений в .js.liquid файлах

Я не знаю все об этой теме, но я знаю, следующие две вещи.

1) Проверьте this thread, и вы увидите, что этот тип инструкции не будет работать, потому что файлы js анализируются независимо от обычных жидких шаблонов, поэтому он не знал бы, какой шаблон вы просматриваете.

{% if template contains 'index' %} //This will not work 

лучшее место, чтобы поставить выше логика была бы в нижней части theme.liquid файла выше </body> тега. Однако это не поможет вам с тем, что, как представляется, является вашей целью сокращения HTTP-запросов, используя один JavaScript-файл.

2) Тем не менее, вы можете значения доступа в вашем settings_data.json файле

{% if settings.the_simpsons_enabled and settings.simpsons_video_enable %} //This will work 

Я надеюсь, что это помогает