我可以在 JS 文件中使用液体吗？

Question

我正在使用 Shopify，如果存在特定的产品标签，我需要显示一些消息。我需要从 JS 文件中检查产品标签，并且需要知道我该怎么做。

我尝试在 js 文件中使用 {{product.tags}} 但出现错误，我也在 .js.liquid 文件中尝试过，但仍然抛出错误。

{% assign clearance = false %}
    {% for tag in product.tags %}
            {% if tag contains 'Clearance' %}
                 {% assign clearance = true %}
            {% endif %}
   {% endfor %}

有一种方法可以在 js 中使用它吗？如果没有，如何以js方式获取所有产品标签？我知道我可以从液体文件中做到这一点，但我只能在 js 文件中做到这一点。

Answer 1

.js.liquid 文件将只接受翻译字符串作为 Liquid 中的 var（例如：{{ "my_text" | t }}。

如果您想在 Javascript 代码中使用其他类型的 Liquid 字符串，您可以使用一个部分并将您的 javascript 包含在 {% javascript %} 标记中。

这也适用于 sn-p 或模板。

Answer 2

您可能正在寻找一个名为 jsx 的 Javascript 扩展。

除此之外，您本身拥有template literals，但您只能在其中使用表达式，不能使用循环或其他逻辑（ternary expressions 除外）。

如果您要查找的内容与创建 HTML 无关，而仅与修改变量（或对数据执行其他代码）有关，则可以使用标准 Javascript：

let clearance = false;
for (const tag in product.tags) { // this assumes product.tags is an object
for (const tag of product.tags) { // this assumes product.tags is an array
    if (tag.includes('Clearance') {
        clearance = true;
    }
}