Minicart by vtex

This page is about version 2.48.0 of the app, which is not the most recent version. The latest stable version is 2.68.0.

${"base64":" ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square"}}$

:information_source: Minicart v1 block has been deprecated in favor of Minicart v2 which can be customized using the blocks defined by Product List and Checkout Summary. If you’re still using the former version, you can find its documentation here: Minicart v1 documentation

The VTEX Minicart is a block that displays a summary list of all items added by customers in their shopping cart. Its data is fetched from the Checkout OrderForm API.

{"base64":" ","img":{"width":2880,"height":1575,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1703446,"url":"https://user-images.githubusercontent.com/52087100/73321194-7f477e80-4220-11ea-844b-f24d1c10363c.gif"}}

Configuration

Import the Minicart app to your theme's dependencies in the manifest.json as shown below:


_10"dependencies": {
_10  "vtex.minicart": "2.x"
_10}

Add the minicart.v2 block to your header. For example:


_13"header.full": {
_13   "blocks": ["header-layout.desktop", "header-layout.mobile"]
_13 },
_13
_13 "header-layout.desktop": {
_13   "children": [
_13     "header-row#1-desktop",
_13   ]
_13 },
_13
_13 "header-row#1-desktop": {
_13   "children": ["minicart.v2"],
_13 },

:warning: The Minicart v2 will only effectively function if the store uses the Add To Cart Button instead of the Buy Button in blocks such as the Shelf and the Product Details Page. This is because Minicart v2 was built based on an indirect dependency with the Add To Cart button. That means that any other shopping buttons, as the Buy Button, are unable to render Minicart v2, even if it was correctly configured in the code. `

Prop name	Type	Description	Default value
`variation`	`enum`	Minicart behavior when rendered. Possible values are: `popup` (it pops up on the Homepage in a minitab window) , `drawer` (it is rendered through a side bar) or `link` (when clicked on, it redirects the user to the Checkout page).	`drawer`
`drawerSlideDirection`	`enum`	Slide direction for the `drawer` Minicart opening. Possible values are: `rightToLeft` or `leftToRight`).	`rightToLeft`
`linkVariationUrl`	`string`	Link associated to the `link` Minicart.	`undefined`
`maxDrawerWidth`	`number`	Maximum width (in pixels) for the `drawer` Minicart when opened.	`440`
`openOnHover`	`boolean`	Whether the `popup` minicart should open when the user hovers over it.	`false`
`quantityDisplay`	`enum`	Shows the quantity badge even when the amount of products in the cart is zero. Possible values are: `always` or `not-empty` or `never`).	`not-empty`
`backdropMode`	`enum`	Controls whether the backdrop should be displayed when the `drawer` Minicart is opened or not. Possible values are: `visible` (rendering the backdrop) or `none` (rendering the `drawer` without backdrop).	`none`

Advanced Configuration

According to the minicart.v2 composition, it can be highly customizable using other blocks. Currently, its default implementation is as follows:


_69// This is the default blocks implementation for the minicart-layout
_69{
_69  "minicart.v2": {
_69    "children": ["minicart-base-content"]
_69  },
_69  "minicart-base-content": {
_69    "blocks": ["minicart-empty-state"],
_69    "children": ["minicart-product-list", "flex-layout.row#minicart-footer"]
_69  },
_69  "flex-layout.row#minicart-footer": {
_69    "props": {
_69      "blockClass": "minicart-footer"
_69    },
_69    "children": ["flex-layout.col#minicart-footer"]
_69  },
_69  "flex-layout.col#minicart-footer": {
_69    "children": ["minicart-summary", "minicart-checkout-button"]
_69  },
_69  "minicart-product-list": {
_69    "blocks": ["product-list#minicart"]
_69  },
_69  "product-list#minicart": {
_69    "blocks": ["product-list-content-mobile"]
_69  },
_69  "minicart-summary": {
_69    "blocks": ["checkout-summary.compact#minicart"]
_69  },
_69
_69  "checkout-summary.compact#minicart": {
_69    "children": ["summary-totalizers#minicart"],
_69    "props": {
_69      "totalizersToShow": ["Items", "Discounts"]
_69    }
_69  },
_69  "summary-totalizers#minicart": {
_69    "props": {
_69      "showTotal": true,
_69      "showDeliveryTotal": false
_69    }
_69  },
_69  "minicart-empty-state": {
_69    "children": ["flex-layout.row#empty-state"]
_69  },
_69  "flex-layout.row#empty-state": {
_69    "children": ["flex-layout.col#empty-state"]
_69  },
_69  "flex-layout.col#empty-state": {
_69    "children": [
_69      "icon-cart#minicart-empty-state",
_69      "rich-text#minicart-default-empty-state"
_69    ],
_69    "props": {
_69      "horizontalAlign": "center",
_69      "verticalAlign": "middle",
_69      "rowGap": 5
_69    }
_69  },
_69  "icon-cart#minicart-empty-state": {
_69    "props": {
_69      "size": 64,
_69      "blockClass": "minicart-empty-state"
_69    }
_69  },
_69  "rich-text#minicart-default-empty-state": {
_69    "props": {
_69      "text": "Your cart is empty."
_69    }
_69  }
_69}

By default implementation we mean that whenever you use minicart.v2 in your store you're actually using the json above behind the scenes.

Therefore, in order to customize the Minicart configuration, you can simply copy the code above and change it as you wish.

For further information on how to configure each of the blocks used to compose minicart.v2, check out Product List and Checkout Summary.

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`arrowUp`
`minicartCheckoutButton`
`minicartContainer`
`minicartContentContainer`
`minicartFooter`
`minicartIconContainer`
`minicartProductListContainer`
`minicartQuantityBadge`
`minicartSideBarContentWrapper`
`minicartTitle`
`minicartWrapperContainer`
`popupChildrenContainer`
`popupContentContainer`
`popupWrapper`