Javascript 获取和使用Shopify js文件中的项目id

我正在使用这段代码，并尝试使用append函数将一些HTML内容显示到与产品ID匹配的特定产品的特定类中。问题是这不起作用，可能我不知道如何正确收集客户正在查看的产品ID。现在它要么显示在所有产品上，要么不显示在任何产品上，具体取决于代码

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

$（函数（）{
如果（meta.product.id==='5473068220572'{
$（“.header”）.append（'Testing'）；
}
});

所以我想把那个div附加到5473068220572项的header类中，我该怎么做呢

---

Shopify问题。

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

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

---

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

那么，哪些元素具有类

标题

？问题在于（meta.product.id=='5473068220572'）部分，我不知道应该将哪个变量与我指定的id进行比较。显然，“meta.product.id”不起作用。我们怎么知道？您可以使用console.log（）来验证meta.product.id的值。如果那不是存储值的地方，我们需要更多信息。什么是

meta

？它来自哪里？它的结构是什么？为什么您希望product.id值在该对象中？这更接近我需要的值，尽管我仍然很挣扎，因为它给了我错误，并且没有附加想要的东西。这是错误消息，这是我当前使用的代码：```$（document.ready（function（）{if（{{product.id}}}==5473068220572）{console.log（“id matched”）；$（.header”）.append（'Test'）；}）```更新了代码。我不知道你在使用什么主题，你在哪里包含了代码。此错误与未加载jQuery有关。逐步解决问题，而不是只关注最终目标。看起来像是“document.addEventListener”（“DOMContentLoaded”），function（event）{”的更新版本有效！！！谢谢

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