Add to Cart Variable

[Eva4]

Hi I’m new to Figma and I am learning about variables to create an Add to Cart function. So far from watching a tutorial I have created a quantity variable that when clicked up and down adds and subtracts the quantity. I now want to create a function once the ‘Added to Cart’ button is clicked it will add whatever quantity is chosen to the cart in the top right nav. The tutorial didn’t cover this so I am not sure how to go about it.

[Haroll]

Hi @Eva4

You can achieve this by:

1. creating a variable with type boolean (e.g: cartHasItem) initialized at false (since you don’t have any item in your card you don’t want it to be displayed,
   

   

2. then make a new component with your pill. It need to have a property with value : false and true (e.g: display: false, true)
   the variant display: false, should has an opacity of 0
   

   

3. on your prototype frame replace your pill with this new component

4. On the pill instance (the one you just add to your prototype),
   4.1 - select its text, on the right panel section Text : click on the hexagon icon at bottom right to have your quantity variable (e.g total)
   

   
   
   4.2 - then select the instance again and go to its property, on the right panel, hover the display property, an icon should appears on its far right (as shown below). Click on it and add you variable cartHasItem. It should now disappear (since cartHasItem is initialized at false)
   
   

5. Then go to your add function and append a condition, after your set variable, to check it total is above 0. If so set cartHasItem to true
   (it should looks something like that)
   

   

6. You can go to your subtract function and append a condition, after your set variable, to check if total is equal 0, then set cadHastItem to false.
   ( make sure that total variable cannot be lowered below 0)
   

   

Hope it helped