Promo Code Events¶

Event for Single Input Forms, to disable (or re-enable) the Submit button based on the the value of the input.

Example: Submit button is disabled until user types something into the input.

Installation¶

Note: This class is loaded on checkout pages with Genesis out of the box.

Add import {PromoCodeEvents} from 'extensions/checkout-pages'; to your file.

Example Usage¶

.mvt¶

See the options section below for the specific selectors to trigger the javascript functionality.

<form class="g-checkout__order-summary-promo-form" method="post" action="&mvte:urls:_self:auto;">
    <fieldset>
        <legend class="u-hide-visually">Add Promo Code</legend>
        <input type="hidden" name="Action" value="ACPN" />

        <label class="g-form-label" for="l-order-summary-coupon-code">Promo Code</label>
        <div class="g-checkout__order-summary-promo-form-fields">
            <input id="l-order-summary-coupon-code" class="g-checkout__order-summary-promo-form-input g-form-input u-width-8" type="text" name="Coupon_Code" required>
            <button type="submit" class="g-checkout__order-summary-promo-form-submit g-button-primary u-width-4">Apply</button>
        </div>
    </fieldset>
</form>

.js¶

After importing the class file, initialize the PromoCodeEvents class:

new PromoCodeEvents('#l-order-summary-coupon-code', '.g-checkout__order-summary-promo-form-submit');

Options¶

Name	Type	Description
input	Element	Input to watch when filled out.
submitElement	Element	Submit Element to enable/disable.