Creating an eCommerce Frontend with Vue.js | Part 3: Wishlist feature
Tags: webdev, showdev, javascript, programming
Published: 2021-01-25 18:23:14

**Part 3: creating Wishlist feature for E-Commerce App**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6roy3fu95wj96l980jgi.jpg)

In the [previous tutorial](https://nilmadhab.medium.com/1402c0b6f1e8), we added the Wishlist API to our Spring Boot backend. Now, let’s learn how to use this API in our front-end.
## Live Demo

You can see the Wishlist API (integrated with Vue.Js) live in action at the link mentioned below. You will be able to experience this feature after you click on the wishlist option in the main menu.
[Webtutsplus E-Commerce App by remotedevs.org](http://remotedevs.org:8000/Signin)
## Pre-Requisites

 1. Knowledge about Vue.Js & Vue.Js CLI
 2. JavaScript
 3. Code Editor (like Microsoft Visual Code)
 4. A good browser (like Google Chrome)

This tutorial is part of our series — [Frontend with Vue.js/Javascript](https://nilmadhab.medium.com/). We will **extend the code which we developed in the previous tutorials** in this series. So, if you have any doubt regarding anything that we developed earlier, you can read about it in the corresponding tutorial in the series.
## Project Structure

If you have not read the previous tutorials in our **Front-end with Vue.Js** series, don’t worry. This section is specifically for you. As we will use the project structure that we created in the previous tutorials, we intend to describe the structure here before we begin working on the Wishlist feature. This will help you in understanding the code in a better way.

Following is the project structure:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yxwsbhlmd0vzrp5gbp6o.png)
We will now describe the following directories:-

* **public** — contains the main HTML file of our project
* **src/assets** — stores the media files like images, logos, etc.
* **src/components** — stores all the reusable components of our project. These components are not unique to some specific route.
* **src/router** — contains the index.js file which keeps a record of all the routes
* **src/views** — stores all the router components. These are the components that are rendered as per the current route.

Apart from this, we have some important files too

* **App.vue** — it is the root component of our project
* **main.js** — it is the starting point of our project. Here we import our root component **App.vue**, our router file **index.js**, and **createApp** method. After this, we mount our root component to the DOM using the following statement:

## API Design

We designed the WishList API for our backend in the previous tutorial. You can try this API using the following Swagger link.
[Swagger UI
WishList API
remotedevs.org](http://remotedevs.org:8080/api/swagger-ui.html#/wish-list-controller)
If you have not read the previous tutorial, do not worry. We will now describe this API so that you can feel comfortable when we use the API in our front-end.

Following are the API end-points to

 1. Get a wishlist
 2. Add a product to the wishlist
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vrwux6m5raxfe6l0ultb.png)

**Note:** To use the API, we must pass a **token instead of User Id.** This is because we had integrated a token-based authentication in our e-commerce application. Token is automatically created and sent to the front-end as soon as the user signs in.

Also, in the body of the POST method, we will have to send the id of the product so that the given product can be added to the corresponding user’s wishlist. Hence, the body of the POST request should look like the following
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mb4csoqq8uni5xaf537s.png)
Now, the response of the POST request should send the list of all products in the wishlist with the necessary details. Hence, the response should look like the following
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/15osl3fph79ggf3e9nno.png)
## Front-End Design

Before we begin to write code, it is very important that we have a very clear picture of what we are going to do. So, let’s discuss this.

Let’s first discuss **accessing the wishlist.**

* We will add a Wishlist button on our homepage so that everyone can access the Wishlist easily
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hp72524q5kqu587oy5mr.png)
* If the user has not Signed In, then, clicking on the Wishlist Button will take them to SignIn page.
* If the user has already Signed In, then clicking on the WishList Button will redirect the user to a page where the user can see the wishlist.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v920xt4lzmiihuxux3r9.png)
Now, let’s discuss adding a product to the wishlist

* When the user opens the **Products page**, the user sees all the products. Now, if the user clicks on the product, there is a Product Description page. We will add **Add to Wishlist** button here below `Add to Cart` button, in this page.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a977pb0ndagkmhuwq4tl.png)
* When the user clicks on the Add to Wishlist button, the button should turn Green and should display Added to Wishlist
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j0ndrlt48lp6j38dvwc2.png)
**Note:-**
To keep things simple, we are not going to deal with the following issue:-

1. After the user has clicked on **Added to Wishlist Button** on the Product Details page shown above, that particular product gets added to the Wishlist and the button turns green. This is okay.
2. But now if the user reloads the page, the **Green Button will turn back to the original button**. This is because we have no way to know if the product is already present in the wishlist or not.

If you do not understand the above issue, do not worry. You will understand it later when you begin using the front-end.
## Let’s Code

We will now begin to write code.
## Creating the Wishlist Page

Let’s begin with creating the wishlist page where the user can see all the products added to his wishlist. It is simple.

* Create a new file called `Wishlist.vue` in the `views/Product` directory.
* We already have the `Products.vue` in the `views/Product` directory which displays all the products. Since, we learned how to develop this page in a previous tutorial in the series, we will use the code of this page and change it a little. So copy & paste the complete code `Products.vue` and paste it in `Wishist.vue`
* Remove the `products` from the `props` array since we will fetch the products using the Wishlist API. Define a variable `products : null` in the data method. We will store the products in this variable after we fetch it from the API
* To use the API, we first need to get the token issued to the user during Sign In and stored in the local storage (We implemented this feature in an earlier tutorial in the series). We can get the token from the local storage using the `mounted()` method. Also, create a variable `token:null` in the data method. We will store the token in this variable
* Following is the code of `Wishlist.vue` till this stage.
{% gist https://gist.github.com/shivamag00/d6c9e3a32924047c6b72735d315984a2.js %}
* Last Step — Now it is time to fetch the products from the API. We will use the `axios` library to send a request to the API. We will create a method called fetchWishlist() and call it in the mounted() method so that the products are automatically fetched as soon as the page is loaded.
* Following is the complete code of Wishlist.vue
{% gist https://gist.github.com/shivamag00/218597042756c77c8f1abc7f760e9cb5.js %}
## Adding the `WishList` Button on HomePage

Let’s now add the Wishlist button to the menu in the NavBar.

Before we do that, let’s create a route to the wishlist page. Open the `index.js` file from the `router`/ directory. Import `Wishlist.vue` as `Wishlist` and then create a route to the wishlist at the end. Following is the code of index.js after adding the Wishlist route
{% gist https://gist.github.com/shivamag00/64c12c834c22f18f93555a4f0e175c05.js %}
Now, lets add the Wishlist button to the NavBar menu. To do this we will use the `<router-link>` element of Vue.Js. We will make changes to the file `Navbar.vue` present in the `components` directory.

Also as we discussed earlier, on clicking the Wishlist option in the menu, the user should be redirected to the SignIn page if he is not logged in.

Following is the code of `Navbar.vue` after adding the Wishlist Button.
{% gist https://gist.github.com/shivamag00/cd668fdccaaa922eac9f87d9521bce8e.js %}
You should now see the following NavBar.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ist6p7w7sf26l3oxv3tt.png)
## Add to Wishlist Button

Now, let's add the `Add to Wishlist` button to each product. Also, if the product has been successfully added to the wishlist, this button should turn green and display `Added to Wishlist `.

We will modify the `ShowDetails.vue` file in the `views/product` directory.

* We will create a CSS class with the property `background-color:green` . We will also define a boolean variable `isAddedToWishlist` and change the color using this variable.
* We will define a new variable `wishlistString:”Add to wishlist”` in the data property
* We will define a new method `addToWishList(product.id)` in the methods property to send the POST request to the API to add the product in the user’s wishlist. This method will be called when the user clicks the button.
* We will define a button in the template with the following properties :`class=”{product_added_wishlist: isAddedToWishlist}” , @click=”addToWishList(product.id)” `. We will display the string defined by the variable `{{wishlistString}}` in the button
	Following is the complete code of `ShowDetails.vue`
{% gist https://gist.github.com/shivamag00/688c9e81cbef5bdfb361ac20aed344b5.js %}
The following will be seen on the Product Details page. You will see the Add to Wishlist button below the Add to Cart button.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w7tbttz438gctohvth14.png)

## Congratulations

You have now successfully added the Wishlist feature in your Vue.Js frontend
## Learn by Contributing

If you wish to contribute to our eCommerce-Vue.Js front-end, you clone [this](https://github.com/webtutsplus/ecommerce-vuejs) Github repository and work on the following features related to the wishlist

* Currently, if the user reloads the page after adding the product to the wishlist, the green button vanishes and the grey `Add to Wishlist` button comes up again. Try to fix this such that even after reloading a page the button stays green indicating that the product is already on the wishlist.

After you have implemented the feature, send us a PR. We will review and merge it into our master branch