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没有任何意义。

将液体标签插入js文件

2 个答案: