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
- Knowledge about Vue.Js & Vue.Js CLI
- JavaScript
- Code Editor (like Microsoft Visual Code)
- 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
- Get a wishlist
- 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 wishlistWhen 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:-
- 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.
- 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 theviews/Product
directory. - We already have the
Products.vue
in theviews/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 codeProducts.vue
and paste it inWishist.vue
- Remove the
products
from theprops
array since we will fetch the products using the Wishlist API. Define a variableproducts : 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 variabletoken: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
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 variableisAddedToWishlist
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 ofShowDetails.vue
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
Top comments (0)