将液体标签插入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 }}";但它仍然只是将{{ product.variants.first.sku }}粘贴到 html 中，而不是加载 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 是没有意义的。