Add Favorite Icon to Wix Studio

Show and tell
, , , ,
1

Here is a STEP-BY-STEP tutorial for adding a Favorite Icon to your Wix Studio website.

:tv:Watch STEP-BY-STEP Video Tutorial

//FRONTEND CODE
import wixData from "wix-data";
import {currentMember, authentication} from "wix-members-frontend";
import wixLocationFrontend from "wix-location-frontend";

$w.onReady(async()=>{

    const member = await currentMember.getMember();
    const memberIsLoggedIn = authentication.loggedIn();

    const fullHeart = "https://static.wixstatic.com/shapes/248526_24277b901e2b40428235cf5ab176b804.svg";
    const emptyHeart = "https://static.wixstatic.com/shapes/248526_538ed8596c6149c5b9ff293f5e8dfd5d.svg";

    $w("#heartRepeater").onItemReady(($item, itemData)=>{

        const memberArr = itemData.members || [];

        const memberHasHeart = memberIsLoggedIn && memberArr.indexOf(member._id) !== -1;

        $item("#hearter").onClick(()=>{

            if(memberIsLoggedIn) {

                const userIndex = memberArr.indexOf(member._id);

                if(userIndex == -1) {
                    memberArr.push(member._id);
                    $item('#hearter').src = fullHeart;
                } else {
                    memberArr.splice(userIndex, 1);
                    $item('#hearter').src = emptyHeart;
                }

                itemData.members = memberArr;

                wixData.update("Store", itemData).then(()=> $item('#heartCounter').text = `${itemData.heartCount}`);

            } else {
                authentication.promptLogin().then(()=> wixLocationFrontend.to(wixLocationFrontend.url));
            }

        });

        $item('#hearter').src = memberHasHeart ? fullHeart : emptyHeart;

        $item('#heartCounter').text = `${itemData.heartCount === undefined ? "0" : itemData.heartCount}`;

    });

});


//BACKEND CODE


export function Store_beforeInsert(item, context) {
	item.heartCount = item.members.length;
	return item;
}

export function Store_beforeUpdate(item, context) {
	item.heartCount = item.members.length;
	return item;
}
3 Likes