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

Question

我正在使用此代码并尝试显示一些 HTML 内容，并为与其产品 ID 匹配的特定产品的特定 class 附加功能。问题是这不起作用，也许我不知道如何正确收集客户正在查看的产品 ID。现在它要么显示在所有产品上，要么显示在 none 个产品上，具体取决于代码。

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

所以我想将 div 附加到 header class 以获取 5473068220572 项，我该怎么做？

Shopify 问题。

Answer 1

液体变量和对象在 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");
      } 
    });

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

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

Getting and using item id in Shopify js file

html

javascript

jquery

shopify