Velo Tutorial: Adding a Wishlist to a Wix Stores Site

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 Wix 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 any 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 visitor 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.

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:

• Product: A reference to the product the member added.
• User Id: The ID of the member 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 visitor to log in if they need to.
• Heart icons that tell the member if the product is in their wishlist. The icons also work as a toggle to add or remove the item from their wishlist.

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.

   

2. Make the My Wishlist page a Private Page.

   

3. Then rename the new member page by accessing the page's settings. Change the name to My Wishlist.

   

4. 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 visitors 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 member clicks the empty heart icon. We'll define that function in the next step.

Understanding the Code

Lines 1-2: Import the modules we need to work with Wix Data and Wix Members Frontend libraries.
Line 4: Define the product variable.
Line 5: Set the member variable to the current member.
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 member currently logged in.
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:

Understanding the Code

Line 2: Check to see if the current visitor is logged in.
Line 3: If a member is logged in, call addToWishList, which adds the current product to the member's wishlist.
Lines 4-5: Hide the empty heart and show the full heart, indicating to the member that the product is now in their wishlist.
Lines 7-8: Prompt the visitor 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 member 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.

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 member clicks the full heart icon and wants to remove a product from their wishlist. It checks to see that a member 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:

Understanding the Code

Line 2: Check if the current visitor 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 visitor isn't logged in, the empty heart icon is also displayed.

First, add the code below to the Product Page.

Understanding the Code

Line 2: Check that the current visitor 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 visitor 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...

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 visitor to log in if they aren't already. Now we need to create the loginMessageClick function that displays the login prompt if the visitor clicks an element in that group.

The loginMessageClick function displays the login prompt to the visitor, and we want it to run when a visitor 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:

Understanding the Code

Line 2: Create an options object that will be sent to the promptLogin function. This sets the login to prompt the visitor to log in as opposed to sign up.
Line 3: Hide the loginMessage group of elements.
Line 4: Call wixMembersFrontend.authentication.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...

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 member if their wishlist is empty.

First let's import the modules we need to work with the Wix Data, Wix Members Frontend, and Wix Location libraries. This code needs to be at the top of the page.

Now we need to add the code to that page that will either display the wishlist in the repeater or the empty wishlist message.

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:

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 member clicks the 'X' for a product in their wishlist, which we call in line 9 of the code in step 11.

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.

Understanding the Code

Lines 2-3: Check to see that a member 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 visitor 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

• Open this example in the Wix Editor to work with the template.
• Publish the site and refresh your browser so the Stores collections appear in the Database.
• Try other Velo Store examples:
  • Adding a Related Products Area to a Wix Store Product Page
  • Adding Multiple Items to the Cart in a Wix Stores Site
  • Adding a Gift Quiz to a Wix Stores Site
  • Adding a Product Configurator to a Wix Stores Site
  • Adding Ratings and Reviews to a Wix Stores Site