将不同尺寸的相同产品添加到购物车

Question

我可以将不同的产品添加为单独的数组，如果添加相同的产品，也可以增加数量。但现在我需要添加相同的产品但尺寸不同，它应该创建另一个新数组。下面是我正在使用的代码..请帮忙..!!

switch (action.type) {
case ADD_TO_CART:
    const productId = action.product.id;

    if (findIndex(state.cart, product => product.id === productId) !== -1) {
        const cart = state.cart.reduce((cartAcc, product) => {
            if (product.id === productId) {
                // if (product.size === action.size) {
                    cartAcc.push({ ...product, size: parseInt(product.size), qty: parseInt(product.qty) + parseInt(action.qty), sum: (product.discount ? product.salePrice : product.price) * (parseInt(product.qty) + parseInt(action.qty)) }) // Increment qty
                // } else {
                //     cartAcc.push(product)
                // }

            } else {
                cartAcc.push(product)
            }
            return cartAcc
        }, [])

        return { ...state, cart }
    }
    return {
        ...state,
        cart: [
            ...state.cart,
            {
                ...action.product,
                qty: action.qty,
                size: action.size,
                sum: (action.product.discount ? action.product.salePrice : action.product.price) * action.qty
            }
        ]
    }

Answer 1

您几乎完成了，只需检查大小是否相等（在 findIndex 和随后的 if 中）：

const productId = action.product.id;
const size = action.size;

if (findIndex(state.cart, product => (product.id === productId && product.size === size)) !== -1) {
        const cart = state.cart.reduce((cartAcc, product) => {
            if (product.id === productId  && product.size === size) {
                    cartAcc.push({ ...product, size: size, qty: parseInt(product.qty) + parseInt(action.qty), sum: (product.discount ? product.salePrice : product.price) * (parseInt(product.qty) + parseInt(action.qty)) }) // Increment qty
            } else {
                cartAcc.push(product)
            }
            return cartAcc
        }, [])

        return { ...state, cart }
    }

Answer 2

您的代码是正确的，但是您需要为每个具有特定属性的产品提供唯一的产品 ID。例如

Product: { id: 'Nike' size: ['S', 'M', 'L'] color: ['blue', 'white', 'black']}

您的购物车有多个商品，其中此产品示例的 ID：'Nike,s,blue'。每次您尝试使用该特定 ID 查找此产品时，您都可以将其添加为新产品或增加它（如果已存在）。

您可以对 T 恤 'L' 采用相同的逻辑，其中其 ID：'Nike,L,blue'。它使它成为一个新产品并分开。

简而言之：您需要为每个产品制作一个唯一的 ID 及其属性（您可以根据 Object.values 或您拥有数据的数组将属性与 ID 组合）。

将不同尺寸的相同产品添加到购物车

Add same product with different sizes to the cart

javascript

shopping-cart

reducers

reactjs

redux