代码之家 › 专栏 › 技术社区 › heyron

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

liquid shopify javascript

heyron · 技术社区 · 7 年前

使用Slate框架。

我知道有相当多的话题涉及到这一点,但我还没有找到任何似乎对我有用的东西。

我正在使用强调元字段插件创建自定义的元字段。这些确实很容易在我的液体模板中访问;例如:

{% 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文件中访问!

希望这对其他人有所帮助!

1 回复 | 直到 7 年前

David Lazar 7 年前

您需要牢牢掌握Shopify术语,在这种情况下,客户端JS与服务器呈现Liquid的对比。

液体是提供服务器端。因此,元字段也在服务器端呈现。因此,当您渲染液体时,可以根据需要进行渲染,包括将其渲染到某种形式的Javascript数据结构中,以供客户端使用。答对了

Javascript呈现在客户端。因此,如果您将一些流动数据(服务器端)渲染到一些Javascript变量中,您可以很高兴地使用DOM元素和事件监听器玩游戏。

示例:来自任何产品。液体

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

请注意,此模式与山丘一样古老,效果很好,所以希望您的墙现在小得多,您可以继续执行更具挑战性的任务!通过访问变量fumbleDoof,您可以在Javascript中访问该产品的所有优点。元域等也是如此。

推荐文章

vidit · 如何在购物车页面上基于商品属性显示商品

3 年前

Kayote · Jekyll-在滑块中显示图像和文本

7 年前

demiton · 是否可以在不知道的情况下循环jekyll页面的yaml变量?

7 年前

Dustin Lee · 在循环液体中添加变量

7 年前

SBWT · 循环查看集合中的产品并找到最低价格(不包括0美元的价格)

7 年前

mws2019 · Shopify液体对象不显示数据

7 年前

Mike Florian Doyen · 如何在Azure API管理集正文中使用液体模板解析查询字符串?

7 年前

Rom Eh · 自动部署JSON映射

7 年前

Jiroscopes · Jekyll为博客页面创建导航

7 年前

heyron · 在变量更改时使用元数据字段值更新DOM元素

7 年前