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 | 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.
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",
}
}
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.)
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.
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 yourmanifest.json
:
"builders": {
"styles": "1.x"
}
- Create a file called
vtex.minicart.css
inside thestyles/css
folder. Add your custom styles:
.container {
margin-top: 10px;
}
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 |
You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.
To execute our tests go to react/
folder and run yarn test