Minicart flyout
- Marta Siewierska-Stańczak
TABLE OF CONTENTS
Summary
The minicart flyout is a standard magesuite behavior after a product is added to the cart - from the product page or from a product tile.
Magesuite standard
ID |
| Comment |
|---|---|---|
1 | Header (tile and close icon) |
|
2 | Image |
|
3 | Product name |
|
4 | Collapsible attributes configuration - for configurable or bundle products |
|
5 | Price / discount price |
|
6 | Quantity Increment |
|
7 | Edit button |
|
8 | Remove button |
|
9 | Cart subtotal (depending on admin setting also tax can be shown) |
|
10 | Go to checkout button |
|
11 | Go to cart button |
|
The desktop view has the same design, but the minicart is a bit wider.
Magesuite optional scenarios
Functionality | Screens | Comment / Dev hint |
|---|---|---|
Use +/- (qty-increment) for changing quantity | 
| <item name="useDefaultQty" xsi:type="boolean">false</item> |
Show information about total count of items in the cart | 
| <item name="showTotalItems" xsi:type="boolean">true</item> |
Do not show product options for configurable products | 
| <item name="showProductOptions" xsi:type="boolean">false</item> |
Do not show edit and/or remove button | 
| <item name="showEditProductButton" xsi:type="boolean">false</item>
<item name="showRemoveProductButton" xsi:type="boolean">false</item> |
Minicart as offcanvas, but not opened when a product is added |
|
|
Minicart as a dropdown | 
| <vars module="Magento_Checkout">
<!-- Defines if minicart should be displayed as offcanvas -->
<var name="minicart_offcanvas">
<var name="enabled">false</var> |
Minicart has a product carousel visible on offcanvas. The carousel can be configured as related/upsell/crossell products for a given products. Unfortunately this is only desktop solution. | 
| <var name="products_carousel">
<var name="enabled">true</var>
<var name="relation_type">upsell</var>
<var name="button">true</var>
<var name="button_dynamic_url">false</var>
<var name="js">
<var name="columnsConfig">
<var name="phone">2</var>
<var name="phoneLg">2</var>
<var name="tablet">2</var>
<var name="laptop">2</var>
<var name="laptopLg">3</var>
<var name="desktop">4</var>
<var name="tv">4</var>
</var>
</var>
</var> |
Live shops customization examples
Free gift (optional module)
See module documentation: FreeGift (optional)
Shiping addons - free shipping bar (optional module)
See module documentation: ShippingAddons and User Guide 3.4.4. Free Shipping Indicator
