Building an E-Commerce Store - Adding a Checkout Chapter 11Building the Order process and ListProducts component
For the three steps of the Checkout, we are going to be utilizing the same component in all
three: the ListProducts component. In the OrderCheckout, and OrderConfirmation
components, it will be in a fixed, uneditable state, whereas when it is in the OrderBasket
component, the user needs to be able to update quantities and remove items if desired.
As we're going to be working at the Checkout, we need products to exist in the basket
array. To save us having to find products and add them to the basket every time we refresh
the app, we can ensure there are some products in the basket array by hardcoding an
array in the store.
To achieve this, navigate to a few products and add them to your basket. Ensure there is a
good selection of products and quantities for testing. Next, open your JavaScript console in
the browser and enter the following command:
console.log(JSON.stringify(store.state.basket));This will output a string of your products array. Copy this and paste it into your
store—replacing the basket array:
state: {
products: {},
categories: {},categoryHome: {
title: 'Welcome to the Shop',
handle: 'home',
products: [
...
]
},basket: [{"sku":...}]
},On page load, your Cart count in the header should update to be the correct number of
items you added.