Renders the checkout summary: cart products, item count and grand total. For the selectable payment and shipping methods use the checkout-payment and checkout-shipping components on the same page.

Usage

<div data-v-component-checkout>
  <span data-v-checkout-total_items></span>
  <span data-v-checkout-total></span>
</div>

<div data-v-component-checkout-payment>
  <div data-v-payment>
    <span data-v-payment-title></span>
  </div>
</div>

<div data-v-component-checkout-shipping>
  <div data-v-shipping>
    <span data-v-shipping-title></span>
    <span data-v-shipping-cost></span>
  </div>
</div>

Settings

  • Checkout: data-v-language_id / data-v-site_id - language and site, default to current
  • Payment/shipping lists: data-v-checkout - set to load region-aware methods from the current checkout session