Let’s Place Order and See Order History in E-commerce app using Vue

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

Nil Madhab
Apr 20 · 6 min read

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.

Live Demo

https://infallible-swartz-b50174.netlify.app/

All Orders Page
Order Details Page

Pre-requisites

  1. Knowledge of Vuejs
  2. Visual Studio Code open-source (Recommended)
  3. A good browser (Chrome — recommended)

The flow of the tutorial

Displaying order history

Displaying details for specific order

Now let’s begin with coding

So in the checkout tutorial, we implemented the Vue component Success in which we call the add order API like this

And then we redirect the user to the order component where we display the order history.

Order Component (displaying order history)

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.

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.

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.

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.

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

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.

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

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

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.

webtutsplus

Best web and mobile development tutorials

Thanks to Sunil Sandhu

Nil Madhab

Written by

Developer @Booking.com | ex: Samsung, OYO | IIT Kharagpur | Entrepreneur, founder of simplecoding.dev | connect me https://twitter.com/Nilmadhabmondal

webtutsplus

Find the best tutorials and courses for the web, mobile. Learn in Java, Python, Sprintboot , Android, Node.Js, SQL, AWS, Docker & more.

Nil Madhab

Written by

Developer @Booking.com | ex: Samsung, OYO | IIT Kharagpur | Entrepreneur, founder of simplecoding.dev | connect me https://twitter.com/Nilmadhabmondal

webtutsplus

Find the best tutorials and courses for the web, mobile. Learn in Java, Python, Sprintboot , Android, Node.Js, SQL, AWS, Docker & more.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store