Add a Like Button to a Repeater

Learn how to add a smart 'Like' button and counter to your repeater using Corvid (a.k.a. Wix Code). Users will only be allowed to 'Like' the same item once even if they are not members of your site.

This example shows you how to add a smart 'Like' button and counter to your repeater items. The code limits each website visitor to 'like' each item only once using their IP address. Upon page refresh, items 'liked' by a particular visitor cannot be 'liked' again. Try the example below.

Go to our homepage and click 'like' on our code menu.
Try it!

A collection is created called PageLikes for storing the ipAddress, title the pageId when a website user 'likes' an item on the repeater menu. This collection is used to check whether the returning user has liked an item previously in order to stop them from liking that item again.

Two 'like' vector images (i.e. thumbs up vector images) are added to the repeater to act as 'like' buttons. One image is named #btnLike and will serve as the clickable 'like' button. An onClick event listener is added to it. The colour of the second image is changed to grey (called #greyLike) - it serves as the disabled version of the button after it has been clicked. The #greyLike image is hidden until #btnLike is clicked.

The detectUserIP function detects the users IP address when the page loads. Once the ipAddress has been found, the repeaterSettings function is called to disable the 'like' button on all repeater items which the user (via ipAddress) has already liked. It does this with a query on the PageLikes collection directly, which returns a list of all the pages the user has already 'liked'. A loop is used to disable the 'like' button on each repeater item in this list by hiding the #btnLike image and showing the #greyLike image. 

Once a user clicks one of the remaining #btnLike images, the btnLike_click function records the like on the CodeMenu collection, while adjusting the 'like' counter called #txtLikes on the repeater in real time. It also hides the #btnLike image which has just been clicked and shows the #greyLike image to indicate the like button has now been clicked and is inactive. Finally it calls the saveLikes function to save the pageId and title of the item and the ipAddress of the user to the PageLikes collection to ensure they cannot 'like' the same item again on page refresh or their next visit.

Page Code

Please wait ...
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! All our code snippets come with full support to help you implement them on your own website - simply contact us for help.