11

Building an E-Commerce Store

- Adding a Checkout

Over the last couple of chapters, we have been creating an e-commerce store. So far, we
have created a product page that allows us to view the images and product variations,

which may be size or style. We have also created a category page with filters and
pagination—including a homepage category page that features specific, selected products.

Our users can browse and filter products and view more information about a specific
product. We are now going to:

Build the functionality to allow the user to add and remove products to their

basket

Allow a user to Checkout

Add an Order Confirmation page

As a reminder—we won't be taking any billing details but we will make an Order

Confirmation screen.

Creating the basket array placeholder

To help us persist the products in the basket throughout the app, we are going to be storing

the user's selected products in the Vuex store. This will be in the form of an array of objects.

Each object will contain several key pieces of information that will allow us to display the
products in the basket without having to query the Vuex store each time. It also allows us

to store details about the current state of the product page—remembering the image

updates when a variant is selected.