Skip to content

AJAX Insert Wishlist

Functionality for asynchronously handling Miva Insert Wishlist (IWSH) actions.

Fires a global MVPS:insertWishlist event via the EventBus.

Installation

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

Import the AjaxInsertWishlist theme extension class in your JavaScript file.

import {AjaxInsertWishlist} from 'extensions/wishlists';

Example Usage

.js

Initialize the class:

Preferred asynchronous initialization:

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

if (!wishlistFormElement) {
    return;
}

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

new AjaxInsertWishlist(wishlistFormElement);

Alternatively:

import {AjaxInsertWishlist} from 'extensions/wishlists';

new AjaxInsertWishlist(document.getElementById('js-create-wishlist-form'));

Options

The AjaxInsertWishlist 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
actionInput Object The action input object. {name: 'Action', value: 'IWSH'}
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-create-wishlist-message'
messageOptions Object The message configuration options object. 
{
  error: {
    dynamic: true,
    message: 'Unable to create list %wishlistTitle%.',
    options: {
      autohide: false,
      type: 'error'
    },
    selector: '.g-messages--error'
  },
  success: {
    message: 'Successfully created list %wishlistTitle%.',
    options: {
      autohide: false,
      type: 'success'
    },
    selector: '.g-messages--success'
  }
}
submitElement HTMLElement String The form submit element. '[type="submit"]'

MVPS:insertWishlist Event

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

{
    data: Object, // Parsed JSON response object. 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 insert wishlist request was successful.
}