hi. I’m trying to add the like button and counter to my Wix studio site since the long days ago. It’s same as Wix blog like button and “Is this article helpful” feature.
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
// Retrieve like count from local storage if available
let likesCount = local.getItem("likesCount");
if (likesCount) {
$w("#likeButton").disable();
}
let item = $w("#dynamicDataset").getCurrentItem();
const itemObj = $w("#dynamicDataset").getCurrentItem();
$w("#likeButton").onClick((event) => {
if (wixUsers.currentUser.loggedIn) {
// Increment like count and update UI
let likes = itemObj.likes + 1;
$w("#dynamicDataset").setFieldValue("likes", likes)
$w('#dynamicDataset').save();
$w("#likesText").text = formatView(String($w("#dynamicDataset").getCurrentItem().likes))
$w("#likeButton").disable();
let likesCount = local.getItem("likesCount");
if (likesCount) {
$w("#likeButton").disable();
}
// Update item in database
item.likes += 1; // Increment likes in the current item
item.likesUpdate = true;
$w("#likeButton").disable();
}
else {
console.log("you must logged in to react this post!");
$w('#loginalert').show();
$w('#likeButton').disable();
}
// Save like count to local storage
wixData.update("Items", item)
.then(() => {
// Refresh dataset to reflect changes
$w("#dynamicDataset").refresh();
})
.catch((err) => {
console.error("Error updating item:", err);
});
});
});
});
I tried to code this with my small knowledge of Velo and ut’s not work as I expected. I don’t know how to make it work for multiple dynamic pages. I’ve tried the code from some guys from Youtube and forum too. Some need to create the whole separate CMS and some are not working. Wix market doesn’t have like app for CMS pages too. I lost my way solving this one.
Updated Code!!!
//Frontend Code
import {local} from 'wix-storage-frontend';
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
$w("#dynamicDataset").onAfterSave(() => {
// Refresh dataset to reflect changes
$w("#dynamicDataset").refresh();
});
$w("#dynamicDataset").onReady(() => {
let item = $w("#dynamicDataset").getCurrentItem();
$w("#likesText").text = formatView(String(item.likes));
const itemId = item._id;
const likedItems = JSON.parse(local.getItem("likedItems")) || [];
if (likedItems.includes(itemId)) {
$w("#likeButton").disable();
}
$w("#likeButton").onClick((event) => {
if (wixUsers.currentUser.loggedIn) {
// Increment like count and update UI
let likes = item.likes + 1;
$w("#dynamicDataset").setFieldValue("likes", likes);
$w("#dynamicDataset").save();
$w("#likesText").text = formatView(String($w("#dynamicDataset").getCurrentItem().likes));
// Update item in database
item.likes += 1; // Increment likes in the current item
item.likesUpdate = true;
$w("#likeButton").disable();
likedItems.push(itemId);
local.setItem("likedItems", JSON.stringify(likedItems));
} else {
console.log("you must logged in to react this post!");
$w('#loginalert').show();
$w('#likeButton').disable();
}
});
});
});
});
//BackendCode
//backend/data.js
import wixData from 'wix-data';
export function Items_beforeUpdate(item, context) {
if (item.likesUpdate) {
return wixData.get(context.Items, item._id, { "suppressHooks": true })
.then(itemToUpdate => {
itemToUpdate.likes ? itemToUpdate.likes += 1 : itemToUpdate.likes = 1;
return itemToUpdate;
});
}
return item;
}
It’s working until I clear the cookies but still worth it.
“likedItems” is javacript array in fieldname and
“likes” is the number counter
Hey there,
Looks like you have multiple $w("#dynamicDataset").onReady() event handlers in your code. It is advised to have only one event handler for each dataset.
Another method that I would recommend, which would stay even after clearing the cookies, is to have a reference field as a like counter in the database that links to the Members FullData collection. Here, you can store an array of all the users that have liked the post, and get the like count by calculating the length of the array.
1 Like
Can you provide an example or where can I find the useful resources?
Modified Code!
// Frontend Code
import { local } from 'wix-storage';
import wixUsers from 'wix-users';
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
$w("#dynamicDataset").onAfterSave(() => {
// Refresh dataset to reflect changes
$w("#dynamicDataset").refresh();
});
$w("#dynamicDataset").onReady(() => {
let item = $w("#dynamicDataset").getCurrentItem();
$w("#likesText").text = formatView(String(item.likes));
const itemId = item._id;
const likedItems = JSON.parse(local.getItem("likedItems")) || [];
if (likedItems.includes(itemId)) {
$w("#likeButton").disable();
}
$w("#likeButton").onClick((event) => {
if (wixUsers.currentUser.loggedIn) {
const userId = wixUsers.currentUser.id;
const likedBy = item.likedBy || [];
if (!likedBy.includes(userId)) {
// Increment like count and update UI
let likes = item.likes + 1;
$w("#dynamicDataset").setFieldValue("likes", likes);
$w("#dynamicDataset").setFieldValue("likedBy", [...likedBy, userId]);
$w("#dynamicDataset").save();
$w("#likesText").text = formatView(String($w("#dynamicDataset").getCurrentItem().likes));
// Update UI and save liked status locally
$w("#likeButton").disable();
likedItems.push(itemId);
local.setItem("likedItems", JSON.stringify(likedItems));
} else {
console.log("You have already liked this item.");
}
} else {
console.log("You must be logged in to react to this post!");
$w('#loginalert').show();
$w('#likeButton').disable();
}
});
});
});
});
// Backend Code (Backend Module)
import wixData from 'wix-data';
export function Items_beforeUpdate(item, context) {
if (item.likedBy) {
return wixData.get(context.Items, item._id, { "suppressHooks": true })
.then(itemToUpdate => {
itemToUpdate.likes = item.likedBy.length; // Update likes count based on the length of the likedBy array
return itemToUpdate;
});
}
return item;
}
It’s working for somehow. Even after clearing the cookies, it’s disabled or enabled depends on the account of the user who liked or not liked yet. Thanks for the advice.
Great, you’ve pretty much figured it out!
You still have the two event handlers that I’d suggest you merge into one.
Sure, take a look at the video I’ve provided below. It is much more complex than what you are building, but it will help you get an overview of how this can be achieved:
1 Like
Thanks for the help again Sir.
I’ve rechecked for the whole weekends and Now it’s completed
Too many bugs and errors encountered making this feature possible and here is the stable code (For those who want to make this one later can use this code)
//Frontend Code
import wixData from 'wix-data';
import wixUsers from 'wix-users';
$w.onReady(async function () {
$w("#dynamicDataset").onReady(() => {
let item = $w("#dynamicDataset").getCurrentItem();
$w("#likesText").text = `${item.likes} Likes`;
const itemId = item._id;
const user = wixUsers.currentUser;
if (item.likedBy && user.loggedIn && item.likedBy.includes(user.id)) {
disableLikeButton();
}
$w("#likeButton").onClick(async () => {
if (user.loggedIn) {
try {
// Check if the user has already liked the note
if (!item.likedBy || !item.likedBy.includes(user.id)) {
// Increment like count and update UI
let likes = item.likes + 1;
$w("#dynamicDataset").setFieldValue("likes", likes);
await $w("#dynamicDataset").save();
// Update likedBy field in the database
item.likedBy = [...(item.likedBy || []), user.id];
await $w("#dynamicDataset").setFieldValue("likedBy", item.likedBy);
await $w("#dynamicDataset").save();
// Update UI
$w("#likesText").text = `${likes} Likes`;
disableLikeButton();
}
} catch (error) {
console.error('Error:', error);
}
} else {
console.log("You must be logged in to like this note!");
$w('#loginalert').show();
disableLikeButton();
}
});
});
});
function disableLikeButton() {
$w("#likeButton").disable();
$w("#likeButton").label = "Liked";
}
//create data.js in code tab and add this backend code
import wixData from 'wix-data';
export function collectionname_beforeUpdate(item, context) {
if (item.likedBy) {
return wixData.get(context.collectionId, item._id, { "suppressHooks": true })
.then(itemToUpdate => {
itemToUpdate.likedBy = item.likedBy;
return itemToUpdate;
});
}
return item;
}
Create “likes” Number type fieldkey in dataset to store likes and “likedBy” reference collection field to store liked user Id connected with wix user api so no need to use localsotrage.
Thanks for the help again Pratham.
Wish you have a great times!!!
Mike
1 Like
