VTEX Minicart

Description

The VTEX minicart app is a store component that shows a list of all items that a customer added in our Checkout OrderForm API, and this app is used by store theme.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Release schedule

Release	Status	Initial Release	Maintenance LTS Start	End-of-life	Store Compatibility
[2.x]	Current Release	2018-11-26			2.x
[1.x]	Maintenance LTS	2018-08-17	2018-11-26	March 2019	1.x

See our LTS policy for more information.

Usage
- Blocks API
  - Configuration
- Styles API
  - CSS namespaces
Troubleshooting
Tests

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

We add the minicart as a block in our Store Header.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

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

Then, add minicart block into your app theme as we do in our Store theme app.

Now, you can change the behavior of the minicart block that is in the store header. See an example of how to configure:

"minicart": {
  "blocks": [
    "product-summary"
  ],
  "props": {
    "type": "popup",
    "showDiscount": true,
    "labelMiniCartEmpty": "",
    "labelButtonFinishShopping": "Ir para o checkout",
  }
}

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within minicart and describes if they are required or optional.

  "minicart": {
    "required": [
      "product-summary"
    ],
    "component": "index"
  }
}

The minicart has as a required block the product-summary. So, any minicart block implementation created must add a product-summary as a block that is inside of minicart. (Similarly, product-summary has its own inner block structure that can be configured. There is a link to its API in the next section.)

Configuration

Through the Storefront, you can change the minicart's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop name	Type	Description	Default value
`type`	`Enum`	Define Minicart mode. (values: 'popup' or 'sidebar')	popup
`showDiscount`	`Boolean`	Shows the total discount of your cart	true
`labelMiniCartEmpty`	`String`	Text that is displayed when the cart is empty	`Your cart is empty`
`labelButtonFinishShopping`	`String`	Text displayed in the finish shopping button	`Go to checkout`

Also, you can configure the product summary that is defined on minicart. See here the Product Summary API.

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

Add the styles builder to your manifest.json:

  "builders": {
    "styles": "1.x"
  }

Create a file called vtex.minicart.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 10px;
}

CSS namespaces

Below, we describe the namespaces that are defined in the minicart.

Class name	Description	Component Source
`container`	The main container of minicart	index
`label`	Minicart icon label	index
`badge`	Minicart badge with the product quantity on it	index
`arrowUp`	Popup box arrow	Popup
`box`	The main container of the popup	Popup
`sidebarHeader`	Minicart sidebar header container	Sidebar
`sidebar`	Minicart sidebar main container	Sidebar
`sidebarOpen`	Active when the sidebar is opened	Sidebar
`content`	The container for the Minicart contents	MinicartContent
`contentSmall`	The container for the minicart contents when on desktop size	MinicartContent
`contentLarge`	The container for the minicart contents when on mobile size	MinicartContent
`contentDiscount`	The total discount on the minicart footer	MinicartFooter
`contentPrice`	Total price of the products on the minicart footer	MinicartFooter
`contentFooter`	The minicart footer main container	MinicartFooter

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Tests

To execute our tests go to react/ folder and run yarn test

micas06gua / minicart