Skip to main content
Question

Change icon variant when a button is pressed

  • November 15, 2024
  • 5 replies
  • 172 views

Duarte_Sousa

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.

This topic has been closed for replies.

5 replies

Darlynton
  • New Participant
  • 5 replies
  • November 19, 2024

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


Duarte_Sousa

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.


Darlynton
  • New Participant
  • 5 replies
  • November 19, 2024
  • 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


Duarte_Sousa

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.


Duarte_Sousa

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!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings