Im creating a type of wishlist on a page without a store

Hello everyone,

I’m creating an online catalog, the idea is that the user can add the products from the catalog to a custom contact form (Inquiry page).

This is the code I have on the product page (a Dynamic page I created using a dataset with all of the products, so I’m not using Wix stores)
https://smartnersc.wixsite.com/website-17/products-store/Ladies-Ashirt-(144-Pcs-Per-Box)

ONLY the Ashirts products are linked to the inquiry dataset


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

let item;
let user = wixUsers.currentUser;

$w.onReady(async function () {
    item = await $w('#columnStrip7');
    checkWishlist();
    $w('#loginMessage1').onClick(loginMessageClick);
});

async function checkWishlist() {
 if (wixUsers.currentUser.loggedIn) {
 let wishListResult = await wixData.query("WishList")
            .eq("products", item._id)
            .eq("userId", user.id)
            .find();

 if(wishListResult.items.length > 0)
            $w('#removeItem').show('fade', {duration: 100});
 else
            $w('#addItem').show('fade', {duration: 100});   
    }
 else {
        $w('#addItem').show('fade', {duration: 100});
    }
}

export function removeItem_click(event, $w) {
 if (user.loggedIn) 
        removeFromWishlist();
}

export function addItem_click(event, $w) {
 if (user.loggedIn) 
        addToWishlist()
 else 
        $w('#loginMessage1').show();
}

async function loginMessageClick() {
 let options = {"mode": "login"};
    $w('#loginMessage').hide();
 await wixUsers.promptLogin(options);
}

async function addToWishlist() {
 let WishListItem = {
        productName: item._id, 
        userId: user.id
    };
 
    $w('#addItem').hide('fade', {duration: 100});
    $w('#removeItem').show('fade', {duration: 100});
 let result = await wixData.insert("WishList", WishListItem);
}

async function removeFromWishlist() {
 let wishListResult = await wixData.query("WishList")
        .eq("productName", item._id)
        .eq("userId", user.id)
        .find();

 if (wishListResult.length > 0) {
        $w('#addItem').show('fade', {duration: 100});
        $w('#removeItem').hide('fade', {duration: 100});
 await wixData.remove("WishList", wishListResult.items[0].name)
    }
}

This is the code I have on the inquiry page (where the user will be able to see the item they added to their inquiry list and send the request from there)

https://smartnersc.wixsite.com/website-17/account/Inquiry

This is the Inquiry page, to be able to go in you have to create an account.

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

$w.onReady(async function () {
 let user = wixUsers.currentUser;
 
 if(user.loggedIn)
 return loadWishlist();
 
    $w('#wishlist').collapse();
    $w('#emptyWishlist').expand();
});

async function loadWishlist(){
 let user = wixUsers.currentUser;
 let wishlistResult = await wixData.query("WishList")
            .eq("userId", user.id)
            .include("name")
            .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 productsStore = wishlistItem.productStore;
    $w('#productImage').src = productsStore.image;
    $w('#name').text = productsStore.name;
    $w('#price').text = productsStore.price;
    $w('#removeItem').onClick(removeItem(wishlistItem._id));
}

function removeItem(id) {
 return async function() {
 await wixData.remove('WishList', id);
        loadWishlist();
    }
}

The problems that I have are:

1: I can’t seem to get the Reference from the Store products Dataset onto the Inquiry dataset, so because the reference field is empty, nothing is shown on the inquiry page.


2: on the inquiry page, the product item is not getting the information from the source, so if there is something selected is shows the placeholders I put on the editor. in other words, did i write the product code correctly?

function myItemReady($w, wishlistItem){
 let productsStore = wishlistItem.productStore;
    $w('#productImage').src = productsStore.image;
    $w('#name').text = productsStore.name;
    $w('#price').text = productsStore.price;
    $w('#removeItem').onClick(removeItem(wishlistItem._id));
}

I dont know if this is going to be fixed with the reference or if the code is wrong. can you clarify please.

Thank you,

Alejo.

Hi There!

Try watching this video. It’s about a liking system but it works for a wishlist too.
https://www.youtube.com/watch?v=4m-dTCYIV9U&t=851s

Get the code here:
wixcodesnippets.com

You might also find the Ratings by User example useful to help you get started.