Вставьте метку жидкости в файл 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.