Renders the shopping cart: product lines with quantities, applied coupons, totals rows (sub-total, taxes, shipping, grand total). Used on the cart page and for mini-cart dropdowns.

Usage

<div data-v-component-cart>
  <div data-v-cart-product>
    <span data-v-cart-product-name></span>
    <span data-v-cart-product-quantity></span>
    <span data-v-cart-product-price_formatted></span>
  </div>

  <div data-v-cart-total>
    <span data-v-cart-total-title></span>
    <span data-v-cart-total-value_formatted></span>
  </div>

  <span data-v-cart-total_formatted></span>
</div>

Settings

  • data-v-cart_id - load a specific cart (accepts encrypted ids); defaults to the session cart
  • data-v-language_id / data-v-site_id - language and site, default to current

Item fields

  • Cart summary: data-v-cart-total_items, data-v-cart-total, data-v-cart-total_formatted
  • Each line inside data-v-cart-product: product fields (name, price, price_formatted, quantity, image, url, remove_url, …)
  • Each totals row inside data-v-cart-total: title, value, value_formatted
  • Each coupon inside data-v-cart-coupon: code, name, value