I need a litle help with my code.
https://support.wix.com/en/article/corvid-adding-a-wishlist-to-a-wix-stores-site
The Wish List is working almost perfectly. However, when a user saves your product and changes the page with the navigation menu, the “heart icon” (when the product is on the wish list) remains with the previous product. It is as if only images and texts were updated and not the entire page. Only with F5 to change which product actually refers to the page. What should i do ?
I believe this is the problem:
product = await $w('#productPage1').getProduct();
navegation link:
$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();
});
// 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 "products-wishlist" collection to find if the product was already added to the user's wishlist.
let wishListResult = await wixData.query("products-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_1(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_1(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('#textoDesejos').text ="Faça o Login";
}
// 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("products-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("products-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("products-wishlist", wishListResult.items[0]._id)
}
}
Well the first thing that needs changing is the code on that page as it is outdated compared to the actual code used in the tutorial in the Corvid Examples itself.
Although one bonus is that the old tutorial page is actually linked to the new Corvid Example page.
So @brett-haralson this page here.
https://support.wix.com/en/article/corvid-tutorial-adding-a-wishlist-to-a-wix-stores-site
Needs to be updated so that the code matches in the article itself with the code from the tutorial here.
https://www.wix.com/corvid/example/wishlist
Just to confirm, have you got the top part of your code there above the page onReady function?
Plus, also please use the new code from the actual tutorial that you can open up in the Wix Editor yourself with all the code already setup.
//-------------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 "products-wishlist" collection to find if the product was already added to the user's wishlist.
let wishListResult = await wixData.query("products-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("products-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("products-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("products-wishlist", wishListResult.items[0]._id)
}
}
Also, note that there is code for the My Wishlist page too.
//-------------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 "products-wishlist" collection for all wishlist items belonging to the current user.
let wishlistResult = await wixData.query("products-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('products-wishlist', id);
// Reload the wishlist to reflect the removed item.
loadWishlist();
}
}
Thanks for the comments. Just to confirm, my wish list works the same as in the example. The difference is that I have a navigation menu and related products, the example page is a basic page. When a user changes the page through these links, the next product page is loaded with the clicked heart icon, referring to the item saved in the wish list on the previous page. I can confirm with “console.log (product)”. Only refreshing the page corrects the error.
I’ll try the updated code. thanks.
