Commerce JS 将产品变体添加到购物车

Question

我正在尝试在我的网页上创建一个包含不同类型产品的市场。有些是通用的，但有些有不同的尺寸/类型/颜色或诸如此类的东西。

到目前为止，我已经具备了产品列表和购物车功能，但我无法将产品变体添加到购物车。

我一直在寻找如何做到这一点，但我能找到的东西真的不多，而且我也不是太先进。但是，我在他们的文档中发现了这一点

// If you have udpated your API version and have not yet generated variants
// from your variant groups and options, you\'ll need to update the previous
// `vrnt` object prefix to `vgrp` along with your option id
commerce.cart.add('prod_1ypbroE658n4ea', 1, {
  vgrp_dKvg9l6vl1bB76: 'optn_VPvL5z6O95AQkX'
});

// If you have updated to the latest API version and have variants generated
// from your variant groups and options, all you need to do is send the
// variant id as the third argument in your add to cart method
commerce.cart.add('prod_1ypbroE658n4ea', 1, 'vrnt_dKvg9l6vl1bB76');

我相应地调整了代码： 请注意handleAddToCart中的注释代码，当我选择该特定产品（该部分未注释，其他部分已注释）和该特定变体（基于id）并将其添加到购物车时，它可以工作，并将其添加到包含变体的购物车当然，它仅适用于特定的产品、代码和变体 - 但未注释的代码不起作用。

    const handleAddToCart = async (productId, quantity,variant ) => {
        // const item = await commerce.cart.add(productId, quantity, {
        //     vgrp_Kvg9l6Lpbo1bB7: 'optn_AYrQlWXv1JwnbR'
        // });
        const item = await commerce.cart.add(productId, quantity, variant);
        setCart(item.cart);
    };

这是我管理产品购物车功能的方法

    const [variant, setVariant] = useState('');

    const handleAddToCart = () => {
        if (product.variant_groups.length >= 1) {
            if (variant === '') {
                setShowPicker(true);
            } else {
                onAddToCart(
                    product.id,
                    1,
                    Object.defineProperty(Object(), product.variant_groups[0].id, {
                        value: variant,
                        writable: false
                    })
                );
            }
        } else {
            onAddToCart(
                product.id,
                1,
                Object.defineProperty(Object(), product.variant_groups[0].id, {
                    value: variant,
                    writable: false
                })
            );
            setShowPicker(false);
        }
    };

                    {showPicker && (
                        <div>
                            <label htmlFor="variant-picker">{product.variant_groups[0].name}</label>
                            <select
                                name="variant-picker"
                                id="variant-picker"
                                value={variant}
                                onChange={(e) => setVariant(e.target.value)}
                            >
                                {product.variant_groups[0].options.map(({ id, name }) => (
                                    <option value={id} key={id}>
                                        {name}
                                    </option>
                                ))}
                            </select>
                        </div>
                    )}

最让我困惑的是

        Object.defineProperty(Object(), product.variant_groups[0].id, {
            value: variant,
            writable: false
        })

按照文档所述准确打印，甚至按照handleAddToCart注释的代码：

{vgrp_ypbroE4k1w8n4e: 'optn_aZWNoyY0kjo80J'}

但它仍然不起作用，它将产品添加到购物车，但不注册变体。有人可以指出我做错了什么吗？

Answer 1

这种过度设计的方法。我刚刚尽可能简单地完成了我的工作。

只需将产品的组 ID 传递给超过 0 的变量组，这将是

product.variant_groups[0].id

。

然后，当您循环遍历它们以在下拉列表中显示时，您会从

id

获得选项

product.variant_groups[0].options

。该变量将设置在

setOptionId(optionId)

.

一旦设置了这些变量的状态，您就可以调用

commerce.cart.add(productId, 1, {[groupId]: optionId})

，它就会起作用！我保证。

Answer 2

let allIds: any = {};
productVariantsFromState.map((i) => {
    const variantId = i.id
    const optionId = i.options[0].id
    allIds[variantId] = optionId
})

然后当您添加到购物车时......

await commerce.cart.add(product.id, 1, productState.variantsOptionsIds)

对我有用。