Wix Store Product Page Wish List

Ask the community
, ,
1

Hi, I am trying to create a wish list on my product pages that come with the Wix stores however am not sure why it isn’t working. I have followed the instructions here https://support.wix.com/en/article/corvid-adding-a-wishlist-to-a-wix-stores-site , however mine does not seem to work, would anyone be able to tell me why.

Code on my Product Page:
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;

let product;
let user = wixUsers.currentUser;

$w.onReady( async function () {
product = await $w(‘#productPage1’).getProduct();
});

async function addToWishlist() {
let wishListItem = {
product: product._id,
userId: user.id
};

let result = await wixData.insert(“wishlist”, wishListItem);
}

export function notInWishList_click(event) {
if (user.loggedIn) {
addToWishlist();
$w(‘#notInWishList’).hide(‘fade’, {duration: 100});
$w(‘#inWishList’).show(‘fade’, {duration: 100});
}
else
$w(‘#loginMessage’).show();
}

async function removeFromWishlist() {
let wishListResult = await wixData.query(“wishlist”)
.eq(“wishlist_item”, product._id)
.eq(“_owner”, user.id)
.find();

if (wishListResult.length > 0) {
$w(‘#notInWishList’).show(‘fade’, {duration: 100});
$w(‘#inWishList’).hide(‘fade’, {duration: 100});
await wixData.remove(“wishlist”, wishListResult.items[0]._id)
}
}

export function inWishList_click(event) {
if (user.loggedIn)
removeFromWishlist();
}

async function checkWishlist() {
if (wixUsers.currentUser.loggedIn) {
let wishListResult = await wixData.query(“wishlist”)
.eq(“wishlist_item”, product._id)
.eq(“_owner”, user.id)
.find();

if (wishListResult.items.length > 0) {
$w(‘#inWishList’).show(‘fade’, {duration: 100});
}
else {
$w(‘#notInWishList’).show(‘fade’, {duration: 100});
}
}
else {
$w(‘#notInWishList’).show(‘fade’, {duration: 100});
}
}

$w.onReady( function () {
checkWishlist();
});

async function loginMessageClick() {
let options = {“mode”: “login”};
$w(‘#loginMessage’).hide();
await wixUsers.promptLogin(options);
}

$w.onReady( function () {
$w(‘#loginMessage’).onClick(loginMessageClick);
});

Code on my Wish List Page:
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;

async function loadWishlist(){
let user = wixUsers.currentUser;
let wishlistResult = await wixData.query(“wishlist”)
.eq(“_owner”, user.id)
.include(‘wishlist_item’)
.find()

if (wishlistResult.length > 0) {
$w(“#wishlist”).expand();
$w(“#emptyWishlist”).collapse();
$w(“#wishlist”).data = wishlistResult.items;
$w(‘#wishlist’).onItemReady(myItemReady);
}
else {
$w(“#wishlist”).collapse();
$w(“#emptyWishlist”).expand();
}
}

function myItemReady($w, wishlistItem){
let product = wishlistItem.product;
$w(‘#productImage’).src = product.mainMedia;
$w(‘#name’).text = product.name;
$w(‘#price’).text = product.formattedPrice;
$w(‘#productImage’).onClick(()=>{
wixLocation.to(product.productPageUrl);
});
$w(‘#removeItem’).onClick(removeItem(wishlistItem._id));
}

function removeItem(id) {
return async function () {
await wixData.remove(‘wishlist’, id);
loadWishlist();
}
}
$w.onReady( async function () {
if (user.loggedIn) {
loadWishlist();
}
else {
$w(‘#wishlist’).collapse();
$w(‘#emptyWishlist’).expand();
}
});

2

Check the other Wix Example here for a Wish List as it can be opened up in Wix Editor with all the elements already setup along with the code all set up to for you.
https://www.wix.com/corvid/example/wishlist

3

Also, check your code as you have many onReady functions throughout your code, when there should only be the one at the top of your code.

$w.onReady(function () {
     checkWishlist(); }); 

 $w.onReady(function () {
     $w('#loginMessage').onClick(loginMessageClick); });
4

Same with this one, it states on the tutorial that it should be included within your onReady function and yet you have put it at the end of your code.

Step 13: Display the Member’s Wishlist or Hide It for Non-Members

If the site visitor is signed in we need to call loadwishList to display their wishlist, if they have one. If they aren’t signed in, we hide the wishlist and display the empty wishlist message.
We’ll add this code to the onReady function of the My Wishlist page.

$w.onReady(async function () {
    if(user.loggedIn) {
        loadWishlist();
    }
    else {
        $w('#wishlist').collapse();
        $w('#emptyWishlist').expand();
    }
});