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

Question

I can add different products as individual arrays and also can increment the quantities if same product is added. But now I need to add same product but with Different size and it should create another new array. Below is the code I am using.. Please help out..!!

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

You are almost done, just check for size equality (in findIndex and in the subsequent 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

Your code is correct however you need to give a unique product ID for each product with specific attributes. for Example

Product: { id: 'Nike' size: 's' color: 'blue'}

your Cart is having multi items where this product example having ID: 'Nike,s,blue'. each time you try to find this product with that specific ID you will be able to add it as new or Increase it if it already exist.

You may take the same logic with T-shirt 'L' where its ID: 'Nike,L,blue'. it make it a new product and separated.

Briefly: You need to make a unique ID for each product along with its Attributes (you may combine the attributes with the ID based on the Object.values or array where you have the Data).