Change icon variant when a button is pressed

Ask the community
1

I’m creating a page with a shopping cart icon at the top, which starts out empty.

I would like the shopping cart icon at the top of the page to change to another variant (shopping cart icon with object inside) when I click on a product and add it to the cart.

I tried using a boolean variable that checks if items have been added to the cart and if “true” the icon variant would change, but it didn’t work.

When items are added, the page doesn’t reload. Apparently the after delay only works after the page reloads. I had an idea of ​​creating a kind of listener that would constantly check the value of the variable and change the icon variant, but I couldn’t find a way to do it.

Does anyone have any suggestions?

Thank you very much.

2

Use the “On Click” trigger on the “Add to Cart” button to change the boolean values for both icons

3

Hi Darlynton.

Thanks for your reply.

I did this, but it didn’t make the icon change variant automatically since the click is on a button and the icon I want to change is in another area of ​​the page.

4
  • Place both icons in same position to overlap the other
  • Create 2 boolean variables and apply them on each of the icons, say Default and change
  • Have Default set to true and Change set to false
  • Add the attached interaction to the button

Screenshot 2024-11-19 at 12.39.59
Screenshot 2024-11-19 at 12.39.591768×1626 236 KB

5

I think that overlapping the 2 icons doesn’t work because they are transparent, with the first icon being an empty shopping cart, and the second icon being a shopping cart with an object inside it.

6

Ok I hadn’t understood that it was possible to apply the visibility of an element based on a variable. This solved my problem, thank you very much for the help!

1 Like