Mismatch between cartDetails and cartCount values

[IPreferWater]

Hello, I'm using use-shopping-cart ^2.1.0 with next 12.0.1 In my quick example, I'm adding 5 items to the cart, this item is defined in a json

[ { "name": "cours privé", "sku": "1_private_course", "price": 4000, "image": "shop/private_lesson.png", "description" : "mdlink ?", "currency": "EUR" } ]

formattedTotalPrice & cartCount are good

but when I checkout, I only have one item added

I can confirm this behavior with console.log the variables

I'm adding product from a component with addItem

this is the github of this project and I built it on this example

do you have any idea where this problem could come from ?

thank you

[andria-dev]

Hi @IPreferWater, I can't seem to access the GitHub repository that you linked. Could you create a minimal reproduction of the issue using something like CodeSandbox to make it a little easier to help identify the issue you're having?

[IPreferWater]

Hello,

sorry I forgot about the private state of the repo

I made a copy with less code possible on this git-repo

please, in order to use : 1] make a .env.local with your stripes keys

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
STRIPE_SECRET_KEY
STRIPE_WEBHOOK_SECRET

and install the node modules npm install

2] npm run dev should send to this shop page (github picture upload seems not working today for me)

3] in the red square you can click on the basket to add item in ProductPictureStyle.tsx this method is called onClick of this icon

  function debugAdd(p: Product) {
    console.log(`add product with sku ${p.sku} `)
    addItem(product)
  }

in CartSummary.tsx, I added code to see the state of the variable at lines 39

  console.log("from cart summary");
  console.log(`totalPrice ${formattedTotalPrice} `)
  console.log(`cartCount ${cartCount} `)
  console.log(`cartDetails`)
  console.log(cartDetails)
  console.log("*****");

this is why you can see in the console of your browser the values

4] to checkout click on the basket visible on the blue square and it should send you on your stripe checkout page with the value of only 1 item

thank you

[IPreferWater]

I found the problem by reading your source-code in node_modules

I didn't use "ID" fields but SKU fields like this example from vercel

   case 'add-item-to-cart':

    //THIS UPDATE QUANTITY
      if (action.product.id in state.cartDetails)
        return updateEntry(
    [...]
    //THIS DOESNT
    return createEntry(

it's the demo of this web-application, maybe there is somewhere you can specify if you use SKU fields as the ID ? otherwise I don't understand how it's working ?

I'm sorry I'm not yet confortable with nexts, but I don't understand why in node_modules I found this code section (wich helped to understand my problem)

img url

but not in the source code from your github

I also coudln't add code to your node_module source to debug, it was ignored (this is not a problem related to your project, but if you have a quick idea why that would be great)

[andria-dev]

@IPreferWater I think the issue your describing can be fixed by changing sku to id on your product objects, however, that issue is also solved in use-shopping-cart v3. If you want to migrate to v3, not much should change; if you encounter any issues with that, please let us know.