Hey everyone, keen to get some thoughts on how you handle object states in a prototype? To demonstrate, I've picked a really generic scenario that many of you should have seen before: An ecommerce site with a products grid and a cart drawer.
Each product card has an 'Add to cart' button, which toggles the the product state between 'notInCart' & 'inCart'. The state of these needs to be captured somehow and displayed when the user opens the cart drawer.
What I've done is probably a really tedious approach, can be tested here: https://framer.cloud/JGOGl/
1. Setting up an array with all the product cards and use that as the source of truth of each product state.
2. When i click 'add to cart' on any card, it will match this card with the corresponding object in the array to change its state
3. If the state is 'inCart', then add that object into *another* array called 'cartArray'
4. Finally, use this 'cartArray' as the source for populating the cart drawer items.
It's probably easier to dig through the code, I've tried my best to comment everything in there.
Has anyone done a similar logic to this? I'm just curious to see how everyone else solves this. Thanks in advance!