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

Question

我可能会遇到这个问题，因为我缺乏对液体和 shopify 平台的一般经验。

这是我的问题：

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

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

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

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

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

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

Answer 1

几乎所有的主题，无论是免费的还是付费的，都有适当的功能代码来处理变化的变化。当客户通过更改选择元素或单击单选按钮来选择变体时，现有代码应正确更新当前选择的变体。您将 onclick 设置为第一个变体的示例可能是最原始的操作模式之一，并且如您所见，不太令人满意。

作为初学者，最好的办法是从 Shopify 下载 Debut 主题，并从工作代码的位置研究变体选择如何工作的基础知识。只有这样，您才能希望能够修改自己的主题。

Answer 2

这很容易:)

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

一些理论：

Variants 是一个数组。 variants.first 是一个液体函数，可以轻松获取数组的第一个元素，请查看liquid docs for more details。

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

现在是魔法：

您需要在product.variants 上进行迭代，在某个地方保留变体ID，最后将值传递给函数。

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

通过

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

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

额外的细节1是数量，你也可以设置动态的。

我不知道你的设计，所以你可以使用多个按钮的伪代码：

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