Login

Purpose

Login is the reusable that renders and submits the login form (email + password).

It’s used both:

As the main form on the /login page (via the Login component).

Inside the LoginModal reusable (tabs: login/register).

The reusable validates fields client-side, calls the login API, shows toast messages for success/errors, and then redirects/reloads depending on context.

Where it's rendered

In Components/Login/Default.liquid:

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

In Reusables/LoginModal/Default.liquid:

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

Inputs (Liquid render parameters)

Login is rendered with a single parameter.

Model shape (storefront example)

Not applicable (this reusable doesn’t receive a platform model object).

It receives only uniquekey from the caller (generated in Liquid) to create unique input ids/names.

Required fields

uniquekey (string)

Used to generate deterministic DOM ids/names:

login-email-{{ uniquekey }}

login-password-{{ uniquekey }}

field names are also suffixed with the same value.

Optional fields

None.

Template behavior (Liquid + Alpine)

Source: Reusables/Login/Default.liquid.

Root form uses Alpine data:

x-data="loginreusabledefault"

Submission is handled by @submit.prevent, passing translations (toast messages):

@submit.prevent="checkForm('{{ uniquekey }}', ...toast messages...)"

Password visibility is toggled via toggleVisibility($event).

Data contract (JS runtime)

The Alpine object is loginreusabledefault from Reusables/Login/Default.js.

State:

fields (array of input elements)

errors (object map: fieldName -> errorType)

isSending (boolean)

JavaScript

Global object

File: Reusables/Login/Default.js

Exposes: loginreusabledefault

init

validateField

toggleVisibility

updateFormValidity

clearForm

checkForm

Global Alpine stores

Used by Login JS:

$store.toast

removeAll() and add(...) for feedback.

$store.loginModal

Reads and updates goToCheckoutPage to decide whether to redirect to checkout.

Services / API calls

servicesreusabledefault.accountLogin({ Email, Password })

Dependencies

Reusables/Login/Default.liquid

Reusables/Login/Default.js

Reusables/Login/Default.json (translations)

Components/Login/Default.liquid (render on login page)

Reusables/LoginModal/Default.liquid (render in modal)

$store.toast and $store.loginModal in Assets/js/theme.js

servicesreusabledefault.accountLogin

Notes

The reusable expects the generated uniquekey to be unique per instance, otherwise the document.querySelector('#login-email-' + uniquekey) selectors may target the wrong input.

For security, the redirect logic only allows absolute redirects when they come from the ?redirect=http(s)://... query string.

Examples

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

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

Login

Purpose#

Where it's rendered#

Login page#

Login modal#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

JavaScript#

Global object#

init#

validateField#

toggleVisibility#

updateFormValidity#

clearForm#

checkForm#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#

Examples#