Overview

Purpose

This section documents Noir Reusables.

Reusables are theme-only building blocks under Reusables/<Name>/ that are included from components/layouts (Liquid). They don’t require creating a new platform component type.

Where it’s rendered

Reusables are rendered via Liquid render includes from components (common example: Components/Profile/Default.liquid).

Inputs (Liquid render parameters)

A reusable can receive either:

named parameters in the render call

(less commonly) a single model object, if the caller passes one

The reusable’s Liquid + JS files are the source of truth for what it reads.

Template behavior (Liquid + Alpine)

What a reusable is

A reusable is a small, self-contained unit used to keep templates consistent and reduce duplication.

Typical examples in this theme:

account/profile subsections (Reusables\\Orders, Reusables\\Addresses, Reusables\\ProfileInfo)

product UI building blocks (Reusables\\ProductGridItem, Reusables\\ProductListItem, modals/buttons)

shared UI patterns (toast, prompt modal, back-to-top)

Folder structure

Reusables/<Name>/
  Default.liquid
  Default.js
  Default.json

Notes:

Default.js is optional (some reusables are Liquid-only).

Default.json is optional (only when the reusable has translations).

Rendering a reusable (Liquid)

In this repo the include path uses double backslashes:

{% render 'Reusables\\<Name>\\Default' %}

Passing parameters follows normal Liquid render conventions:

{% render 'Reusables\\<Name>\\Default', product: product, id: id %}

Translations

Reusable translations live in Reusables/<Name>/Default.json and are typically consumed in Liquid as:

Reusables.<Name>.Translations.<Key>

JavaScript

Naming convention

Components expose a global object named <foldername>default.

Reusables expose a global object named <foldername>reusabledefault.

Example:

Folder: Reusables/PromptModal/

JS object: promptmodalreusabledefault

How Alpine is wired

Prefer x-data="<objectName>" when the reusable doesn’t need inputs.

Use a factory when the reusable needs Liquid inputs:

x-data="<objectName>.initComponent('someId', 'someValue')"

If the returned object has an init() method, Alpine will call it automatically.

Global Alpine stores

Some reusables depend on Alpine stores (e.g. $store.toast, $store.sharedAddresses). If a reusable reads/writes $store.*, document which store keys it expects and why.

Services / API calls

Some reusables call SDK/API wrappers via servicesreusabledefault.*. If a reusable does, document the exact methods it calls.

Dependencies

List only real dependencies used by the reusable (Alpine stores, vendor libs, other reusables rendered, servicesreusabledefault.*).

Notes

Don’t invent inputs.

For reusables, the most reliable contract is: Liquid render usage sites + the reusable’s own Liquid/JS.

Examples

Example pages in this section:

NoirDocs/3. Reusables/Addresses.md

Overview

Purpose#

Where it’s rendered#

Inputs (Liquid render parameters)#

Template behavior (Liquid + Alpine)#

What a reusable is#

Folder structure#

Rendering a reusable (Liquid)#

Translations#

JavaScript#

Naming convention#

How Alpine is wired#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#

Examples#