Summary Events¶

Use this class for functionality related to the order summary section on checkout pages, such as toggling the order summary display.

Installation¶

This class is loaded on checkout pages with Genesis out of the box.

Add import {SummaryEvents} from 'extensions/checkout-pages'; to your file.

Example Usage¶

.mvt¶

Summary Toggle¶

The summary toggle utilizes HTML markup similar to the example found here: https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html.

See the options section below for the specific selectors to trigger the javascript functionality.

<section class="g-checkout__sidebar-item g-checkout__order-summary g-checkout__order-summary--collapsible">
    <div class="g-checkout__order-summary-header">
        <button type="button" id="js-order-summary-content-control" class="g-checkout__order-summary-header-control g-button--no-styling" aria-expanded="true" aria-controls="js-order-summary-content">
            <h2 class="g-checkout__section-title">Order Summary</h2>
            <span class="g-checkout__order-summary-header-control-icon u-icon-add" aria-hidden="true"></span>
        </button>
        <a class="g-checkout__order-summary-header-link" href="&mvte:urls:BASK:auto;">Edit</a>
        <p class="g-checkout__order-summary-price">&mvte:basket:formatted_total;</p>
    </div>

    <div id="js-order-summary-content" class="g-checkout__order-summary-content" role="region" aria-labelledby="js-order-summary-content-control">
        <!-- Summary Content here -->
    </div>
</section>

.js¶

After importing the class file, initialize the SummaryEvents class:

new SummaryEvents();

An optional configuration object can be passed into the first parameter when initializing the class to override any of the default configuration settings. See options below.

Options¶

Name	Type	Description	Default Value
containerElement	Element	Summary container element.	`'.g-checkout__order-summary--collapsible'`
controlElement	Element	Summary toggle control element.	`'#js-order-summary-content-control'`
marketingFormFieldSelector	String	Selector for the marketing form input field containers.	`'.g-checkout__order-summary-promo-form-fields'`
marketingFormSelector	String	Selector for marketing forms (ie coupon form, gift cert form, etc.).	`'.g-checkout__order-summary-promo-form'`
openClass	String	Summary is open identifier class.	`'is-open'`