Wishlist help

Ask the community
,
1

Hello, I have followed the steps many, many times to create the customer wishlist and just cannot get it to work. I have been doing this for 4 days now and I am completely frustrated. I don’t know how to ask for help. Has anyone else gotten it to work? Should I post my code here? Thank you

2 
Thank you for your response.  I am attaching the codes for the Product Page and Wishlist page.  I am not sure how much I have wrong... I cannot even get past the add/remove heart icons and the login message to work right much less test if it actually adds the data to the product-wishlist database or wishlist page.  My website is currently published just for testing... its in the very early development stages, but this is just killing me.  If you need to look at the website, it is:

https://xstitchboutique.wixsite.com/mysite

I really appreciate you taking the time to look.

Jennifer

This is the 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();
});
checkWishlist();
async function loginMessageClick() {
let options = {“mode”: “login”};
$w(‘#loginMessage’).hide();
await wixUsers.promptLogin(options);
}$w(‘#loginMessage’).onClick(loginMessageClick);

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

let result = await wixData.insert(“product-Wishlist”, wishListItem);
}

export function notInWishList_click(event, $w) {
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(“product”, product._id)
.eq(“userId”, user.id)
.find();

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

export function inWishList_click(event, $w) {
if (user.loggedIn)
removeFromWishlist();
}
async function checkWishlist() {
if (wixUsers.currentUser.loggedIn) {
let wishListResult = await wixData.query(“product-Wishlist”)
.eq(“product”, product._id)
.eq(“userId”, 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});
}
}

This is the wishlist page

import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;

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

async function loadWishlist(){
let user = wixUsers.currentUser;
let wishlistResult = await wixData.query(“product-Wishlist”)
.eq(“userId”, user.id)
.include(‘product’)
.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(‘product-wishlist’, id);
loadWishlist();
}
}

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

3

I did that. Must have done something wrong. Sorry

4

Look at the Wish List example to see how to do this.

5

Thank you for your response, Yisrael. But, as I said above… I did follow that, many, many times and finally came here for advice. I know basically nobody can help me because its way way too much to talk about here. So… I am going to just move on and forget that idea for now.

6

You may want to check out the WixArena - it’s a hub where you can look for Corvid (and other) experts for hire.

7

Here it is anyway.

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();
});
checkWishlist();
async function loginMessageClick() {
 let options = {"mode": "login"};
    $w('#loginMessage').hide();
 await wixUsers.promptLogin(options);
}$w('#loginMessage').onClick(loginMessageClick);

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

 let result = await wixData.insert("product-Wishlist", wishListItem);
}

export function notInWishList_click(event, $w) {
 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("product", product._id)
        .eq("userId", user.id)
        .find();

 if (wishListResult.length > 0) {
        $w('#NotInWishList').show('fade', {duration: 100});
        $w('#InWishList').hide('fade', {duration: 100});
 await wixData.remove("product-Wishlist",                                                         
        wishListResult.items[0]._id)
    }
}

export function inWishList_click(event, $w) {
 if (user.loggedIn)
        removeFromWishlist();
}
async function checkWishlist() {
 if (wixUsers.currentUser.loggedIn) {
 let wishListResult = await wixData.query("product-Wishlist")
            .eq("product", product._id)
            .eq("userId", 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});
    }
}

Wishlist page

import wixData from 'wix-data';
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';


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

async function loadWishlist(){
 let user = wixUsers.currentUser;
 let wishlistResult = await wixData.query("product-Wishlist")
        .eq("userId", user.id)
        .include('product')
        .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('product-wishlist', id);
        loadWishlist();
    }
}

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

You have three page onReady() functions in your wishlist page code, all of which have the same or similar code. Did you try the example ? Once you get it working in the example, you can use the same code in your own site.

A gentle warning: What you want to do will be a bit challenging for a beginning coder. But, not impossible. That’s why I suggested you might want to find someone in the WixArena to help. If you decide to give it a try on your own, use the on-line documentation and resources to find out what and how, and we’re always here to help get you pointed in the right direction.

9

Thanks Yisrael. I think my problem lies in the databases/collections. I cannot understand how adding only the member ID and product ID fields in my product-wishlist without the description, image and price works. And don’t I need a dynamic page? Older guides I found first said I needed that and not just a repeater “table” in the wishlist page as the example now shows. I am just too new at coding here. I am switching over from another company and so far I have imported over 700 products. I wanted a more professional website and one that offered more features that suited my needs. Unfortunately I have found one very important thing I absolutely need (and had before) that I cannot do. I need to be able to customize every products’ individual page and add available accessories and paragraphs and more underneath, so I don’t know if Wix is for me anyway right now.