Mastering TypeScript/

...

/

Component Details: ShoppingCart and Checkout

Component Details: ShoppingCart and Checkout

Learn how to create a Vue component for a shopping cart with a toggleable checkout feature.

We'll cover the following...

The ShoppingCart component receives the collection of items in the cart and renders either the shopping cart screen or the checkout screen. The option to show either screen is controlled by a single boolean value, which is either on or off.

Template section of the ShoppingCart component

Let’s take a look at the template section of the ShoppingCart.vue component first:

Press + to interact
<template>
  <div class="container">
    <div 
        v-if="!isCheckingOut"
    >
    &nbsp;
    <h2>Shopping Cart</h2>
    <hr />
    <div 
      v-bind:key="item.id"
      v-for="item in collection.items"
    >
      <ItemView 
        :item="item"
        @on-remove="onItemRemoved"
      ></ItemView>
    </div>
    <button 
      class="btn btn-primary"
      v-on:click="checkout"
      >Checkout</button>
    </div>
    <div v-if="isCheckingOut">
        &nbsp;
    <h2>Check Out</h2>
    <hr />
    <CheckoutView 
      :basket="collection"
    ></CheckoutView>
    <button 
      class="btn btn-secondary"
      v-on:click="back()"
    >Back</button>
    &nbsp;
    <button
      class="btn btn-primary"
    >Place Order</button>
    </div>
  </div>
</template>

  • Our template starts with a <div> element with the Bootstrap class of "container".

  • We then have a <div> element on ...