Skip to main content

View Cart

The View Cart component renders an element with a badge containing the number of products contained in the shopping cart. When clicked, it can display a dropdown/sidebar that lets users see a summary of their shopping cart on any page.

View Cart


How to Embed

To embed this component on your website, include the reflow library, and add the following tag somewhere in the <body> of your page:

<div data-reflow-type="view-cart" data-reflow-summary-type="dropdown">Cart</div>

You can replace the "Cart" text in this example with an icon or any content of your liking in order to customize the dropdown/sidebar toggle.

Supported Attributes

You can configure the View Cart and change the way it's rendered by specifying additional data-reflow-xxx attributes.

AttributePossible ValuesDescription
data-reflow-typeview-cartMust always be set.
data-reflow-summary-typenone, dropdown, sidebar(optional) Choose how the shopping cart summary should be displayed - in a dropdown, sidebar or not at all. The default value is "none" (no summary is shown).

Example: data-reflow-summary-type="dropdown"

left, right

(optional) Choose whether the summary should be aligned to the left or to the right (default).

Example: data-reflow-summary-position="right"

(optional) The URL of a page where a Shopping Cart components is located.

If this is set, the cart summary will show a button that brings customers to their shopping cart so they can complete the checkout.