在Shopify js文件中获取和使用商品ID

问题描述

我正在使用此代码，并尝试将具有附加功能的某些HTML内容显示给与产品ID匹配的特定产品的特定类。问题是这不起作用，也许我不知道如何正确收集客户正在查看的产品ID。现在，根据代码，它要么显示在所有产品上，要么不显示在所有产品上。

$(function () {
if (Meta.product.id === '5473068220572'){ 
$(".header").append('<div class="option-values">Testing</div>');
}
});

所以我想将该div附加到5473068220572项目的标头类中，我该怎么做？

Shopify问题。

解决方法

液体变量和对象在JavaScript中不可用。您必须在模板文件中对其进行初始化，然后在JavaScript中使用它。在这种特定情况下，您可以在产品模板中添加以下脚本标记。将其添加到product-template.liquid部分或呈现“产品”页面时包含的其他文件中。

{% unless product == empty %}
  <script>
    const productInfo = {{ product | json }};
  </script>
{% endunless %}

然后在您的JavaScript文件中，检查变量是否存在并且ID匹配，然后附加内容。

document.addEventListener("DOMContentLoaded",function(event) {
      if(productInfo && productInfo.id === 123){
        console.log("Id matched");
        $(".product-single__title").append("Added Content");
      } 
    });

上面的示例代码在首次亮相Shopify主题上工作正常。