In this Wix Studio tutorial, we are exploring an interesting topic, which is adding favorite icon to Wix Studio.

We start out by creating a collection to display our items, and then connecting them to the repeater. Once connected we move on to add heart icons from Flaticon.

We then write a couple of velo code to make the feature work.

Here's what the code does.

1. We use Wix Data to use later to update the collection once the site member hearts or unhearts an item.

2. We also use Wix Location to reload the page after they heart or unheart an item to make sure the code works properly

3. We use Wix Members to get the member info (Specifically the member's ID), and authentication to check if the member is logged in (This is important because we need the member's ID to check if the member hearted the item before or not), and to also prompt login if the member is logged out and trying to heart an item.

4. We also use the repeater's onItemReady function to create an item selector and item data to make sure that the operations on the repeater are targetted to individual items.

5. When users click on the heart, it first checks if they hearted the item before;

   1. If they did not heart the item, their IDs are pushed into the member's field in the database and the heart count field is updated using the data hook function we added at the data.js

   2. If the member did heart the item already, we will remove the member's ID and also use the data hook function to update the heart count field.

...that's it. It's that simple and you can check out the video here.