在变体更改时使用元数据字段值更新 DOM 个元素

Question

使用 Slate 框架。

我知道有很多话题涉及到这个，但我还没有找到任何适合我的话题。

我正在使用 Accentuate 元字段插件来创建自定义元字段。这些确实可以在我的 Liquid 模板中轻松访问；例如：

{% for variant in product.variants %}
  ...
  <p data-variant-ingredients >{{ variant.metafields.product_info.product_ingredients }}</p>
  ...
{% endfor %}

然而，这些变体元字段似乎无法通过后端的 Javascript 访问，并且它阻止我进行 AJAX 调用以通过更新适当的 DOM 元素事件侦听器。

我觉得我已经浪费了几个小时试图解决这个问题但无济于事——也许我只是想得太多了，但我碰壁了。

非常感谢！

编辑：

这里的部分问题是我对渲染位置的误解。尽管如此，我向右滚动过去的所有权利都会对 Shopify documentation:

有所帮助

var content = {{ pages.page-handle.content | json }};

我似乎不太清楚 除了把它变成 "JSON." 之外，它是如何使用的 感谢 Dave，我知道我可以在我的 liquid 文件中的任何地方声明一个 JS 变量，并有效地将它扔到我的主题的 javascript 文件中！

希望这对其他人有帮助！

Answer 1

您需要牢牢掌握 Shopify 术语，在本例中是客户端 JS 与 Liquid 的服务器渲染。

Liquid 在服务器端呈现。因此，元字段也在服务器端呈现。因此，当您渲染 Liquid 时，您可以根据需要渲染它，包括某种形式的 Javascript 数据结构以供客户端使用。答对了！

Javascript 呈现在客户端。因此，如果您将一些 Liquid 数据（服务器端）渲染到一些 Javascript 变量中，您可以愉快地使用 DOM 元素和事件侦听器玩游戏。

示例：来自任何 product.liquid

<script>
   var fumbleDoof = {{ product | json }};
</script>

请注意，此模式与山丘一样古老并且工作顺利，所以希望您的墙现在小得多，并且您可以继续执行更具挑战性的任务！您可以通过访问变量 fumbleDoof 来访问 Javascript 中产品的所有荣耀。元字段等也是如此

在变体更改时使用元数据字段值更新 DOM 个元素

Updating DOM Elements with Metadata Field Values on Variant Change

javascript

liquid

shopify