import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
let user = wixUsers.currentUser;
async function checkWishlist() {
// If the current user is logged in:
if (wixUsers.currentUser.loggedIn) {
// Query the “products-wishlist” collection to find if the product was already added to the user’s wishlist.
let wishListResult = await wixData.query(“Wishlist”)
.eq(“product”, product._id)
.eq(“userId”, user.id)
.find();
// If the product was already added to the user’s wishlist:
if (wishListResult.items.length > 0)
// Show the “inWishList” image with a fade effect.
$w(‘#inWishList’).show(‘fade’, {duration: 100});
// If the product was not yet added to the user’s wishlist:
else
// Show the “notInWishList” image with a fade effect.
$w(‘#notInWishList’).show(‘fade’, {duration: 100});
}
// If the current user is not logged in:
else {
// Show the “notInWishList” image with a fade effect.
$w(‘#notInWishList’).show(‘fade’, {duration: 100});
}
}
//-------------Event Handlers-------------//
// Set the action that occurs when the “inWishList” image is clicked.
export function inWishList_click(event, $w) {
// If the current user is logged in:
if (user.loggedIn)
// Remove the current product from the wishlist.
removeFromWishlist();
}
// Set the action that occurs when the “notInWishList” image is clicked.
export function notInWishList_click(event, $w) {
// If the current user is logged in:
if (user.loggedIn)
// Add the current product to the wishlist.
addToWishlist()
// If the current user is not logged in:
else
// Show the login message.
$w(‘#loginMessage’).show();
}
// Set the action that occurs when the login message is clicked.
async function loginMessageClick() {
// Set the login options.
let options = {“mode”: “login”};
// Hide the login message.
$w(‘#loginMessage’).hide();
// Prompt the user to login using the options created above.
await wixUsers.promptLogin(options);
}
//-------------Wishlist Functionality-------------//
// Add the current product to the current user’s wishlist and update the page accordingly.
async function addToWishlist() {
// Create the wishlist item relating the current product to the current user.
let wishListItem = {
product: product._id,
userId: user.id
};
// Hide the “notInWishList” image with a fade effect.
$w(‘#notInWishList’).hide(‘fade’, {duration: 100});
// Show the “inWishList” image with a fade effect.
$w(‘#inWishList’).show(‘fade’, {duration: 100});
// Insert the item created above into the “products-wishlist” collection.
let result = await wixData.insert(“Wishlist”, wishListItem);
}
// Remove the current product to the current user’s wishlist and update the page accordingly.
async function removeFromWishlist() {
// Query the “products-wishlist” collection to find the wishlist item corresponding to the current product and current user.
let wishListResult = await wixData.query(“Wishlist”)
.eq(“product”, product._id)
.eq(“userId”, user.id)
.find();
// If a wishlist item was found:
if (wishListResult.length > 0) {
// Show the “notInWishList” image with a fade effect.
$w(‘#notInWishList’).show(‘fade’, {duration: 100});
// Hide the “inWishList” image with a fade effect.
$w(‘#inWishList’).hide(‘fade’, {duration: 100});
// Remove the wishlist item from the “products-wishlist” collection.
await wixData.remove(“Wishlist”, wishListResult.items[0]._id)
}
}
Code on wish list member page
// Import the wix-data module for working with queries.
import wixData from ‘wix-data’;
// Import the wix-users module for working with users.
import wixUsers from ‘wix-users’;
// Import the wix-location module for navigating to pages.
import wixLocation from ‘wix-location’;
//-------------Page Setup-------------//
$w.onReady( async function () {
// Get the current user.
let user = wixUsers.currentUser;
// If the current user is logged in:
if (user.loggedIn)
// Load the user’s wishlist using the loadWishlist() function.
return loadWishlist();
// If the current user is not logged in:
// Collapse the wishlist.
$w(‘#wishlist’).collapse();
// Expand the empty whishlist.
$w(‘#emptyWishlist’).expand();
});
// Load and display the current user’s wishlist.
async function loadWishlist(){
// Get the current user.
let user = wixUsers.currentUser;
// Query the “products-wishlist” collection for all wishlist items belonging to the current user.
let wishlistResult = await wixData.query(“Wishlist”)
.eq(“userId”, user.id)
.include(‘product’)
.find()
// If any wishlist items were found:
if (wishlistResult.length > 0) {
// Expand the wishlist.
$w(“#wishlist”).expand();
// Collapse the empty wishlist.
$w(“#emptyWishlist”).collapse();
// Set the wishlist repeater’s data.
$w(“#wishlist”).data = wishlistResult.items;
// Set the action that occurs when the wishlist repeater items are loaded to the myItemReady() function.
$w(‘#wishlist’).onItemReady(myItemReady);
}
// If no wishlist items were found:
else {
// Collapse the wishlist.
$w(“#wishlist”).collapse();
// Expand the empty wishlist.
$w(“#emptyWishlist”).expand();
}
}
// Set up the wishlist repeater items when the repeater’s data is loaded.
function myItemReady($w, wishlistItem){
// Get the wishlist product.
let product = wishlistItem.product;
// Set the repeater’s elements using the item data.
$w(‘#productImage’).src = product.mainMedia;
$w(‘#name’).text = product.name;
$w(‘#price’).text = product.formattedPrice;
// Set the action that occurs when the product image is clicked.
$w(‘#productImage’).onClick(() => {
// Navigate to the wishlist item’s product page.
wixLocation.to(product.productPageUrl);
});
// Set the action that occurs when the remove item image is clicked to the removeItem() function.
$w(‘#removeItem’).onClick(removeItem(wishlistItem._id));
}
// Remove an item from the user’s wishlist.
function removeItem(id) {
return async function () {
// Remove the item with the specified ID from the “products-wishlist” collection.
await wixData.remove(‘Wishlist’, id);
// Reload the wishlist to reflect the removed item.
loadWishlist();
}
}