Address Events¶

Use this class to support toggling the Address Line 2 and for using <datalist> with the State/Province fields.

Installation¶

Note: This class is pre-installed and loaded asynchronously with Genesis out of the box.

Add import AddressEvents from 'extensions/address-events'; to your Global.js file.

Example Usage¶

.mvt¶

Data List¶

Make sure you have the attribute list, and that is the ID of your datalist! Add data-address-datalist as well so the JavaScript Kicks in!

<mvt:do file="g.Module_Library_DB" name="l.statelist_loaded" value="StateList_Load_All( l.settings:customerfields:statelist )" />

<div class="g-form-list__item g-layout__item u-width-12 u-width-3--m &mvte:global:ShipState_Row;">
    <label class="&mvte:customerfields:current_field:classes;" for="Customer_ShipStateSelect">State/Province</label>
    <input id="Customer_ShipState" class="g-form-input" type="text" name="Customer_ShipState" value="<mvt:if expr="g.Customer_ShipState">&mvte:global:Customer_ShipState;<mvt:else>&mvte:global:Customer_ShipStateSelect;</mvt:if>" list="Customer_ShipState_Datalist" data-address-datalist &mvte:customerfields:current_field:required;>
    <datalist id="Customer_ShipState_Datalist">
        <mvt:foreach iterator="state" array="customerfields:statelist">
            <option value="&mvte:state:code;">&mvte:state:name;</option>
        </mvt:foreach>
    </datalist>
</div>

Address Toggle¶

Make sure you have a data-address-toggle, and that is the ID of the element you want to toggle!

<button type="button" class="g-button--no-styling g-account-icon-link js-toggle-address-2 g-customer-fields-toggle" data-address-toggle="js-Customer_ShipAddress2_row">
    <span class="u-icon-add g-account-icon-link-icon" aria-hidden="true"></span>
    <span class="g-account-icon-link-text">Add Address Line 2 (Optional)</span>
</button>

<div id="js-Customer_ShipAddress2_row"class="g-form-list__item g-layout__item u-width-12 &mvte:global:ShipAddress2_Row;">
    <label class="g-form-label" for="l-Customer_ShipAddress2">Address 2</label>
    <input id="l-Customer_ShipAddress2" class="g-form-input" type="text" name="Customer_ShipAddress2" value="&mvte:global:Customer_ShipAddress2;">
</div>

.js¶

Initialize the AddressEvents class:

Preferred asynchronous initialization:

(async () => {
    const datalists = document.querySelectorAll('[data-address-datalist]');
    const toggles = document.getElementsByClassName('[data-address-toggle]');

    if (datalists.length === 0 && toggles.length === 0) {
        return;
    }

    const {AddressEvents} = await import('extensions/address-events');

    new AddressEvents(datalists, toggles);
})();

Options¶

The AddressEvents class takes 2 parameters:

Name	Type	Description
datalistElements	Elements	List of elements, each with an attribute of `data-address-datalist`, with a `list` attribute
toggleElements	Elements	List of Toggle Elements, each with an attribute of `data-address-toggle`