Setting "prices" using a conditional logic checkbox

Ask the community
,
1

Hiya Figma community,

I have a bit of a dilemma here,

I have a checkbox component with a simple prototyping setup to be checked / unchecked when the user clicks on the instance in prototyping mode.

What I want to do is when the user clicks on the checkbox, it adds a price value to the total price and then removes it when it’s unchecked via figmas conditional logic.

I have a feeling that the conditionals I have set in the prototype design are being reset when the component is clicked on, so depending on the state that is originally set, you either add to the price or take away from the price.

(I’d normally publish this, but I don’t have admin rights, sorry)

Attached images

image

image
image1045×342 8.15 KB

image
image483×817 28.1 KB

image
image520×845 28.7 KB

image
image1091×701 40 KB

I’d love to know what I am doing wrong if anything.

Thanks for the help, everyone.

2

Hello @Rav

There are two things on the checkbox interactions that seems odd:

1 - Conditions
The expression of a condition will always ends up by being either true or false. And thus will only apply the rule(s) described in the condition if it’s true (e.g: if my checkbox is checked do something)
So when you create the condition “if false” it will never run the logic put in it because the evaluation of this condition will always be: false.

image
image728×546 16.5 KB

I’m not able to see the whole definition of the interaction from the state checked to unchecked but if you’re not defining anything in the else I advised you to remove the conditions of your interactions

2 - Set variables
On the component interactions, the variable Store Prices is set twice (in both check and uncheck state of the component)

  1. First Store Prices is set to Prices: Product 1
  2. Then Store Prices is set to 0.

Thus the variable Store Prices will always display 0 according to the last set variable.

image
image2356×1932 334 KB

Because it’s not visible in your screenshot I’ll assume you use Store prices to set Display Prices.
image
It appears that the :

  • Store prices variable is never printed on screen,
  • the first set variables of Store prices has to be overwrite to change its collection in order to change the value of the product added according to your checkbox

Then you may avoid the usage of the variable Store prices

A simple set variable of :
Display Prices set to Display Prices + Prices (or - Prices according to the component states) should do just fine

Let me know if it helped.

1 Like
3

@Haroll Yes this really helped a lot, thanks for helping me out here !

1 Like