Let’s Place Order and See Order History in E-commerce app using Vue
Tags: ecommerce, frontend, backend, vue
Published: 2021-04-23 15:36:35



### In this tutorial, we will learn how to display the order history of the user

![](https://cdn-images-1.medium.com/max/2160/1*teArq6e7QmhUMO84KJSysw.png)

## Introduction

We are building an e-commerce app from scratch using Vue.js in the frontend and Java with Springboot for the backend. You can check out the first frontend tutorial of this series here.
{% youtube _r8dXk0jj7E %}
We will be building an order feature which is a continuation of our [previous ](https://medium.com/dev-genius/lets-add-a-checkout-feature-in-vue-js-for-our-ecommerce-app-84b5fc2df17a)tutorial.
[**Let’s add a Checkout Feature in Vue.js for Our Ecommerce App**](https://medium.com/dev-genius/lets-add-a-checkout-feature-in-vue-js-for-our-ecommerce-app-84b5fc2df17a)

You can find the complete code at [Github](https://github.com/webtutsplus/ecommerce-vuejs).

## Live Demo

[https://infallible-swartz-b50174.netlify.app/](https://infallible-swartz-b50174.netlify.app/)

![All Orders Page](https://cdn-images-1.medium.com/max/3802/1*oEH9vlHsurqMPqO_W-HOvg.png)

![Order Details Page](https://cdn-images-1.medium.com/max/3798/1*_fWevOfgTJynMfPiX81pgQ.png)

## Pre-requisites

 1. Knowledge of **Vuejs**

 2. [Visual Studio Code](https://code.visualstudio.com/) **—**open-source (Recommended)

 3. A good browser **—**(Chrome — recommended)

## API we will be using

![](https://cdn-images-1.medium.com/max/NaN/1*eE9F0umd_l2_IQKc-NLmjQ.png)

For explanation and implementation of these APIs please refer to this tutorial.
[**Let’s add the Place Order feature to our E-commerce app using Spring Boot**](https://medium.com/javarevisited/lets-add-the-place-order-feature-to-our-e-commerce-app-using-spring-boot-1a16925be0bf)

## Project Structure

![](https://cdn-images-1.medium.com/max/2000/1*AiQnd9NtIXxS2E_7f_D0eA.png)

## The flow of the tutorial
>  Displaying order history
>  Displaying details for specific order

## Now let’s begin with coding

So in the checkout [tutorial](https://medium.com/dev-genius/lets-add-a-checkout-feature-in-vue-js-for-our-ecommerce-app-84b5fc2df17a), we implemented the Vue component Success in which we call the add order API like this
{% gist https://gist.github.com/SudhanshuGulhane/3bf6a7f364a9c5efdbf3a6f4c3d770c5.js %}
And then we redirect the user to the order component where we display the order history.

## Order Component (displaying order history)

![](https://cdn-images-1.medium.com/max/3802/1*oEH9vlHsurqMPqO_W-HOvg.png)

So let’s create the Ordercomponent in the src/views/Orders folder and register the route in the index.js file of the src/router folder.

You may refer to [this](https://github.com/webtutsplus/ecommerce-vuejs/blob/master/src/router/index.js).

First, we declare the data variables to store data from the backend API response.

orders: to store the response data

len: to store the number of orders in the user’s order history

orderList: an array to store the list of orders

totalCost: to store the total Price of the order

orderdate: to store the date at which the order was placed

We need a method that will call the backend API for listing the orders which we implemented in the previous tutorial. So, create a method and call the API using Axios get method.
{% gist https://gist.github.com/SudhanshuGulhane/52ee7b36c78ef83b3c5f784a9e0f303b.js %}
![](https://cdn-images-1.medium.com/max/2000/1*Vw8JyrAgK3ExvCd6pxraDg.png)

In the response, we get the created date in the java format but we just need the format like yyyy/mm/dd hence we took the substring and stored it in the orderdate data variable.

Also, we do not store the details of order items in the order list instead we just store the id of that order.
>  Why do we do this?

The idea is to display the details of that order if and only if the user clicks on that order. So as a route param we pass the id so that we display the items in that order according to the id received through the route parameter.
>  Now when do we call this method?

As soon as the order component is mounted we call this method.

    mounted() {
    this.token = localStorage.getItem("token")
    this.listOrders()
    }

Now in the same component, in the template tag, we write the HTML part.
{% gist https://gist.github.com/SudhanshuGulhane/262749e9b8f75ef73ea59807d4003354.js %}
Now we display the order history (using the v-if directive) if and only if we do not get the response data as null.

***Why will the response data be null?*** Suppose a user(not logged) tries to fetch the order history, the null token will be passed to the API and hence we won’t get any response data to display.

If we get a response then we iterate through the orders using the v-for directive. And for each order, we implement a router link that will redirect the user to the details of that order according to the order id passed.

Refer complete code for this component [here](https://github.com/webtutsplus/ecommerce-vuejs/blob/master/src/views/Orders/Order.vue).

## Order Item component (for displaying the details of a specific order)

![](https://cdn-images-1.medium.com/max/3798/1*_fWevOfgTJynMfPiX81pgQ.png)

In the same folder we are working on, create a Vue component named OrderItem . This component will be rendered when a user clicks on a particular order.

So firstly register this route like this:

    {
    path:'/order/:id',
    name:'OrderItemView',
    component:OrderItemView
    }

Now we require one more component to actually display the products of that order. So in this component, we render that component let’s name it as OrderItems to which we the two props:

* id: this is the same id we passed from the Order component as a route parameter

* baseURL: the URL for our backend API

We obtain the orderID from the route parameter.
{% gist https://gist.github.com/SudhanshuGulhane/63bebce8c68328e7b169c0caba6bffad.js %}
## Displaying the order details

Now since we render OrderItems component to display the order details the next step is to implement OrderItems component.

So in the src/components folder create Order folder and in that create OrderItems Vue component.

First of all, we will catch the props we received like this:

    props:[“orderID”,”baseURL”]

Now let’s create data variables.

* lengthofOrderItems: number pf,

* orderProducts: store the products of an order

* products: store the response data

* token: a token of the user
{% gist https://gist.github.com/shivamag00/de12485c41ee28b82cdb79f9d9835547.js %}
Now we display the products of the order whose order id is the same as the one we receive as the route parameter.

As evident from the above-mentioned code, we call the backend API for listing that specific order by passing the order id to the API URL.
> # One important point to be noted here is, we receive the parameter in string datatype but in the response, we have id in integer datatype. Hence we convert the string id into integer id and then start the comparison.

Once we retreive the specific order using the API, we iterate through orderItems array and the product array.

![the response body of get orders method](https://cdn-images-1.medium.com/max/2000/1*5nOVy6gER3S_7gxP2HSHhQ.png)

![](https://cdn-images-1.medium.com/max/3798/1*_fWevOfgTJynMfPiX81pgQ.png)

Now for displaying the HTML part, we need to loop through the order items array using v-for and then display each specification like image, product name, quantity, the price per unit, the total price of that product.
{% gist https://gist.github.com/SudhanshuGulhane/472b30221f04e7ae6033df278f646f6e.js %}
## Congratulations!

You have now successfully implemented the feature for displaying the order history and details for a specific order.

## Read All the Articles in this Ecommerce Series

 1. [Let’s Develop an E-Commerce Application From Scratch Using Java and Spring](https://medium.com/javarevisited/lets-develop-an-ecommerce-application-from-scratch-using-java-and-spring-6dfac6ce5a9f?sk=6ea3ba5161a0885d7a4072f70c3015ef)

 2. [Let’s Link Products With Category for our E-Commerce App](https://medium.com/javascript-in-plain-english/lets-link-product-with-category-for-our-ecommerce-app-28100657a848?sk=13401554153f82f2dfc748c18bf9870c)

 3. [Let’s Develop File Upload Service From Scratch Using Java and Spring Boot](https://medium.com/javarevisited/how-to-develop-file-upload-service-from-scratch-using-java-and-springboot-3a442f4636d5?sk=d885b2f163887e5e524f90beef31ba43)

 4. [Let’s Create a WishList for Our e-Commerce App using Java and Spring Boot](https://medium.com/javarevisited/lets-add-wishlist-feature-for-our-e-commerce-app-using-java-and-spring-boot-1402c0b6f1e8?sk=d2b2f9871ad6c446d63d676eff451445)

 5. [Let’s Create a Frontend for our eCommerce App with Vue.js](https://javascript.plainenglish.io/lets-create-vue-js-frontend-for-products-in-our-e-commerce-app-14cc8c3459c8?sk=53e033c1ed4dffa268f9b2410bb5ca70)

 6. [Let’s Add Products for our eCommerce App Using JavaScript](https://medium.com/webtutsplus/lets-add-products-for-our-e-commerce-app-using-javascript-829f36b8571a?sk=c74f95390911a3e35ecdb7ed5270644b)

 7. [Android UI for E-Commerce User Profile Backend](https://medium.com/javarevisited/android-app-for-spring-backend-68f39dca8b72?sk=7f0bf103b62b710f30b9c9606ba44bc0)

 8. [Lets’ Add a Shopping Cart feature for our E-Commerce App using Vuejs](https://javascript.plainenglish.io/lets-add-a-shopping-cart-feature-in-vue-js-for-our-ecommerce-app-ae0cc65374ff)

 9. [Let’s add a Checkout feature in Spring Boot for our Ecommerce App](https://medium.com/javarevisited/lets-add-a-checkout-feature-in-spring-boot-for-our-ecommerce-app-72b12a7f3648)

 10. [Let’s add a Checkout Feature in Vue.js for Our Ecommerce App](https://medium.com/dev-genius/lets-add-a-checkout-feature-in-vue-js-for-our-ecommerce-app-84b5fc2df17a)

 11. [Let’s add the Place Order feature to our E-commerce app using Spring Boot](https://medium.com/javarevisited/lets-add-the-place-order-feature-to-our-e-commerce-app-using-spring-boot-1a16925be0bf)