Wix Help Center
    Home
  1. Creating your site
  2. Advanced features
  3. Velo by Wix
  4. Wix Stores with Velo

Velo Tutorial: Adding a Wishlist to a Wix Stores Site

Visit the Velo by Wix website to onboard and continue learning.
This article describes how you can use Velo to add wishlist functionality to a Wix Stores site. Throughout this article we're going to use this site to illustrate the process. You can open the site in the Editor to work with the template. We're going to explain how we set up the sample site and the code we added to make it work.

You can also use the built-in wishlist feature in the Wix Editor. Learn more here.

Overview

In our site we added the following:
  • A My Wishlist page to the Member Pages group with a repeater that displays the member's wishlist. It also has a group of elements that are displayed if the member's wishlist is empty.
  • A products-wishlist collection with 2 fields: 
    • User Id: This stores the ID of the currently signed-in member.
    • Product: This is a reference field that points to the product the member added to their wishlist.
  • Icons on the Shop Product Page that show if a product is already in the member's wishlist. We also use these icons as a toggle to let the member add or remove the item from their wishlist. 
Then we added code to do the following:
  • When the Product Page loads, check to see if the current product is associated with the member in the products-wishlist collection and display the corresponding icon.
  • Set up the icons so that when they are clicked they either add or remove the product from the products-wishlist collection.
  • When the My Wishlist page loads, query the products-wishlist collection for all the products associated with the current member and display them in the repeater. Hide the repeater if there are no associated products.
  • Prompt the user to log in if they aren't and they try to add or remove an item from their wishlist.

Step 1: Set up the Site

For this example, you'll need some products stored in a collection. We added Wix Stores to our site, which automatically adds a Stores/Products collection to our site, but you can also create your own collection of products without Wix Stores.
Note
You may need to save or publish the site and refresh your browser to view Stores collections in the Database.
This is what some of the data in our Products collection looks like:
We also added a products-wishlist collection. Click the Databases button in the Velo Sidebar, then hover over Content Collections and click the plus icon to create the collection.
The products-wishlist collection has two fields:
  1. Product: A reference to the product the member added.
  2. User Id: The ID of the user who adds a product to their wishlist.
The products-wishlist collection maintains all the wishlist information for all the site members. Each item in the collection associates a member's ID with a product they selected to add to their wishlist. With that information in the collection, we can then query the collection for a member's ID and the results represent the member's wishlist products.

In our example we made User Id the Primary field and deleted the Title field from the collection.
You can see a copy of the data from the Collections, Products, and products-wishlist collection here. The Products and Collections collections are created automatically when you have a site with Wix Stores. Because these collections are read-only, you must use the Store Manager to create your product list. 

Step 2: Set up the Shop Product Page

On the Shop Product Page we added:
  • A group of elements that prompt the user to log in if they need to.
  • Heart icons that tell the user if the product is in their wishlist. The icons also work as a toggle to add or remove the item from their wishlist.
    Note: In the image below the two icons are displayed side-by-side. On the actual site, they're overlapping and the code controls which is displayed. 

Step 3: Create and Set Up the My Wishlist Page

To set up the My Wishlist page, complete the following steps:
  1. Click the Pages button, then Member Pages, then + Add a Member Page.
  1. Make the My Wishlist page a Private Page.
  1. Then rename the new member page by accessing the page's settings. Change the name to My Wishlist.
  1. Access and edit the My Wishlist page by clicking the Page Code button in the Velo Sidebar, then My Wishlist in the Member's Area (members) dropdown.
On the My Wishlist page we added:
  • A container box that contains a text box and a button labelled Go Shopping. The container box is set to "Collapsed on load" in the Properties & Events panel and is only displayed if the member's wishlist is empty or if they aren't signed in.
  • A repeater that will display the wishlist. Because the container box is set to be collapsed if there's a wishlist, the repeater moves up to take its space when there is a wishlist.

Step 4: Create the Add to Wishlist Function on the Product Page

On the Product Page we start by importing the modules we need to prompt users to log in and to work with our collections in code. Then we create a function that builds and inserts the item into the products-wishlist collection. This function is called by the click event handler for when the user clicks the empty heart icon. We'll define that function in the next step.
Note:
Throughout this example we use the async/await JavaScript functionality.
1import wixData from 'wix-data';
2import wixUsers from 'wix-users';
3
4let product;
5let user = wixUsers.currentUser;
6
7$w.onReady(async function () {
8 product = await $w('#productPage1').getProduct();
9});
10
11async function addToWishlist() {
12    let wishListItem = {
13        product: product._id,
14        userId: user.id
15    };
16
17    let result = await wixData.insert("Wishlist", wishListItem);
18}

Understanding the Code

Lines 1-2: Import the modules we need to work with Wix Data and Wix Users libraries.
Line 4: Define the product variable.
Line 5: Set the user variable to the current user.
Lines 7-9: Get the current product from the Product page.
Lines 11-15: Create the addToWishList function. Build the wishListItem object. This object contains the product ID for the current product and the ID of the current user.
Line 17: Insert the wishListItem object to the products-wishlist collection.

Identifiers you may need to change based on your site's elements

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • #productPage1
  • wishlist

Step 5: Create the notInWishList_click Function on the Product Page

notInWishList_click is the function that runs when the empty heart icon is clicked. It hides the empty heart icon, displays the full icon, and then calls the addToWishList function we defined in step 4 that handles adding the product to the member's wishlist.

To create the function, on the Product Page, select the empty heart icon in the Editor and then use the Properties & Events panel to add a click event to it. Where it says "//Add your code for this event here:" add the following code:
1export function notInWishList_click(event, $w) {
2    if (user.loggedIn) {
3        addToWishlist();        
4        $w('#notInWishList').hide('fade', {duration: 100});
5        $w('#inWishList').show('fade', {duration: 100});
6    }
7    else
8        $w('#loginMessage').show();
9}

Understanding the Code

Line 2: Check to see if the current user is logged in.
Line 3: If the user is logged in, call addToWishList, which adds the current product to the user's wishlist.
Lines 4-5: Hide the empty heart and show the full heart, indicating to the user that the product is now in their wishlist.
Lines 7-8: Prompt the user to log in if they aren't.

Identifiers you may need to change based on your site's collections

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • #notInWishList
  • #inWishList
  • #loginMessage

Step 6: Create the removeFromWishList Function on the Product Page

On the Product page we create a function that removes the item from the products-wishlist collection. This function is called by the click event handler for when the user clicks the full heart icon. We'll define that function in the next step. We'll also show and hide the appropriate icons, similar to what we did in step 5.
1async function removeFromWishlist() {
2    let wishListResult = await wixData.query("products-wishlist")
3        .eq("product", product._id)
4        .eq("userId", user.id)
5        .find();
6
7    if (wishListResult.length > 0) {
8        $w('#notInWishList').show('fade', {duration: 100});
9        $w('#inWishList').hide('fade', {duration: 100});
10        await wixData.remove("Wishlist",                                                         wishListResult.items[0]._id)
11    }
12}

Understanding the Code

Lines 2-5: Run a query on the products-wishlist collection for the current product for the signed in member.
Line 7: Check that the item exists in products-wishlist for the current member (results of the query are greater than 0).
Lines 8-9: Display the empty heart icon and hide the full heart icon.
Line 10: Call wixData.remove to remove the current product from the products-wishlist collection.

Identifiers you may need to change based on your site's collections

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • wishlist
  • product
  • userID
  • #notInWishlist
  • #inwishlist

Step 7: Create the inWishList_click Function on the Product Page

inWishList_click is the function that runs when the user clicks the full heart icon and wants to remove a product from their wishlist. It checks to see that the user is logged in and then calls the removeFromWishlist function we defined in step 6.

To create the function, select the full heart icon in the Editor and then use the Properties & Events panel to add a click event to it. Where it says "//Add your code for this event here:" add the following code:
1export function inWishList_click(event, $w) {
2    if (user.loggedIn)
3        removeFromWishlist();
4}

Understanding the Code

Line 2: Check if the current user is logged in.
Line 3: Call removeFromWishlist to remove the current product from the member's wishlist and change the displayed icons.

There are no identifiers you would need to change here to make this code work on your site.

Step 8: Create the checkWishlist Function on the Product Page

checkWishlist is the function that runs when the Product Page loads. It checks to see if the current product is in the member's wishlist. Here also the appropriate icon is displayed depending on the product's wishlist status. If the current user isn't logged in, the empty heart icon is also displayed.

First, add the code below to the Product Page.
1async function checkWishlist() {
2    if (wixUsers.currentUser.loggedIn) {
3        let wishListResult = await wixData.query("products-wishlist")
4            .eq("product", product._id)
5            .eq("userId", user.id)
6            .find();
7
8        if(wishListResult.items.length > 0) {
9            $w('#inWishList').show('fade', {duration: 100});
10        }
11        else {
12            $w('#notInWishList').show('fade', {duration: 100}); 
13        }
14    }
15    else {
16        $w('#notInWishList').show('fade', {duration: 100});
17    }
18}

Understanding the Code

Line 2: Check that the current user is logged in.
Lines 3-6: Query the products-wishlist collection for the current product and the signed in member.
Line 8: Check that the product exists in the wishlist for the current member (results of the query are greater than 0).
Lines 9-12: If the product is in the member's wishlist, display the full heart icon. If not, display the empty heart icon.
Lines 15-16: If the current user isn't logged in, display the empty heart icon.

Then, add this code to the onReady function for the Product Page where it says //TODO: write your page related code here...
1checkWishlist();

Identifiers you may need to change based on your site's elements

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • wishlist
  • product
  • userId
  • #inWishList
  • #notInWishList

Step 9: Create the loginMessageClick Function on the Product Page

When we set up our site we added a group of elements to the Product Page that prompt the user to log in if they aren't already. Now we need to create the loginMessageClick function that displays the login prompt if the user clicks an element in that group.

The loginMessageClick function displays the login prompt to the user, and we want it to run when a user clicks anywhere in the group. We can't use the Properties & Events panel to add a click event handler to a group, so instead we'll create that event handler directly in the code. We'll create this event handler in the onReady function for the Product Page.

First, add the following to the Product Page's code:
1async function loginMessageClick() {
2    let options = {"mode": "login"};
3    $w('#loginMessage').hide();
4    await wixUsers.promptLogin(options);
5}

Understanding the Code

Line 2: Create an options object that will be sent to the promptLogin function. This sets the login to prompt the user to log in as opposed to sign up.
Line 3: Hide the loginMessage group of elements.
Line 4: Call wixUsers.promptLogin with the options object.

Then, add this code to the onReady function for the Product Page where it says //TODO: write your page related code here...
1$w('#loginMessage').onClick(loginMessageClick);

Understanding the Code

Line 1: Create an onClick event for the loginMessage group of elements that calls the loginMessageClick function.

Identifiers you may need to change based on your site's elements

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • #loginMessage

Step 10: Create the loadWishlist Function on the My Wishlist Page

When we set up our site we added a My Wishlist page to the Member Pages group of pages. This page has a repeater to display their wishlist when it has products, and a group of elements that displays a message to the user if their wishlist is empty.

First let's import the modules we need to work with Wix Data, Wix Users, and Wix Location libraries. This code needs to be at the top of the page.
1import wixData from 'wix-data';
2import wixUsers from 'wix-users';
3import wixLocation from 'wix-location';
Now we need to add the code to that page that will either display the wishlist in the repeater or the empty wishlist message.
1async function loadWishlist(){
2    let user = wixUsers.currentUser;
3    let wishlistResult = await wixData.query("products-wishlist")
4        .eq("userId", user.id)
5        .include('product')
6        .find()
7    
8    if (wishlistResult.length > 0) {
9        $w("#wishlist").expand();
10        $w("#emptyWishlist").collapse();
11        $w("#wishlist").data = wishlistResult.items;
12        $w('#wishlist').onItemReady(myItemReady);
13    }
14    else {
15        $w("#wishlist").collapse();
16        $w("#emptyWishlist").expand();
17    }   
18}

Understanding the Code

Lines 3-6: Query the products-wishlist collection for all the products in the member's wishlist. Use .include to include the referenced product.
Line 8: Check if there are products in the member's wishlist (query results are greater than 0).
Lines 9-10: Display the repeater and hide the empty wishlist message.
Line 11: Set the data for the repeater to be the results of the query.
Line 12: Set the onItemReady function for the repeater to myItemReady. We'll define that function in step 11.
Line 14-16: If the query on the products-wishlist collection returns no results, hide the repeater and display the empty wishlist message.

Identifiers you may need to change based on your site's elements

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • wishlist
  • userId
  • product
  • #wishlist
  • #emptyWishlist
  • #loginMessage

Step 11: Create the myItemReady Function on the My Wishlist Page

myItemReady is the onItemReady function for the repeater. It's the function that runs when a new repeater item is created, which we call in line 11 of the code in step 10.

Add the following code to the My Wishlist page:
1function myItemReady($w, wishlistItem){
2    let product = wishlistItem.product;
3    $w('#productImage').src = product.mainMedia;
4    $w('#name').text = product.name;
5    $w('#price').text = product.formattedPrice;
6    $w('#productImage').onClick(()=>{
7        wixLocation.to(product.productPageUrl);
8    });
9    $w('#removeItem').onClick(removeItem(wishlistItem._id));
10}

Understanding the Code

Line 2: Get the current product from the wishlist for the repeater item.
Lines 3-5: Bind each element in the repeater to the corresponding data for the product.
Lines 6-7: Set the onClick property of the productImage element to open the product page for the specific product.
Line 9: Add a click event handler for the removeItem icon for the product displayed in the repeater item, to call the removeItem function. This will remove the item from the member's wishlist if they click the removeItem icon. We'll define this function in the next step.

Identifiers you may need to change based on your site's elements

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • #productImage
  • #name
  • #price
  • #removeItem

Step 12: Create the removeItem Function on the My Wishlist Page

removeItem removes an item from a member's wishlist. It's the function that runs when a user clicks the 'X' for a product in their wishlist, which we call in line 9 of the code in step 11.

1function removeItem(id) {
2    return async function() {
3        await wixData.remove('products-wishlist', id);
4        loadWishlist();
5    }
6}

Understanding the Code

Line 3: Remove the current product from the member's wishlist.
Line 4: Call loadWishlist to reload the wishlist after the product was removed.

Identifiers you may need to change based on your site's elements

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • wishlist

Step 13: Display the Member's Wishlist or Hide It for Non-Members

If the site visitor is signed in we need to call loadwishList to display their wishlist, if they have one. If they aren't signed in, we hide the wishlist and display the empty wishlist message.

We'll add this code to the onReady function of the My Wishlist page.

1$w.onReady(async function () {
2    if(user.loggedIn) {
3        loadWishlist();
4    }
5    else {
6        $w('#wishlist').collapse();
7        $w('#emptyWishlist').expand();
8    }
9});

Understanding the Code

Lines 2-3: Check to see that the user is logged in and, if they are, call loadWishlist to load their wishlist. Because loadwishlist is returned by the onReady function, the function stops running here.
Lines 5-7: Only if the user isn't logged in, hide the wishlist and display the empty wishlist message.

Identifiers you may need to change based on your site's elements

If you want to use this exact scenario and code in your site, you may need to modify these items to match the ones on your site:
  • #wishList
  • #emptyWishlist

Next Steps

Did this help?

|
Related Content
Working with Velo Examples
Hire a Velo Web Developer
Need a little extra help with your site? Hire a developer from the Wix Marketplace to build and deploy advanced web applications.
Get Started