Hello, i work on ecommerce b2b . so i need to create wishlist on the page. and already follow this tutorial Velo Tutorial: Adding a Wishlist to a Wix Stores Site | Help Center | Wix.com
No tutorial on youtube or video. This tutorial so confusing and the system of code is not clear. WHY ? i should make something function by put code, it is ok. but the place i put it is not clear is like i can put it anywhere i want. even though only one editor. but each item have their own behaviour so, they have onclick and etc. editor let it like that, but once i check editor again. it show in the same editor. all of the code. confuse.
the template and the step by step not sync. i should do it all day until i know what wrong about the code to make it functional. once i click the tutorial not helpful, funny things is appear the find master to help your page. this is so funny. people come to here to be independent no need to be master code to create website.
And finally already function, but only on product page for the love button.
But not send to wishlist page on member are. It say Onitemready is not function.
I already modify the name the same with the tutorial. and i copy paste the code from the template but i replace the name like on my page.
Here is the code on product page :
//-------------Imports-------------//
// 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’;
//-------------Global Variables-------------//
// Current product.
let product;
// Current user.
let user = wixUsers.currentUser;
//-------------Page Setup-------------//
$w.onReady( async function () {
// Get the currently displayed product.
product = await $w(‘#productPage1’).getProduct();
// Check if the current product is in the wishlist and act accordingly.
checkWishlist();
// Set the action that occurs when the login message is clicked to be the loginMessageClick() function.
$w(‘#loginMessage’).onClick(loginMessageClick);
});
// Check if the current product is in the wishlist and act accordingly.
async function checkWishlist() {
// If the current user is logged in:
if (wixUsers.currentUser.loggedIn) {
// Query the “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 “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 “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 “Wishlist” collection.
await wixData.remove(“Wishlist”, wishListResult.items[0]._id)
}
}
and here is the code on Wishlist page :
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
//-------------Imports-------------//
// 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 “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 “Wishlist” collection.
await wixData.remove(‘Wishlist’, id);
// Reload the wishlist to reflect the removed item.
loadWishlist();
}
}
