Question

使用Slate框架。

我知道有很多话题涉及这个但我还没有找到任何对我有用的东西。

我使用Accentuate metafields插件来创建自定义的元数据域。这些确实可以在我的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 }};

我似乎并不清楚如何使用除了将其变成＆＃34; JSON。＆＃34; 感谢Dave，我知道我可以在我的液体文件中的任何地方声明一个JS变量，并且有效地将其变为可以在我的主题的javascript文件中访问！

希望这有助于其他人下线！

Answer 1

你需要牢牢掌握Shopify术语，在这种情况下客户端JS与Liquid的服务器渲染。

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

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

示例：来自任何product.liquid

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

请注意，此图案与山丘一样古老，并且可以使用桃子，所以希望您的墙壁现在要小得多，您可以继续进行更具挑战性的任务！您可以通过访问变量fumbleDoof来访问Javascript中产品的所有荣耀。同样适用于元场等等。

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

1 个答案: