Help with removeItem async function in Wishlist

Ask the community
, , ,
1

Hello,

I’m following the Wishlist tutorial at https://support.wix.com/en/article/velo-tutorial-adding-a-wishlist-to-a-wix-stores-site .

My website is for a restaurant that has menu items which logged-in users should be able to save to a wishlist. The modified tutorial code works great for everything except removing an item from the Wishlist page.

Here’s the code for my Wishlist page:

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

$w.onReady(function () {
	loadWishlist();
});

async function loadWishlist(){
    let user = wixUsers.currentUser;
    
    let wishlistResult = await wixData.query("Wishlist")
     .eq("userId", user.id)
     .include('menuItem')
     .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 menuItem = wishlistItem.menuItem;
      $w('#image').src = menuItem.photo;
      $w('#title').text = menuItem.title;
      $w('#month').text = menuItem.month;
      $w('#removeItem').onClick(removeItem(menuItem._id));
     }
     
     function removeItem(id) {
      return async function() {
       await wixData.remove('Wishlist', id); // THIS NEVER RUNS
       loadWishlist();                       // THIS NEVER RUNS
       //console.log("removeItem with ID:", id);  // RUNS IF UNCOMMENTED
      }
     }

I understand that the myItemReady function is adding an onClick event to each #removeItem element. I know that this event is firing because I’ve added console logging code to the async function at the end, however, I cannot get the await wixData.remove() line to run OR the loadWishlist() line to do anything.

Can you help me get this to work?

Thanks, Jason

2

I changed the function removeItem to see what result the await remove returns:

function removeItem(id) {
    return async function() {
        console.log("--------- Removing Item with ID:", id)
        await wixData.remove('Wishlist', id)
            .then((result) => { 
            if (result) {
                console.log("*** Removed Item:", id, "***");
            } else {
                console.log("*** Remove result is null! ***");
            }
        })
        loadWishlist();
    }
}

The result is:
--------- Removing Item with ID: 6b35b1cc-36c4-408a-923b-9339cfd36633
*** Remove result is null! ***

This ID is correct, but the remove returns null.

Why would this be?

Thanks!

3

Still looking for help, if anyone has any suggestions. Thanks!