> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Adding a Wishlist to a Wix Stores Site
## Article: Adding a Wishlist to a Wix Stores Site
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-e-commerce-stores/adding-a-wishlist-to-a-wix-stores-site.md
## Article Content:
# 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](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md).
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](https://www.wix.com/code-examples/wishlist-vw) to illustrate the process. You can open the site in the Wix Editor to work with the [template](https://editor.wix.com/html/editor/web/renderer/new?siteId=62ddd72a-7d89-44de-8ce4-ddf15e414b56&metaSiteId=5f8ae7eb-e6fc-4f07-bd91-384921eed30e). 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](https://support.wix.com/en/article/wix-stores-adding-and-setting-up-a-wishlist).
### 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.
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](https://github.com/jeffreya/WixCode-RelatedProducts-data). 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:
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.
>**Note:**
> Throughout this example we use the [async/await](https://codeburst.io/javascript-es-2017-learn-async-await-by-example-48acc58bad65) JavaScript functionality.
```javascript
import wixData from 'wix-data';
import wixMembersFrontend from 'wix-members-frontend';
let product;
let member = await wixMembersFrontend.currentMember.getMember();
$w.onReady(async function () {
product = await $w('#productPage1').getProduct();
});
async function addToWishlist() {
let wishListItem = {
product: product._id,
userId: member._id
};
let result = await wixData.insert("Wishlist", wishListItem);
}
```
#### Understanding the Code
**Lines 1-2**: Import the modules we need to work with [Wix Data](https://www.wix.com/code/reference/wix-data.html) and [Wix Members Frontend](https://www.wix.com/velo/reference/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:
```javascript
export function notInWishList_click(event, $w) {
if (wixMembersFrontend.authentication.loggedIn()) {
addToWishlist();
$w('#notInWishList').hide('fade', {duration: 100});
$w('#inWishList').show('fade', {duration: 100});
}
else
$w('#loginMessage').show();
}
```
#### 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.
```javascript
async function removeFromWishlist() {
let wishListResult = await wixData.query("products-wishlist")
.eq("product", product._id)
.eq("userId", member._id)
.find();
if (wishListResult.length > 0) {
$w('#notInWishList').show('fade', {duration: 100});
$w('#inWishList').hide('fade', {duration: 100});
await wixData.remove("Wishlist", wishListResult.items[0]._id)
}
}
```
#### 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:
```javascript
export function inWishList_click(event, $w) {
if (wixMembersFrontend.authentication.loggedIn())
removeFromWishlist();
}
```
#### 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.
```javascript
async function checkWishlist() {
if (wixMembersFrontend.authentication.loggedIn()) {
let wishListResult = await wixData.query("products-wishlist")
.eq("product", product._id)
.eq("userId", member._id)
.find();
if(wishListResult.items.length > 0) {
$w('#inWishList').show('fade', {duration: 100});
}
else {
$w('#notInWishList').show('fade', {duration: 100});
}
}
else {
$w('#notInWishList').show('fade', {duration: 100});
}
}
```
#### 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...
```javascript
checkWishlist();
```
#### 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:
```javascript
async function loginMessageClick() {
let options = {"mode": "login"};
$w('#loginMessage').hide();
await wixMembersFrontend.authentication.promptLogin(options);
}
```
#### 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...
```javascript
$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 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.
```javascript
import wixData from 'wix-data';
import wixMembersFrontend from 'wix-members-frontend';
import wixLocationFrontend from 'wix-location-frontend';
```
Now we need to add the code to that page that will either display the wishlist in the repeater or the empty wishlist message.
```javascript
async function loadWishlist(){
let member = await wixMembersFrontend.currentMember.getMember();
let wishlistResult = await wixData.query("products-wishlist")
.eq("userId", member._id)
.include('product')
.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();
}
}
```
#### 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](https://www.wix.com/code/reference/$w.Repeater.html#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:
```javascript
function myItemReady($w, wishlistItem){
let product = wishlistItem.product;
$w('#productImage').src = product.mainMedia;
$w('#name').text = product.name;
$w('#price').text = product.formattedPrice;
$w('#productImage').onClick(()=>{
wixLocationFrontend.to(product.productPageUrl);
});
$w('#removeItem').onClick(removeItem(wishlistItem._id));
}
```
#### 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.
```javascript
function removeItem(id) {
return async function() {
await wixData.remove('products-wishlist', id);
loadWishlist();
}
}
```
#### 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.
```javascript
$w.onReady(async function () {
if(wixMembersFrontend.authentication.loggedIn()) {
loadWishlist();
}
else {
$w('#wishlist').collapse();
$w('#emptyWishlist').expand();
}
});
```
#### 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](https://editor.wix.com/html/editor/web/renderer/new?siteId=62ddd72a-7d89-44de-8ce4-ddf15e414b56&metaSiteId=5f8ae7eb-e6fc-4f07-bd91-384921eed30e) 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](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-e-commerce-stores/adding-a-related-products-area-to-a-wix-store-product-page.md)
* [Adding Multiple Items to the Cart in a Wix Stores Site](https://support.wix.com/en/article/adding-multiple-items-to-the-cart-in-a-wix-stores-site)
* [Adding a Gift Quiz to a Wix Stores Site](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-e-commerce-stores/adding-ratings-and-reviews-to-a-wix-stores-site.md)
* [Adding a Product Configurator to a Wix Stores Site](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-e-commerce-stores/adding-a-product-configurator-to-a-wix-stores-site.md)
* [Adding Ratings and Reviews to a Wix Stores Site](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-e-commerce-stores/adding-ratings-and-reviews-to-a-wix-stores-site.md) 
