Wishlist Dialog

Functionality for the wishlist dialog element.

Installation

This class is pre-installed in the PROD.js and PROD.scss files.

1. Add import {WishlistDialog} from 'extensions/wishlists'; to the JavaScript file where this extension will be imported.
2. Add @import "extensions/wishlists/index"; to your SCSS file.

Example Usage

.mvt

The wishlist dialog HTML markup must consist of a dialog control and dialog element. The following is a basic setup of this structure with aria attributes:

<button type="button" class="g-add-to-wishlist g-button-secondary js-add-to-wishlist-control" aria-expanded="true" aria-controls="js-add-to-wishlist-dialog">
    <span class="u-hide-visually">Add To Wish List</span>
    <span class="g-add-to-wishlist__icon u-icon-heart-full" aria-hidden="true"></span>
</button>

<div id="js-add-to-wishlist-dialog" class="g-add-to-wishlist-dialog" aria-hidden="true">
    <div class="g-add-to-wishlist-dialog__container" role="dialog" aria-label="Add this product to a wishlist.">
        <!-- wishlist dialog content -->
    </div>
</div>

.js

Initialize the class:

Preferred asynchronous initialization:

const controlElement = document.getElementsByClassName('js-add-to-wishlist-control')[0];

if (!controlElement) {
    return;
}

const dialogElement = document.getElementById(controlElement.getAttribute('aria-controls'));

if (!dialogElement) {
    return;
}

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

new WishlistDialog(dialogElement, controlElement);

Alternatively:

import {WishlistDialog} from 'extensions/wishlists';

const controlElement = document.getElementsByClassName('js-add-to-wishlist-control')[0];

if (!controlElement) {
    return;
}

const dialogElement = document.getElementById(controlElement.getAttribute('aria-controls'));

if (!dialogElement) {
    return;
}

new WishlistDialog(dialogElement, controlElement);

Options

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

The following table defines the available configuration options:

Name	Type	Description	Default Value
dialogContainerElement	HTMLElement String	The wishlist dialog container element, typically the first child of the dialog root container element.	'.g-add-to-wishlist-dialog__container'
dialogScrollIntoView	Object	Scroll into view options for the dialog when the showDialogParameter is present in the URL. This object should correlate to the scrollIntoViewOptions object defined here.	{behavior: 'smooth', block: 'center'}
toggleEnabled	Boolean	Flag to enable / disable the toggle functionality.	true
toggleOpenClass	String	The toggle is open class name.	'g-add-to-wishlist-dialog__toggle--open'
togglePrimaryControlElementId	String	The id attribute on the primary toggle control element.	'js-wishlists-primary-toggle-control'
toggleSecondaryControlElementId	String	The id attribute on the secondary toggle control element.	'js-wishlists-secondary-toggle-control'
showDialogParameter	String	URL parameter name to trigger displaying the wishlist dialog on page load.	'show_wishlist'