Minicart flyout

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

Minicart on mobile

ID

 

Comment

ID

 

Comment

1

Header (tile and close icon)

<argument name="xml_label" xsi:type="string" translate="true">Cart</argument>

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

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

 

Minicart as offcanvas, but not opened when a product is added

 

<var name="open_on_product_added">true</var>

Minicart as a dropdown

 

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.

 

 

Live shops customization examples

URL

Mobile/desktop

URL

Mobile/desktop

https://megaport.de/

 

https://ipet.ch/

 

https://www.claireluise.com/en_de/

 

https://haka.com/

 

 

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

Â