javascript - 在 Shopify 中显示颜色变体的名称

Question

我们在 Shopify 元素中使用色板。我们正在寻找一种解决方案，只显示所选颜色变体的名称。是否可以使用 liquid 来实现它，或者我们是否需要 JavaScript 解决方案？

看看应该在哪里发生:printnil.com

{% for variant in product.variants %}
<span>{{ variant.title }}</span>
{% endfor %}

Answer 1

如果您想根据用户的选择更改显示的内容，则需要使用 JavaScript。看看this tutorial in the Shopify docs这解释了如何创建一个回调，每当用户更改他们的选择时调用该回调(您的主题中可能已经有这个):

var selectCallback = function(variant, selector) {
  <your code goes here>
}

您可以在此回调中访问变体的选项。例如。如果颜色是第一个选项，使用 variant.option1 获取当前选择的颜色。