在 Shopify js 文件中获取和使用项目 ID

Question

I am using this code and trying to display some HTML content with append function to a specific class for a specific product that matches their product ID's. 问题是这不起作用，也许我不知道如何正确收集客户正在查看的产品 ID。 现在它要么显示在所有产品上，要么不显示在任何产品上，具体取决于代码。

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

所以我想 append 那个 div 到 header class 为 5473068220572 项目，我该怎么做？

Shopify 问题。

Answer 1

JavaScript 中不易使用液体变量和对象。 您必须在模板文件中初始化它们，然后在 JavaScript 中使用它。 在这种特定场景下，您可以在产品模板中添加以下脚本标签。 将其添加到 product-template.liquid 部分或渲染产品页面时包含的其他文件中。

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

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

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

上面的示例代码在 Debut Shopify 主题上运行良好。