Skip to content

AJAX Add to Wishlist

Functionality for asynchronously handling Miva Add To Wishlist (ATWL) actions.

Fires a global MVPS:addToWishlist event via the EventBus.

Installation

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

Import the AjaxAddToWishlist theme extension class in your JavaScript file.

import {AjaxAddToWishlist} from 'extensions/wishlists';

Example Usage

.js

Initialize the class:

Preferred asynchronous initialization:

const wishlistFormElement = document.getElementById('js-add-to-wishlist-form');

if (!wishlistFormElement) {
    return;
}

const {AjaxAddToWishlist} = await import('extensions/wishlists');

new AjaxAddToWishlist(wishlistFormElement);

Alternatively:

import {AjaxAddToWishlist} from 'extensions/wishlists';

new AjaxAddToWishlist(document.getElementById('js-add-to-wishlist-form'));

Options

The AjaxAddToWishlist 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
actionElementClass String The action element class name. 'js-add-to-wishlist'
actionInput Object The action input object. {name: 'Action', value: 'ATWL'}
actionsContainerElement HTMLElement String The container element of the wishlist action elements. '.g-add-to-wishlist-dialog__wishlists'
loadingElement HTMLElement String The loading UI element. '#js-loading-container'
loadingOverlayElement HTMLElement String The loading UI overlay element. '#js-wishlist-container'
messageElement HTMLElement String The message container element. '#js-add-to-wishlist-message'
messageOptions Object The message configuration options object. 
{
  error: {
    dynamic: true,
    message: 'Unable to add to list %wishlistTitle%.',
    options: {
      autohide: false,
      type: 'error'
    },
    selector: '.g-messages--error'
  },
  success: {
    message: 'Successfully added to list %wishlistTitle%.',
    options: {
      autohide: false,
      type: 'success'
    },
    selector: '.g-messages--success'
  }
}
wishlistIdAttribute String The wishlist id attribute, must be present on an action element. 'data-wishlist-id'
wishlistListsAttribute String The wishlists lists data attribute. This triggers the dynamic creation of the action elements when present and contains a value on the actionsContainerElement. The attribute value must be in a JSON list format with each object containing the wishlist id and wishlist title for each action element. 'data-wishlist-lists'
wishlistTitleAttribute String The wishlist title attribute, must be present on an action element. 'data-wishlist-title'
wishlistUrlAttribute String The add to wishlist page url, typically the WISH page. This attribute must be present on the form element. If omitted, the form element action attribute will be used for the add to wishlist page url. 'data-wishlist-url'

Dynamic Creation of Action Elements

On initialization, the action elements will be dynamically created and appended as children on the actionsContainerElement element when the wishlistListsAttribute attribute and value is present on the actionsContainerElement element.

Wishlists Lists Attribute

The attribute value must be in a JSON list format with each object containing the wishlist id and wishlist title for each action element. If the attribute value is not present, it is expected for the action elements to be present on page render.

For example: 

<div class="g-add-to-wishlist-dialog__wishlists" data-wishlist-lists="[{&quot;id&quot;: 1, &quot;title&quot;: &quot;Wish List1&quot;},{&quot;id&quot;: 2, &quot;title&quot;: &quot;Wish List2&quot;}]"></div>

The above will produce HTML output similar to the following after the dynamically creating the action elements: 

<div class="g-add-to-wishlist-dialog__wishlists" data-wishlist-lists="[{&quot;id&quot;: 1, &quot;title&quot;: &quot;Wish List1&quot;},{&quot;id&quot;: 2, &quot;title&quot;: &quot;Wish List2&quot;}]">
    <button class="js-add-to-wishlist g-add-to-wishlist-dialog__wishlist g-button--no-styling" data-wishlist-id="1" data-wishlist-title="Wish List1">
        <span class="g-add-to-wishlist-dialog__wishlist-title">Wish List1</span>
        <span class="g-add-to-wishlist-dialog__wishlist-action">
            <span class="g-add-to-wishlist-dialog__wishlist-action-icon u-icon-add-circle" aria-hidden="true"></span>
            <span class="u-hide-visually">Add this product to list Wish List1.</span>
        </span>
    </button>
    <button class="js-add-to-wishlist g-add-to-wishlist-dialog__wishlist g-button--no-styling" data-wishlist-id="2" data-wishlist-title="Wish List2">
        <span class="g-add-to-wishlist-dialog__wishlist-title">Wish List2</span>
        <span class="g-add-to-wishlist-dialog__wishlist-action">
            <span class="g-add-to-wishlist-dialog__wishlist-action-icon u-icon-add-circle" aria-hidden="true"></span>
            <span class="u-hide-visually">Add this product to list Wish List2.</span>
        </span>
    </button>
</div>

MVPS:addToWishlist Event

Triggers after the asynchronous request for adding to a wishlist is resolved. The event details will contain the following properties:

{
    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 fields.
    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 wishlist request was successful.
}