I have a “button” component that had 2 variants as below.
- Default state - Just a button with “add to cart” on it
- Selected State - It’s got 3 buttons [-] [0] [+]. Basically a minus and plus on the sides with count (text) in the middle. Users can increment and decrement the value as needed. If the count is 1 and the user clicks minus, it goes back to the default state.
I was able to establish the switch between default and interactive state rather easily using interactive components.
- On clicking the default button, it changes to the selected state
- In selected state, on clicking on the minus button, it goes back to default.
Now, I want to “tie” the selected button to variables to simulate an actual cart experience. However, I want to do this at an instance level as I have multiple cards on a page.
Basically, I have a page with 10 such buttons, one for each product. I want to add a “set variable” interaction to the plus button in the selected state. However, I want to do this individually at for each of the 10 instances as I’m setting different variables for each.
However, whenever I click on the “Default” state button, it seems to go to the “Selected State” but without overrides (the one as defined in the main component).
Below is an illustration of what I mean
Default and Selected are two variants. Default is pre-selected on the page. I have some overrides in the selected variant. However, it does work on the prototype.
Is there a way of achieving the expected behaviour.