Velo Tutorial: Adding a Wishlist to a Wix Stores Site
Note: This tutorial and its steps are based on a Wix Editor site. If you'd prefer to use Wix Studio, learn more about working with the code panel in Wix Studio.
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.
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:
- Product: A reference to the product the member added.
- User Id: The ID of the member who adds a product to their wishlist.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/ef9147e1-f2d9-4773-9a14-7bc889c76065/2020/10/27/3e76bbc6-138a-4441-9166-65f53021f108/46681675-d705-4243-bfc7-756fde1d7b38.png)
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.
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:
-
Click the Pages button, then Member Pages, then + Add a Member Page.
-
Make the My Wishlist page a Private Page.
-
Then rename the new member page by accessing the page's settings. Change the name to My Wishlist.
-
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.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/11e10e4f-b84d-4136-a5a9-6109fab0b7d7/2018/06/25/7ea0bc65-16b8-4f8c-b78e-2c0d13fa40fe.png)
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.
Note: Throughout this example we use the async/await JavaScript functionality.
1
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:
1
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.
1
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:
1
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.
1
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...
1
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:
1
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...
1
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.
1
Now we need to add the code to that page that will either display the wishlist in the repeater or the empty wishlist message.
1
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:
1
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.
1
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
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: