shopify - Shopify/Liquid，将特定尺寸的产品变体添加到购物车

Question

我可能有这个问题，因为我缺乏对液体和 shopify 平台的经验。

这是我的问题：

在我正在处理的当前主题中，当将产品添加到卡片时，它总是添加最小的可用尺寸。我不是 100% 确信这是实际执行的代码，但我相当肯定它是。

onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);

目前，当此代码被触发时，最小尺寸的产品（假设是第一个）被添加到购物车中。

我试图查看 product.variants 的 shopify API 文档，但似乎主题或商店没有使用最新版本，因为我找不到对第一个属性的任何引用。

如果在触发添加到购物车操作时能够控制产品尺寸，我想要什么。而不是总是添加最小的尺寸，它可以改为添加 product.variants.{SIZE}.id（不是实际代码只是猜测）

如果有人可以为我指出正确的此类文档的正确方向，或者如果您有类似的问题，我将不胜感激！

标签： shopifyliquidshopify-appshopify-template

Answer 1

这很简单 ：）

是的，这是将产品发送到购物车的代码，这个主题不支持产品变体。您应该添加变体支持。

一些理论：

变体是一个数组。 variables.first是一个液体函数，用于轻松获取数组的第一个元素，查看液体文档以获取更多详细信息。

重要的部分是，要添加您需要发送变体 id 的项目。始终是变体 ID。

现在魔术：

您需要迭代product.variants，将变量 id 保留在某个地方，最后将值传递给函数。

onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);

经过

onclick=" Shopify.addItem( {{ variant.id }}, 1);

您可以在任何地方使用，可以使用 select，甚至可以使用cart API获得纯 js / ajax 解决方案

额外细节 1 是数量，您也可以将其设置为动态。

我不知道您的设计，因此您可以使用带有多个按钮的伪代码：

 {% for variant in product.variants %}
   <button onclick="Shopify.addItem('{{ variant.id }}', 1)">
     {{ variant.title }}
   </button>
 {% endfor %}