use-shopping-cart icon indicating copy to clipboard operation
use-shopping-cart copied to clipboard

Interacted With Cart State

Open dayhaysoos opened this issue 5 years ago • 1 comments

We should have a state that allows us to temporarily show something like, "Added to your cart" for a few seconds. Not sure what I would name it, maybe hasInteractedWithCart where it's false by default. It will only display for a given number of seconds, and we can pass it a string of what it should say as well.

dayhaysoos avatar Sep 25 '20 14:09 dayhaysoos

Hmm, I was thinking of a way to prototype this but I think this is the wrong way to go about something like "Added to your cart". Instead, I would recommend the developer to do this on their Product component:

They should likely be using some sort of global or global-ish state that allows them to add products to a stack when they're added to the cart. After a certain amount of time, they could be cleared off of the stack. Now that I'm writing this, we could also make this stack inside of this library.

Let me know if you want to make this stack or let the end-developers do it. For reference, if we wanted to build it we'd need to do the following:

  • Add an addedToCartTimer prop or something like that that could be passed to our redux state for future use.
  • Add an addedToCartStack or something to our redux state.
  • Add a middleware that sees when addItem is called successfully then adds that product to the addedToCartStack. After that, it starts a setTimeout timer that will do store.dispatch(actions.addedToCartTimerFinished()) which does state.addedToCartStack.shift() to remove the first element of the stack (FIFO)

andria-dev avatar Mar 21 '21 04:03 andria-dev