Register

Purpose

The Register reusable renders the customer registration form (first/last name, email, password, confirm password, terms consent), validates user input client-side, and submits the registration via the SDK.

It’s used both as a standalone Register page and inside the Login modal.

Where it's rendered

Standalone Register page

Components/Register/Default.liquid renders:

{% render 'Reusables\\Register\\Default', uniquekey: uniquekey %}

Login modal

Reusables/LoginModal/Default.liquid renders:

{% render 'Reusables\\Register\\Default', uniquekey: uniquekey %}

Inputs (Liquid render parameters)

Liquid parameters

• uniquekey (string)
  • Used to make DOM ids/names unique.
  • The template appends it to all field id/name attributes.

Model shape (storefront example)

Sanitized real storefront example (provided by the user) of the component/page model that renders registration:

{
  "name": "Register",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "retypePassword": false,
    "id": "Component Id",
    "section": "SectionA",
    "type": "Register",
    "name": "Register",
    "configuredInContentApi": false,
    "view": "Default",
    "displayName": "",
    "cssClass": "",
    "header": "",
    "alignment": "Left"
  },
  "translations": {
    "registerAccount": "Sample text",
    "alreadyAccount": "Sample text",
    "login": "Sample text"
  }
}

Notes:

• The reusable itself relies mostly on Reusables.Register.Translations.* and does not read model.translations directly.
• Registration is feature-gated by GlobalData.Settings.showRegistration inside the reusable template.

Template behavior (Liquid + Alpine)

Feature flag

The form is rendered only when:

• GlobalData.Settings.showRegistration is truthy.

Alpine wiring

• Alpine component: x-data="registerreusabledefault"
• Submission handler:

@submit.prevent="checkForm(uniquekey, successMessage, errorMessageFail, errorMessageUserExists)"

Fields

All fields are required unless stated otherwise:

• First name (register-firstname-<uniquekey>) (required)
• Last name (register-lastname-<uniquekey>) (required)
• Email (register-email-<uniquekey>) (required, email format)
• Password (register-password-<uniquekey>) (required, must pass weak-password rules)
• Confirm password (register-confirm-password-<uniquekey>) (required, must match password)
• Terms consent checkbox (register-terms-<uniquekey>) (required)

Password visibility

Both password fields include a toggle checkbox that triggers toggleVisibility($event) to switch the input type between password and text.

JavaScript

Global object

Global object: registerreusabledefault (in Reusables/Register/Default.js).

It is used directly as an Alpine component object (not via an init factory).

State

• fields: array of tracked inputs
• errors: fieldName -> errorType
• isSending: disables submit while calling the SDK
• Weak password helper flags:
  • errorUpLowCase
  • errorLength
  • errorSymbolNum

Methods

init()

• Collects inputs with [name] and filters out disabled/submit.
• Attaches:
  • blur listeners to validate fields
  • change listener for checkboxes

Also listens for the global event clear-login-modal-forms:

• Calls clearForm().
• Clears toast messages unless the event includes detail.preserveToasts === true.

validateField(field)

Validation rules:

• Required text/email/password: empty -> required
• Required checkbox: unchecked -> required
• Email format: invalid -> invalidEmail
• Password strength for the main password field:
  • at least 8 characters
  • contains uppercase + lowercase
  • contains at least one symbol and one number
  • failing these sets the helper booleans and returns error type weak
• Confirm password: mismatch -> unmatched

Side effects:

• Updates errors[field.name].
• Toggles invalid / valid CSS classes.
• Updates .icon-state to warning/check icons.

toggleVisibility(event)

• Finds the corresponding password input based on the toggle checkbox id (removes toggle- prefix).
• Toggles the input type between password and text.
• Switches icon class ic-eye-off <-> ic-preview.

updateFormValidity()

Returns true when every field is valid:

• no error in errors[field.name]
• and required fields are not empty (or unchecked)

clearForm()

• Resets field values to empty (or unchecks checkboxes).
• Removes valid / invalid classes.
• Resets .icon-state icons.
• Clears errors.

checkForm(uniquekey, successMessage, errorMessageFail, errorMessageUserExists)

Submit flow:

1. Clears existing toasts via Alpine.store('toast').removeAll().
2. Validates all fields.
3. If invalid, stops.
4. Builds the SDK request payload from DOM values:

• FirstName
• LastName
• Email
• Password
• ValidatePassword (confirm)

5. Calls:

• servicesreusabledefault.accountRegister(info)

6. Error handling:

• HTTP 409 -> shows errorMessageUserExists
• other non-2xx or success === false -> shows errorMessageFail

7. On success:

• Calls clearForm()
• Shows toast successMessage
• Closes the login modal via Alpine.store('loginModal').close(true)

Global Alpine stores

This reusable uses:

$store.toast

• removeAll()
• add(message, icon, type, autoClose)

$store.loginModal

• close(preserveToasts)

Services / API calls

servicesreusabledefault.accountRegister(info)

Request payload shape (as built by the JS):

{
  "FirstName": "Sample text",
  "LastName": "Sample text",
  "Email": "sample@example.com",
  "Password": "Sample text",
  "ValidatePassword": "Sample text"
}

Dependencies

• Liquid: Reusables/Register/Default.liquid
• JS: Reusables/Register/Default.js
• Translations: Reusables/Register/Default.json
• Render sites:
  • Components/Register/Default.liquid
  • Reusables/LoginModal/Default.liquid
• Alpine stores:
  • $store.toast
  • $store.loginModal
• SDK wrapper:
  • servicesreusabledefault.accountRegister(...)

Notes

• The template uses uniquekey to avoid DOM id collisions when the same form appears more than once (e.g. inside the login modal).
• The password rules are enforced client-side; backend should enforce the same (or stricter) policy.
• The form is gated by GlobalData.Settings.showRegistration; when disabled, this reusable renders nothing.