Skip to content

AJAX Account Login & Registration

Interactive functionality for login and registration forms including:

  • AJAX customer account login and registration
  • UI toggle of login and registration forms

Installation

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

  1. Add import {AjaxLoginRegister} from 'extensions/ajax-login-register'; to the JavaScript file where this extension will be imported.
  2. Add @import "extensions/ajax-login-register/index"; to your SCSS file.

Example Usage

.mvt

The HTMl should be structured similar to the following:

<!-- [1] -->
<div id="js-login-register">
    <!-- [2] -->
    <div id="js-loading-container" aria-hidden="true"></div>

    <!-- [3] -->
    <p id="js-login-register-title">Section Title</p>

    <div class="login-register">
        <!-- [4] -->
        <div id="js-login-register-primary-toggle" class="login-register__toggle login-register__toggle--open" role="region" aria-labelledby="js-login-register-primary-toggle-control">
            <!-- [5] -->
            <form class="login-register__toggle-content js-login-register-form js-form-validator" method="post" action="https://www.example.com/action1" data-location="action" autocomplete="off">
                <!-- [6] -->
                <div class="js-login-register-message"></div>

                <!-- Primary form content -->
            </form>
        </div>

        <!-- [7] -->
        <div id="js-login-register-secondary-toggle" class="login-register__toggle" role="region" aria-labelledby="js-login-register-secondary-toggle-control">
            <!-- [8] -->
            <form class="login-register__toggle-content js-login-register-form js-form-validator" method="post" action="https://www.example.com/action2" autocomplete="off">
                <div class="js-login-register-message"></div>

                <!-- Secondary form content -->
            </form>
        </div>

        <!-- [9] -->
        <div class="login-register__toggle-controls">
            <!-- [10] -->
            <button id="js-login-register-primary-toggle-control" class="g-display-link g-button--no-styling u-hidden" aria-expanded="true" aria-controls="js-login-register-primary-toggle" data-heading="Section Title">Action 1</button>

            <!-- [11] -->
            <button id="js-login-register-secondary-toggle-control" class="g-display-link g-button--no-styling" aria-expanded="false" aria-controls="js-login-register-secondary-toggle" data-heading="Alt Section Title">Action 2</button>
        </div>
    </div>
</div>
  1. The root container element.
  2. The loading UI element if the loading icon support is needed. The loading UI overlay should target the parent js-login-register element if using the overlay option.
  3. The section heading element to target for the text content updates if using the toggle forms feature.
  4. The primary toggle content if using the toggle forms feature. The login-register__toggle--open class must be applied to display the section.
  5. The primary form content. Adding a data-location attribute to the form element will explicitly set the window location on successful form submission, more information included in the locationAttribute configuration option section.
  6. The element to target for displaying the network response messages. This element must be a child element on the primary and secondary forms.
  7. The secondary toggle content if using the toggle forms feature.
  8. The secondary form content.
  9. The container for the toggle control elements, if using the toggle forms feature.
  10. The primary toggle control element if using the toggle forms feature. The aria-controls attribute should link to the id attribute on the primary toggle content element. This element should have the u-hidden class or a display none rule set as the default, as well as having a aria-expanded="true" attribute set. The data-heading attribute value is used for updating the section heading element's text content if the attribute value is present. This value on the primary toggle control element will typically match the section heading element's text content on page load.
  11. The secondary toggle control element if using the toggle forms feature. The aria-controls attribute should link to the id attribute on the secondary toggle content element. This element should have the aria-expanded="false" attribute set. The data-heading attribute value is used for updating the section heading element's text content if the attribute value is present. This value on the secondary toggle control element will typically represent the desired title text content for the secondary toggle content section.

.js

Initialize the AjaxLoginRegister object:

Preferred asynchronous initialization:

(async () => {
    const loginRegisterElement = document.getElementById('js-login-register');

    if (!loginRegisterElement) {
        return;
    }

    const {AjaxLoginRegister} = await import('extensions/ajax-login-register');

    new AjaxLoginRegister(loginRegisterElement);
})();

Alternatively:

import {AjaxLoginRegister} from 'extensions/ajax-login-register';

new AjaxLoginRegister(document.getElementById('js-login-register'));

Options

The AjaxLoginRegister 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 options:

Name Type Description Default Value
beforeSubmit Function Null Reference to a function to be called before the form submission event. The function receives the class object as the first parameter and the event object as the second parameter. null
formElements HTMLCollection NodeList String The login and registration form elements. '.js-login-register-form'
formMessageElement HTMLElement String The element to target for displaying a form element's network response messages. This must be a child element of each form element. '.js-login-register-message'
loaderElement HTMLElement String The loading state element. '#js-loading-container'
locationAttribute String The attribute name to explicitly set the window location on successful form submission. This attribute must be added to the form element and contain a URL value or value of "action" to use the form element's action value. Excluding this attribute from the form element will result in a reload of the current window location on successful form submission. 'data-location'
toggleFormEnabled Boolean Enable the form toggle functionality. true
toggleFormHeadingAttribute String The attribute name to target for the heading text update on form toggle. Set to an empty string literal '' to disable the feature. 'data-heading'
toggleFormHeadingElement HTMLElement String Heading element to target for updating text content based on the active form toggle. '#js-login-register-title'
toggleFormOpenClass String Class to apply to the active form toggle container element. 'login-register__toggle--open'
toggleFormPrimaryControlElement HTMLElement String The primary form toggle control element. '#js-login-register-primary-toggle-control'
toggleFormPrimaryElement HTMLElement String The primary form toggle container element. '#js-login-register-primary-toggle'
toggleFormSecondaryControlElement HTMLElement String The secondary form toggle control element. '#js-login-register-secondary-toggle-control'
toggleFormSecondaryElement HTMLElement String The secondary form toggle container element. '#js-login-register-secondary-toggle'