AJAX Volume Pricing¶

Use this class to asynchronously update volume pricing content.

Installation¶

This class is pre-installed and loaded asynchronously in the PROD.js file.

Import the AjaxVolumePricing theme extension class in your JavaScript file.

import {AjaxVolumePricing} from 'extensions/ajax-volume-pricing';

Example Usage¶

.mvt¶

<!-- [1] -->
<div class="js-volume-pricing" aria-live="polite">
    <!-- [2] -->
    <mvt:item name="readytheme" param="contentsection( 'discount_volume' )" />
</div>

The root container element that is targeted for dynamically updating the volume pricing content. It is highly recommended to add a aria-live="polite" attribute to this element so that assistive technologies will announce when these dynamic content changes occur.
The volume pricing theme content section.

.js¶

Initialize the class:

Preferred asynchronous initialization:

const volumePricingElements = document.getElementsByClassName('js-volume-pricing');

if (!volumePricingElements.length) {
    return;
}

const {AjaxVolumePricing} = await import('extensions/ajax-volume-pricing');

for (const element of volumePricingElements) {
    new AjaxVolumePricing(element);
}

Alternatively:

import {AjaxVolumePricing} from 'extensions/ajax-volume-pricing';

for (const element of document.getElementsByClassName('js-volume-pricing')) {
    new AjaxVolumePricing(element);
}

Options¶

The AjaxVolumePricing class can take an optional configuration object for the second parameter to override any of the default configuration settings.

The following table defines the available configuration options:

Name	Type	Description	Default Value
apiUrl	String	The api url. Will default to `window.mivaJS.Japi_Url` if an empty value is provided.	`''`