Shopify-在产品变型更改时使用产品元字段更新div

Question

我正在尝试编写一个简单的代码，将Shopify变体元字段中的字符串输入到div中。

面临的挑战是我知道如何以液体形式调用数据，但是我无法以JS格式调用数据。每次我尝试通过液体将数据放入代码中时，都不会回来。

代码如下：

$('.single-option-selector').on('change', function(){
  let shipping_speed = {{ product.selected_or_first_available_variant.metafields.availability.type }}
  $('div.product-availability strong').html(shipping_speed);
});

如何将液体变量转换为可在JS文件中使用的字符串？

Answer 1

您在这里有点误会。我将向您解释，您可以根据需要调整代码。

重要事实 Liquid渲染一次。 Shopify将所有Liquid变成一个巨大的HTML字符串，并将其转储出去，然后浏览器将其呈现。它不是动态的。

现在让我们假设您有一个附加到每个变量的Metafield资源。由于您没有在渲染时转储这些变量，因此当客户更改变量时，您就没有机会显示变量Metafield资源。您唯一的希望是转储一个，默认，选定或第一个变体。还不够好。

所以对您来说，秘密就是创建一个简单的数据结构。循环浏览您的变体。对于每个变量，将变量ID与Metafield值一起存储。现在，您可以很好地引用每个值，并且在Liquid渲染时就拥有了所有这些值。

因此，现在，在Javascript侦听器中查找变体更改，当变体更改时，检查您已经创建的数据结构，寻找匹配的变体ID。找到它后，呈现从“元字段”中保存的文本。

宾果。你是个天才。玩得开心。