Shopify - 在 js.liquid 和 scss.liquid 文件中使用 if 语句

Question

我正在尝试将 JS 文件合并到一个文件中，但是我需要使用 js 文件中的 if 语句来设置条件。

我创建了 file.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

像 CSS 或 JS 这样的文件上的 Liquid 扩展允许使用 Liquid 变量，但不允许使用语句。

所以 {{ write_my_liquid_var_here }} 会起作用。 {% if liquid_statement %}do something{% endif %} 不会。

Answer 2

关于 Shopify 和 SASS

以下内容不起作用，因为您不能在 Shopify 的 SASS 文件中使用 @import。

@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

放置上述逻辑的更好位置是在</body> 标记上方的theme.liquid 文件底部。然而，这并不能帮助您实现通过使用一个 JavaScript 文件来减少 HTTP 请求的目标。

2) 但是，您可以访问 settings_data.json 文件中的值

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

希望对你有帮助