Quantify

Use this class to provide functionality to Quantity elements with increment and decrement buttons.

Usage

This class is pre-installed and loaded asynchronously with Genesis out of the box on PROD and BASK.

If you want to load it in for another page:

(async () => {
    const {Quantify} = await import('extensions/quantify');

    new Quantify();
})();

Options

The Quantify object can take an object for the first parameter to override any of the default configuration settings. The following table defines the available options:

Name	Type	Description	Default Value
wrapper	HTMLElement String	Top-level element for quantify fields	'[data-hook="quantify"]'
decrementElems	HTMLCollection NodeList String	Decrement Elements	'[data-action="decrement"]'
incrementElems	HTMLCollection NodeList String	Increment Elements	'[data-action="increment"]'
quantityElem	HTMLElement String	Quantity Element	'[name="Quantity"]'
formElement	HTMLElement String Null	Form Element. If you want the form to submit on Quantity changed, pass this through. Not required.	null

Min and Maximum amounts

If you want to utilize a minimum and maximum amount, just add min or max to your Quantity Element. Your Quantity Element should be a [type="number"].

Sample HTML

<div class="g-quantify g-control-group u-grids-3" data-hook="quantify">
    <button class="g-control-group__button g-button u-bg-white u-color-gray-4 u-icon-subtract g-layout__item" data-action="decrement" title="Reduce Quantity"></button>
    <input class="g-form-input g-control-group__field u-text-center u-color-gray-4 g-layout__item" type="number" id="l-Quantity" name="Quantity" value="1" min="1" max="100">
    <button class="g-control-group__button g-button u-bg-white u-color-gray-4 u-icon-add g-layout__item" data-action="increment" title="Increase Quantity"></button>
</div>