The Cart Component displays the contents of the user’s shopping cart, including products, applied coupons, totals, taxes, and the grand total.
It can be used on cart pages, mini‑cart dropdowns, sidebars, or checkout summaries.

To activate it, add:

data-v-component-cart

Component Options

Add options as HTML attributes using the data-v-* syntax.

Option Attribute Description Default
cart_id data-v-cart_id Load a specific cart by ID, it can also be an encrypted cart id. If omitted, the cart is loaded from the user session or created automatically. Auto‑detect
language_id data-v-language_id Language for product names and descriptions Current language
site_id data-v-site_id Site ID for loading store settings (currency, locale, taxes) Current site

Component Properties

The component exposes cart‑level properties and repeatable lists for products, totals, and coupons.

Cart Summary Properties

Property Attribute Description
total_items data-v-cart-total_items Number of products in the cart
total data-v-cart-total Grand total (numeric)
total_formatted data-v-cart-total_formatted Grand total formatted with currency
total_weight data-v-cart-total_weight Total weight of all products
cart_id data-v-cart-cart_id Cart ID
encrypted_cart_id data-v-cart-encrypted_cart_id Encrypted ID for restoring carts via cookies
weight_unit data-v-cart-weight_unit Weight unit (e.g., kg)
length_unit data-v-cart-length_unit Length unit (e.g., cm, m)

Products List

Each product is wrapped in an element marked with:

data-v-cart-product

You can use any of the following attributes inside it:

Product Properties

Property Attribute Description
name data-v-cart-product-name Product name
slug data-v-cart-product-slug Product slug
content data-v-cart-product-content Full description
excerpt data-v-cart-product-excerpt Short description
url data-v-cart-product-url Product detail page URL
image data-v-cart-product-image Featured image
images data-v-cart-product-images Gallery images
quantity data-v-cart-product-quantity Quantity in cart
price data-v-cart-product-price Price without tax
price_tax data-v-cart-product-price_tax Price including tax
price_formatted data-v-cart-product-price_formatted Price formatted with currency
price_tax_formatted data-v-cart-product-price_tax_formatted Price including tax, formatted
old_price data-v-cart-product-old_price Price before discount
old_price_tax data-v-cart-product-old_price_tax Old price including tax
old_price_tax_formatted data-v-cart-product-old_price_tax_formatted Old price formatted
stock_quantity data-v-cart-product-stock_quantity Units in stock
stock_status data-v-cart-product-stock_status_id Stock status
product_id data-v-cart-product-product_id Product ID
product_variant_id data-v-cart-product-product_variant_id Variant ID
has_variants data-v-cart-product-has_variants Whether product has variants
add_cart_url data-v-cart-product-add_cart_url Add‑to‑cart URL
buy_url data-v-cart-product-buy_url Direct buy URL
remove_url data-v-cart-product-remove_url Remove from cart URL
manufacturer_name data-v-cart-product-manufacturer_name Manufacturer
vendor_name data-v-cart-product-vendor_name Vendor
subscription_name data-v-cart-product-subscription_name Subscription plan name
created_at data-v-cart-product-created_at Creation date
updated_at data-v-cart-product-updated_at Last update
pubDate data-v-cart-product-pubDate Publish date (RSS format)
modDate data-v-cart-product-modDate Modification date (RSS format)

Product options, variants, and subscription details are also available as nested repeatables.

Totals List

Each total row is wrapped in:

data-v-cart-total
Property Attribute Description
namespace data-v-total-namespace Group: tax, coupon, payment, shipping, total, etc.
key data-v-total-key Unique key (e.g., tax.1, coupon.3, sub_total)
title data-v-cart-total-title Label shown to the user
value data-v-cart-total-value Numeric value
value_formatted data-v-cart-total-value_formatted Value formatted with currency
text data-v-cart-total-text Optional explanatory text

Coupons List

Each coupon is wrapped in:

data-v-cart-coupon
Property Attribute Description
coupon_id data-v-cart-coupon-coupon_id Coupon ID
code data-v-cart-coupon-code Coupon code entered by user
name data-v-cart-coupon-name Coupon name
type data-v-cart-coupon-type P = percentage, F = fixed amount
value data-v-cart-coupon-value Discount value
free_shipping data-v-cart-coupon-free_shipping 1 = free shipping
status data-v-cart-coupon-status 1 = active
from_date data-v-cart-coupon-from_date Valid from
to_date data-v-cart-coupon-to_date Valid until
created_at data-v-cart-coupon-created_at Creation date
updated_at data-v-cart-coupon-updated_at Last update

HTML Example

<table class="products-table">
	<tbody>

		<tr data-v-cart-product>
			<td>
				<a data-v-cart-product-url>
					<img data-v-cart-product-image width="50" alt="Product name">
				</a>
			</td>

			<td>
				<a data-v-cart-product-url>
					<span data-v-cart-product-name></span>
				</a>

				<span data-v-cart-product-quantity></span> × 
				<span data-v-cart-product-price_tax_formatted></span>

				<div data-v-if="product.option">
					<div data-v-product-option>
						<span data-v-product-option-option></span>:
						<span data-v-product-option-name></span>
						<span data-v-if="value.price > 0">
							(<span data-v-product-option-price></span>)
						</span>
					</div>
				</div>

				<div data-v-if="product.subscription">
					<span>Subscription plan:</span>
					<span data-v-cart-product-subscription_name></span>
				</div>
			</td>

			<td>
				<a class="btn-remove" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove_url>
					Remove
				</a>
			</td>
		</tr>

		<tr data-v-if-not="cart.total_items">
			<td colspan="100">Empty cart</td>
		</tr>

	</tbody>
</table>

<table class="cart-total">
  <tfoot>

	  <tr data-v-cart-total>
		 <td colspan="5">
			<small data-v-cart-total-title></small>:
		 </td>
		 <td>
			<span data-v-cart-total-text data-v-if="total.text"></span>
			<span data-v-cart-total-value_formatted></span>
		 </td>
	  </tr>

	  <tr>
		 <td colspan="5">Total:</td>
		 <td data-v-cart-total_formatted></td>
	  </tr>

   </tfoot>
</table>