📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Minicart

All Contributors

⚠️ Minicart 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 app is a block that displays a list of all items added by customers in their minicart. Its data is fetched from the Checkout OrderForm API.

Screen Shot 2019-12-18 at 14 06 37

Configuration

  1. Import the minicart's app to your theme's dependencies in the manifest.json, for example:
"dependencies": {
  "vtex.minicart": "2.x"
}
  1. Add the minicart.v2 block to your header. For example:
"header.full": {
   "blocks": ["header-layout.desktop", "header-layout.mobile"]
 },

 "header-layout.desktop": {
   "children": [
     "header-row#1-desktop",
   ]
 },

 "header-row#1-desktop": {
   "children": ["minicart.v2"],
 },
Prop nameTypeDescriptionDefault value
variationEnumDefine Minicart variation. (values: 'popup', 'drawer' or 'link')'sidebar'
openOnHoverBooleanWhether the popup minicart should open when the user hovers over it.false
linkVariationUrlStringThe link associated to the 'link' variation of the Minicart.false
drawerSlideDirectionEnumControls the slide direction for the 'sidebar' variation. (values: 'rightToLeft' or 'leftToRight')rightToLeft
maxDrawerWidthNumberThe maximum width in pixels for the open sidebar Minicart.440

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
minicartWrapperContainer
minicartContainer
minicartContentContainer
minicartProductListContainer
minicartTitle
minicartFooter
minicartSideBarContentWrapper
minicartIconContainer
minicartQuantityBadge
popupWrapper
popupContentContainer
arrowUp
popupChildrenContainer

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!