BigCommerce Mini Cart

This module grabs information related to the current cart using the storefront GraphQL API to be displayed as a mini cart, replacing the native cart.php request performed by the standard Stencil-based themes.

How to use

The module provides you with the main library that grabs all the information and a base template to use as model but the real integration in your theme is up to you.

Pre-requisites

1. This module requires TailwindCSS installed in your theme and correctly mapped to generate styles from the templates the modules uses.
2. The reactivity is controlled by AlpineJS, so you also need this library to be installed in case you want to use the sample approach delivered with the module.

Installation

Run npm install @ebolution/bigcommerce-mini-cart

Integration

The module needs to be initialized within the global javascript initialization performed by all the stencil-based themes. In this case the global.js file which implements the Global class extending from PageManager.

Import the module into the file by adding this in the import section:

import miniCart from '@ebolution/bigcommerce-mini-cart';

Add the following sentence inside the onReady method.

window.miniCart = miniCart;

Also, to provide a correct support on mobile, the built-in preview library call must be removed from the main javascript load script. These lines must be removed from global.js:

import cartPreview from './global/cart-preview';

...

cartPreview(secureBaseUrl, cartId);

The modification should look like this:

Include the template

As the templates can't be injected directly from modules, you need to create a copy of the model template into your theme. The easiest way is copying the file node_modules/@ebolution/bigcommerce-mini-cart/src/templates/default. html into templates/vendor/ebolution/bigcommerce-mini-cart/default.html and include it in the appropriate template, for example templates/components/common/navigation.

Notes

Be aware that this module contains a mechanism to detect the click in the cart element somehow similar to the stencil native utils.hooks. It is based on the existence of the data-cart-preview property associated to the element that triggers the mini-cart display.

For more information about how it's done, see the file js/hooks/cart.js, and how it's used in js/mini-cart.js.