VTEX Minicart

All Contributors

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

ReleaseStatusInitial ReleaseMaintenance LTS StartEnd-of-lifeStore Compatibility
2.xCurrent Release2018-11-262.x
1.xMaintenance LTS2018-08-172018-11-26March 20191.x

See our LTS policy for more information.

Table of Contents

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"
    ],
    "allowed": [
      "sandbox"
    ],
    "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 nameTypeDescriptionDefault value
typeEnumDefine Minicart mode. (values: 'popup' or 'sidebar')popup
showDiscountBooleanShows the total discount of your cartfalse
labelMiniCartEmptyStringText that is displayed when the cart is emptyYour cart is empty
linkButtonFinishShoppingStringLink to redirect after clicking in the finishe shopping button/checkout/#/cart
labelButtonFinishShoppingStringText displayed in the finish shopping buttonGo to checkout
iconClassesStringThe minicart's icon classes''
iconLabelStringThe minicart's icon labelundefined
labelClassesStringThe minicart's label classesgray
hideContentBooleanIf the minicart should not show its contents once its icon is clickedfalse
showShippingCostBooleanIf the shipping cost show be displayed on cartfalse
showTotalItemsQtyBooleanIf the cart should show the total quantity of items or just the quantity of different items in the cartfalse
showPriceBooleanIf the total price of the items in the cart should be displayed at its sidefalse

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

Additionally, you may add a sandbox block on the footer of the minicart, for additional custom information.

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.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  }
  1. 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 nameDescriptionComponent Source
containerThe main container of minicartindex
labelMinicart icon labelindex
badgeMinicart badge with the product quantity on itindex
arrowUpPopup box arrowPopup
boxThe main container of the popupPopup
sidebarHeaderMinicart sidebar header containerSidebar
sidebarMinicart sidebar main containerSidebar
sidebarOpenActive when the sidebar is openedSidebar
contentThe container for the Minicart contentsMinicartContent
contentSmallThe container for the minicart contents when on desktop sizeMinicartContent
contentLargeThe container for the minicart contents when on mobile sizeMinicartContent
contentDiscountThe total discount on the minicart footerMinicartFooter
contentPriceTotal price of the products on the minicart footerMinicartFooter
contentFooterThe minicart footer main containerMinicartFooter
itemContainerThe container of a single item in the minicartMinicartContent
itemDeleteIconThe container of the delete item icon next to each item in the minicartMinicartContent
itemDeleteIconLoaderThe loading state for the delete item icon next to each item in the minicartMinicartContent
popupContentContainerThe main container for content inside the popup variant of the minicartPopup
popupChildrenContainerThe main container for children content inside the popup variant on the minicartPopup
footerShippingPriceContainerThe shipping price main containerMinicartFooter
footerShippingPriceLabelContainerThe shipping price label containerMinicartFooter
footerShippingPriceLabelContainerThe shipping price label containerMinicartFooter
sidebarRightCaretContainerThe caret icon container in the sidebar variant of the minicartSidebar
sidebarItemQuantityContainerThe item quantity container in the sidebar variant of the minicartSidebar

Troubleshooting

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

Contributing

Check it out how to contribute with this project.

Tests

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

Travis CI

Build Status

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --><!-- prettier-ignore --><table> <tr> <td align="center"><a href="https://github.com/lucasayb"><img src="https://avatars2.githubusercontent.com/u/17356081?v=4" width="100px;" alt="Lucas Antônio Yamamoto Borges"/><br /><sub><b>Lucas Antônio Yamamoto Borges</b></sub></a><br /><a href="https://github.com/vtex-apps/minicart/commits?author=lucasayb" title="Code">💻</a></td> </tr> </table><!-- ALL-CONTRIBUTORS-LIST:END -->

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