Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Building an E-Commerce Store - Adding a Checkout Chapter 11

Creating an Order Checkout page

Our OrderCheckout page will have a similar makeup to the OrderConfirmation page -

however, in a real shop, this would be the page before payment. This page would allow the

user to fill in their billing and delivery details before navigating to the payment page. Copy

the OrderConfirmation page and update the title and info text:

const OrderCheckout = {

name: 'OrderCheckout',

template: '<div>;

<h1>Order Confirmation</h1>

<p>Please check the items below and fill in your details to complete

your order</p>

<list-purchases />

</div>',

components: {

ListPurchases

}

};

Below the component, create a form with several fields so we can

collect the billing and delivery name and addresses. For this example, just collect the name,

first line of the address, and ZIP code:

template: '<div>

<h1>Order Confirmation</h1>

<p>Please check the items below and fill in your details to complete your

order</p>

<list-purchases />

<form>

<fieldset>

<h2>Billing Details</h2>

<label for="billingName">Name:</label>

<input type="text" id="billingName">

<label for="billingAddress">Address:</label>

<input type="text" id="billingAddress">

<label for="billingZipcode">Post code/Zip code:</label>

<input type="text" id="billingZipcode">

</fieldset>

<fieldset>

<h2>Delivery Details</h2>

<label for="deliveryName">Name:</label>

<input type="text" id="deliveryName">

<label for="deliveryAddress">Address:</label>