This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jacky Lee
Posted Mar 14 - Read on Facebook

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!

6 Comments

Brian Williams

As coffee doest have enums and your state is only boolean so far I would say that logic is the most straight forward way to implement this.

Jorn van Dijk

Superfly.

Steve Ruiz

It definitely can be done in Framer, but not easily with Layer states and other Framer-type functions, which seem designed for simplifying animation but end up getting used for logic. For anything more than animations and transitions, what you really want is a data object that will hold all of the information about your items. You can then create layers by looping over this information, using the values it stores to determine what things look like and how they behave, and storing changes (such as "in cart") back into that object, so that the appearances can be updated.

Here's an example with dogs.
https://framer.cloud/yMBIH/

Steve Ruiz

And here's what this looks when used to make a shopping cart. https://framer.cloud/IxnKN/

John Lee

Swheeet - some excellent learnings here, and glad that most people stayed positive to achieve a great answer.

Read the entire post on Facebook