将液体标签插入js文件

Question

我正在尝试将{{ product.variants.first.sku }}添加到js文件中，函数如下

function buildPrice(data, onSale, priceVaries) {
  var priceHtml = '',
    onSaleClass = onSale ? ' price--on-sale' : '';
  var productSku = "{{ product.variants.first.sku }}";
  priceHtml += '<dl class="price' + onSaleClass + '" data-price>';
  priceHtml += '<div class="price__vendor">';
  priceHtml += '<dt>';
  priceHtml += '<span class="visually-hidden">' + bcSfFilterConfig.label.vendor + '</span>';
  priceHtml += '</dt>';
  priceHtml += '<dd>';
  priceHtml += data.vendor;
  priceHtml += '</dd>';
  priceHtml += '</div>';
  priceHtml += '<div class="product__sku">';
  priceHtml += '<dd>';
  priceHtml += productSku;
  priceHtml += '</dd>';
  priceHtml += '</div>';
  priceHtml += '<div class="price__regular card-price">';
  priceHtml += '<dt>';
  priceHtml += '<span class="visually-hidden visually-hidden--inline">' + bcSfFilterConfig.label.regular_price + '</span>';
  priceHtml += '</dt>';
  priceHtml += '<dd>';
  priceHtml += '<span class="price-item price-item--regular" data-regular-price>';

如您所见，我尝试使用var productSku = "{{ product.variants.first.sku }}"; 但它仍然只是在html中粘贴{{ product.variants.first.sku }}而不是加载sku编号。

如何让它呈现液体插入而不是仅仅粘贴可见html中的代码？

非常感谢任何帮助！

Answer 1

你没有在你的样本中展示出任何非常动态的东西 - 那里没有任何东西可以用一段液体来完成。

然而，我将shopify的信息与javascript混合的方式如下：

pricesnippet.liquid

<script>
var myObj = {
product: {{product |json}},
startingVariant : {{product.selected_or_first_available_variant | json }}
};

// now do something with product:
(function(){
    myObj.product....

})();
</script>

接着

{% include 'pricesnippet' %}在你需要的液体中。

Answer 2

我认为你不需要json滤镜。

product.variants.first.sku 

这是一个价值。 将它过滤为json是没有意义的。