In this tutorial, we’ll dive into an exciting feature for your Wix site by integrating the Wix Realtime API. This case study shows how to implement a dynamic "heart" or "like" system where users can click on an icon to express their appreciation for items, and the count is updated in real-time across different views, such as the logged-in user and incognito window.

What We'll Be Creating

We’ll build a heart count system where:

• Users can click on an icon (heart) to like an item.

• The number of hearts is displayed in real-time across the site, even for users not logged in.

• The heart count updates dynamically for both repeaters and item pages.

• We’ll ensure this functionality works seamlessly for both logged-in users and those browsing in incognito mode.

Step 1: Understanding the Basics

Our first goal is to track how many people have clicked the heart icon on a specific item. We will use Wix's real-time API to ensure that whenever a user likes or unlikes an item, the changes are reflected in real-time across the site.

For example:

• When you click the heart icon, it recalculates and updates the heart count for all visitors.

• This feature works for both logged-in users and anonymous visitors in incognito windows.

Step 2: Setting Up the CMS Collection

Before we jump into the code, let’s refresh your memory on the CMS collection we’re using. The collection stores details about the items, including which users have clicked the heart and the total heart count.

• Members Field: Stores the IDs of users who have liked the item.

• Heart Count: Keeps track of the total number of likes.

Ensure that your collection has these fields in place before proceeding.

Step 3: Setting Up the Dynamic Page

We’ll begin by adding an item page to display the heart icon and its current count.

1. Add a Dynamic Page: This will allow us to display different items dynamically.

2. Copy the Heart Icon and Counter: From the repeater page, copy the heart icon and heart count text element to your dynamic page.

3. Style Adjustments: Adjust the icon and text styles as needed to ensure visibility.

Step 4: Connecting to the CMS

Now, let's connect the heart count text element to the CMS so that it dynamically reflects the total number of likes for each item.

• Connect the text element displaying the count to the "Heart Count" field in the CMS.

Key Features of the Code:

• Real-Time Updates: We use subscribe to listen for updates on the heartChannel. When a user clicks the heart icon, the total heart count updates in real-time across all sessions.

• Authentication Check: Only logged-in users can like an item. If not logged in, the user is prompted to log in.

• Dynamic Data: The code pulls data from the CMS, such as the heart count and the array of users who have already liked the item.

• Publishing Messages: When a user likes or unlikes an item, the updated heart count is published to the real-time channel, ensuring instant updates across all views.

Step 6: Linking the Repeater to the Dynamic Page

To enhance navigation, we link the heart icons on the repeater page to their respective dynamic item pages. This ensures that when a user clicks on a heart in the repeater, they are directed to the item’s detail page where they can also like the item.

Step 7: Testing the Feature

Once you've set everything up:

1. Test the heart count feature by liking/unliking items in both logged-in and incognito modes.

2. Verify that the heart count updates in real-time on all relevant views.

Final Thoughts

Now you know how to implement a real-time heart count system on your Wix site! This feature adds interactivity and real-time engagement for users, whether they are logged in or browsing anonymously. If you have any questions or want to see more tutorials like this, leave a comment, subscribe, and smash the like button!