Creating an eCommerce Frontend with Vue.js | Part 3: Wishlist feature

Part 3: creating Wishlist feature for E-Commerce App

In the previous tutorial, 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

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. 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:

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
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

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

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

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
• 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.
  
  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.
  

• When the user clicks on the Add to Wishlist button, the button should turn Green and should display Added to Wishlist
  
  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.
• 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
  ## 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

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.

You should now see the following NavBar.

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
  The following will be seen on the Product Details page. You will see the Add to Wishlist button below the Add to Cart button.

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 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