Skip to content

Mini Basket

Use this class to handle mini basket functionality and interactivity.

Installation

  1. Add the following to your Global.js file: 

    import MiniBasket from 'extensions/mini-basket';

  2. Add the following to your Global.scss file: 

    @import "extensions/mini-basket/index";

Example Usage

.js

import MiniBasket from 'extensions/mini-basket';

/**
 * The `options` parameter is an optional object.
 * See configuration options below for object details.
 */
new MiniBasket(options);

.scss

As of right now, we only have one style of Mini Basket out of the box.

// import a specific style
@import "extensions/mini-basket/lib/scss/off-canvas";

// ---- FOR TESTING ONLY! ----
// this will import all styles
@import "extensions/mini-basket/index";

.mvt

The following HTML structure is expected for the mini basket functionality to work with the default options. It can of course be extended to suit your needs.

<!-- [1] -->
<a class="js-mini-basket-open<mvt:if expr="l.settings:global_minibasket:basket_count"> g-site-header__basket-has-items</mvt:if>" href="&mvte:urls:BASK:auto;" aria-label="Open Mini Basket" aria-haspopup="dialog" data-modal-trigger="js-mini-basket">
    <!-- [2] -->
    <span class="js-mini-basket-count">
        <mvt:if expr="l.settings:global_minibasket:basket_count">
            &mvte:global_minibasket:basket_count;
        </mvt:if>
    </span>
</a>

<!-- [3] -->
<aside id="js-mini-basket" class="g-mini-basket" aria-hidden="true">
    <!-- [4] -->
    <div class="js-mini-basket" data-count="&mvte:global_minibasket:basket_count;" data-subtotal="&mvte:global_minibasket:formatted_total;">
        <!-- [5] -->
        <div class="g-mini-basket__overlay" tabindex="-1" data-micromodal-close>
            <!-- [6] -->
            <div class="g-mini-basket__content" role="dialog" aria-modal="true" aria-labelledby="modal-mini-basket-title">
                <!-- [7] -->
                <div id="js-mini-basket-loading-container" aria-hidden="true"></div>

                <div>
                    <div class="g-mini-basket__header">
                        <strong id="modal-mini-basket-title">My Cart: &mvte:global_minibasket:basket_count; item(s)</strong>
                        <!-- [8] -->
                        <button type="button" class="g-button-secondary u-icon-cross" aria-label="Close Mini-Basket" data-micromodal-close></button>
                    </div>
                </div>
                <!-- The rest of the mini basket content goes here -->
            </div>
        </div>
    </div>
</aside>
  1. This is the element to trigger the mini basket open / close. It contains the js-mini-basket-open class and data-modal-trigger attribute value that correlates to the id attribute of the mini basket modal. The aria-label and aria-haspopup attributes are accessibility enhancements.
  2. The js-mini-basket-count class is used to update the mini basket count asynchronously on successful add to cart events.
  3. This is the outermost container of the mini basket modal. Its id attribute is targeted by the data-modal-trigger attribute and should have a aria-hidden attribute set to true.
  4. This is the mini basket content container element targeted by the MiniBasket class. This element should have data-count and data-subtotal attributes. These attributes, as well as the element's content, are asynchronously replaced with the response content returned after successful add to cart events.
  5. This is the overlay for the mini basket content modal and contains a data-micromodal-close attribute on it. This is a special attribute which indicates that it should trigger the close of the modal on click. If this attribute is removed, clicking on the overlay will not close the modal anymore.
  6. The role="dialog" attribute is used to inform assistive technologies that content contained within is separate from the rest of the page. The aria-modal="true" attribute is used to indicate that the presence of a modal element precludes usage of other content on the page. Additionally, the aria-labelledby="modal-mini-basket-title" attribute points to the id of the modal title. This is to help identify the purpose of the modal.
  7. The Loader element should be placed within the Mini Basket content.
  8. The data-micromodal-close attribute should be placed on all elements that should close the modal on click.

Configuration Options

The following table defines the available configuration options:

Name Type Description Default Value
closeAfterOpen Boolean Close mini basket after opened via openOnAddToCart. false
closeAfterOpenTime Integer Close mini basket after delay (ms) if closeAfterOpen option is true. 5000
containerElement Element Root container element to target for mini basket functionality. .js-mini-basket
contentElement Element Element containing mini basket main content. '.g-mini-basket__content'
countElements ElementList List of basket count elements. .js-mini-basket-count
hasItemsClass String Class to apply to mini basket when items are in the basket. 'g-site-header__basket-has-items'
isOpenByDefault Boolean Open mini basket on class instantiation. false
loadingElement Element The target loading element. '#js-mini-basket-loading-container'
openAttribute String Attribute name to trigger mini basket open. This should be placed on the openElements. data-modal-trigger
openElements ElementList List of elements that open the mini basket and contain the mini basket trigger attribute. .js-mini-basket-open
openOnAddToCart Boolean Listens for the global MVPS:addedToCart event and opens if successful. false
subtotalElements ElementList List of subtotal elements. .js-mini-basket-subtotal