Skip to content

AJAX Add to Cart

Asynchronously handle the form submission of a Miva ADPR form. Fires a global event via the EventBus. The event name is MVPS:addToCart.

Installation

Import the AjaxAddToCart theme extension class in your JavaScript file.

import AjaxAddToCart from 'extensions/ajax-add-to-cart';

Example Usage

.mvt

Setup a form containing the following HTML structure and elements:

<form id="js-purchase-form" action="&mvte:urls:BASK:auto;" method="post">
    <input type="hidden" name="Action" value="ADPR" />
    <input type="hidden" name="Product_Code" value="&mvte:product:code;" />
    <input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />

    <div class="js-add-to-cart-message"></div>

    <input type="submit" class="js-add-to-cart" data-action="&mvte:urls:BASK:auto_sep;ajax=1" data-value="Add To Cart" value="Add To Cart">
</form>

.js

Initialize the class:

Preferred asynchronous initialization:

const purchaseForm = document.getElementById('js-purchase-form');

if (!purchaseForm) {
    return;
}

// Initialize ajax add to cart functionality
if (purchaseForm.querySelector('.js-add-to-cart')) {
    const {default: AjaxAddToCart} = await import('extensions/ajax-add-to-cart');

    new AjaxAddToCart(purchaseForm);
}

Alternatively:

import AjaxAddToCart from 'extensions/ajax-add-to-cart';

new AjaxAddToCart(document.getElementById('js-purchase-form'));

Options

The AjaxAddToCart 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
actionInputElement HTMLElement String The action input element. 'input[name="Action"]'
limitedStockMessage Object The limited stock message object. Object containing the following properties:
  • dynamic: true
  • message: 'We do not have enough of the combination you have selected.<br />Please adjust your quantity.'
  • options: {autohide: true, type: 'warning'}
missingAttributesMessage Object The missing attributes message object. Object containing the following properties:
  • message: 'All <em class="u-color-error">Required</em> options have not been selected.<br />Please review the following options: <span class="u-color-error">%missingAttributes%</span>'
  • options: {autohide: true, type: 'warning'}
otherMessage Object The "other" message object. Object containing the following properties:
  • message: 'Please review your selection.'
  • options: {autohide: true, type: 'warning'}
outOfStockMessage Object The out of stock message object. Object containing the following properties:
  • dynamic: true
  • message: 'The combination you have selected is out of stock.<br />Please review your options or check back later.'
  • options: {autohide: true, type: 'warning'}
processingButtonText String Text to apply to the submit button element when the form submission is processing. 'Processing...'
responseMessageElement HTMLElement String The message element to target for response messages. '.js-add-to-cart-message'
scrollToMessage Boolean String Scroll to message mode setting, which controls scroll to message container behavior after add to cart action.
Supports the following values:
  • true = always scroll to message container
  • false = never scroll to message container
  • 'success' = only scroll to message container on successful add to cart
  • 'error' = only scroll to message container on unsuccessful add to cart
 false
scrollToMessageOptions Object Scroll to message options object, supports the Element.scrollIntoView() options listed here. {behavior: 'smooth', block: 'center'}
stockMessageErrorSelector String Selector for stock message errors. '.g-messages--error'
submitButtonElement HTMLElement String The submit button element. '.js-add-to-cart'
successMessage Object The success message object. Object containing the following properties:
  • message: 'Added to cart.'
  • options: {autohide: true, type: 'success'}

MVPS:addToCart Event

Triggers after the asynchronous request is resolved. The event payload will contain the following information:

{
    data: HTMLDocument, // Parsed response document. Will be set to null if the response status is not in the 200-299 range.
    form: HTMLElement, // The form element.
    formData: FormData, // A FormData object representing the form element's inputs.
    message: String, // The message container's message text.
    request: Request, // A Fetch API resource Request object representing the asynchronous request information.
    success: Boolean // Flag representing if the add to cart request was successful.
}