Wishlist Button
Wishlist button allows users to add/remove products to a wishlist and also serves as indicator if parent product is already in the wishlist.
Wishlist button elelemnt has two states: active and inactive. Active state is used when the product is already in the wishlist and inactive state is used when the product is not in the wishlist. We create these two states by adding two diffrent icons to the button. One for active state and one for inactive state.
Steps
Wishlist Button
Add a empty div/custom element inside a product card. This will be the wishlist button.
Wishlist Button - Attributes
Add the following attribute to the wishlist button:
Wishlist Button - Inactive
Add a icon to the wishlist button. This icon will be used when the product is not in the wishlist. Then add the following attribute to the icon:
Wishlist Button - Active
Add a icon to the wishlist button. This icon will be used when the product is in the wishlist. Then add the following attribute to the icon: