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 %}

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 the page translations object 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

File: Reusables/Register/Default.js

Exposes: registerreusabledefault

init

validateField

toggleVisibility

updateFormValidity

clearForm

checkForm

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.

Register

Purpose#

Where it's rendered#

Standalone Register page#

Login modal#

Inputs (Liquid render parameters)#

Liquid parameters#

Model shape (storefront example)#

Template behavior (Liquid + Alpine)#

Feature flag#

Alpine wiring#

Fields#

Password visibility#

JavaScript#

Global object#

init#

validateField#

toggleVisibility#

updateFormValidity#

clearForm#

checkForm#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#