USE AT YOUR OWN RISK

This is an ongoing project. We do not guarantee any results after installation.

This app is available to stores using vtex.edition-store@4.x Edition App. To check which Edition App is installed on your account, run vtex edition get. If it's a different Edition, please open a ticket to VTEX Support asking for the installation of the vtex.edition-store@4.x Edition App.

Checkout Cart compiles all the necessary apps to deliver a full solution for your store's shopping cart.

It renders:

• The Product List app, which displays the list of products included in the cart by the store customer, covering the capability of removing or changing the number of products included in the cart.
• The Checkout Summary app, which provides information regarding the total price of the purchase and coupon options.
• The Shipping Calculator app, which provides delivery options.

The data consumed by the Checkout Cart is fetched from the Checkout OrderForm API.

1. Import the vtex.checkout-cart app to your theme's dependencies in the manifest.json as shown below:

2. Add the title block to the Checkout template. For example:

The following props are available to configure the behavior of the Checkout Cart app according to your scenario.

Prop name	Type	Description	Default value
itemCountMode	enum	Defines the behavior of the number of products in the cart. This value is displayed in the string next to "Cart" (e.g., "1 product"). Possible values are: total (the string displays the number of items added to the cart), distinct (only displays the number of different products added to the cart), totalAvailable (displays the number of available items added to the cart), and distinctAvailable (displays the number of different and available products added to the cart).	distinct

To configure other behaviors, check the Product List, Shipping Calculator and Checkout Summary documentations.

It's possible to overwrite or translate the following messages using the Messages Builder.

Message ID	Default value
store/cart.continueShopping	Continue shopping
store/cart.title	Cart
store/cart.items	({itemsQuantity, plural, one {# product} other {# products}})
store/cart.emptyState.title	The cart is empty
store/cart.emptyState.message	Add products by navigating through categories or by searching for them.
store/cart.emptyState.button	Choose products
store/cart.checkout	Checkout
store/cart.removeToast	Product {name} was removed from the cart
store/cart.priceChangedToast	The price of the product was changed

Checkout Cart is one of the apps that constitute Checkout IO. For more information about this app, follow this link to check its documentation.

By default, the Checkout Cart app is composed of the following blocks, declared in the /store/blocks.json file:

• checkout-cart-single-col: Cart template used for desktop and tablet devices.
• checkout-cart-two-cols: Cart template used for mobile devices.
• empty-state: Cart template, as pictured below, used when the shopping cart is empty.

Notice that it's possible to change these layouts by modifying the files stored in the /store/blocks folder, publishing and releasing your own app. However, keep in mind that, VTEX bears no responsibility with any of these modifications, nor provide support for them.

VTEX does not bear any responsibility with apps that the vendor is different from vtex, nor provide support for them.