LayoutA.liquid

Purpose

LayoutA.liquid is the main layout template of Noir.
It renders the global HTML skeleton and composes the page using:

Header component list

Body component list

Footer component list

It also loads the theme's CSS/JS and injects runtime globals used by client-side code.

Where it's used

This layout is the entry point for page rendering in Noir.
All pages that use Layout A will pass through this template.

High-level structure

HTML & language mode

Sets <html lang="..."> using Root.Page.Metas.IsoLang

Adds dark class when Root.Page.Data.Darkmode is enabled

Head includes

In <head>, the layout renders shared infrastructure includes:

Structure\Metas

Structure\CssVariables

It also loads core styles:

vendor CSS (swiper, lightgallery, nouislider, leaflet, markercluster)

theme CSS bundle: output.css

optional custom CSS: GlobalData.Settings.CustomCss

Asset paths and versioning

Asset base path is GlobalData.RootPath

Cache busting uses GlobalData.Settings.Version

Page composition (Header / Body / Footer)

Header

{% render 'Structure\\ComponentsList' with HeaderComponents as components %}

Main (`#app`)

Inside <main id="app">, Noir renders:

Toast reusable: Reusables\Toast\Default

Breadcrumb component: Components\Breadcrumb\Default

Page title block (H1, shown/hidden based on page type and breadcrumb depth)

Body component list

{% render 'Structure\\ComponentsList' with BodyComponents as components %}

Body class (`<body class="...">`)

The layout builds a body_class value from Root.Page.Type (lowercases the first character) and injects it into the <body> class list.

This class is used for page-level styling and targeting without hardcoding routes.

Additional body classes:

handheld-toolbar-enabled — enables layout behavior for the mobile toolbar.

plain-page — added only when the page is considered a “plain content page” (see H1 visibility rules below).

{{GlobalCssClass}} — platform-provided extra global CSS class.

H1 / page title block

The layout includes an H1 in a .page-title wrapper:

<div class="page-title{% if hide_div %} hidden{% endif %}">
  <div class="container">
    <h1 class="-mb-6 lg:-mb-20">{{ Page.metas.title }}</h1>
  </div>
</div>

Visibility rules:

The title block is hidden (hidden) when the page type is one of the predefined “application pages” (example: cart/checkout/product/category/etc.).

The title block is also hidden when Root.Page.Breadcrumbs.size > 2 (i.e. deeper navigation paths where the breadcrumb already provides context).

When the title block is visible, the layout also adds plain-page on the <body>.

Breadcrumbs

The breadcrumb UI is always rendered from the layout:

{% render 'Components\\Breadcrumb\\Default' %}

Notes:

Breadcrumb data comes from Root.Page.Breadcrumbs.

Breadcrumb depth is also used by the layout to decide whether the H1/title block should be shown.

Footer

The footer is rendered after </main> and is composed via the footer component list.

{% render 'Structure\\ComponentsList' with FooterComponents as components %}

Global UI / Modals outside main

After <main>, the layout renders shared UI that should exist on all pages:

Reusables\BackToTop\Default

Reusables\ProductComparisonFloatingButton\Default

Modals:

Reusables\PromptModal\Default

Reusables\ProductModal\Default

Reusables\LoginModal\Default

Debugging helpers

Near the end of the body, the layout includes:

Structure\Json (commonly emits window.viewModel for debugging)

Structure\StagingButton (staging/dev helper)

These are very useful when validating component model contracts.

Script loading order (very important)

The layout loads scripts using defer to ensure predictable execution after parsing.

Scripts include:

Vendor libraries: axios, swiper, lightgallery, nouislider, leaflet, markercluster

/Themes/Noir/componentscripts.js

/Themes/Noir/Assets/js/theme.js

Alpine.js

Why this matters

componentscripts.js typically registers component/reusable JS objects.

theme.js contains shared utilities and Alpine stores used across components.

Alpine runs after the above are available.

Runtime globals injected into `window`

LayoutA.liquid defines configuration flags used by client-side behavior:

window.checkoutConfig

showBilling

showShipping

showPayment

window.translations (example keys used by UI, e.g. Shopping Lists)

window.showProductComparison

window.showShoppingLists

window.showWishlist

window.userAuthenticated

window.userId

These values are referenced by Assets/js/theme.js and various components/reusables.

Recommendations

Page title visibility: title block visibility depends on page type and breadcrumb size.

Global UI: modals/toast exist on every page by design; avoid duplicating them inside components.

Versioning: always keep version query params for asset updates to propagate correctly in cached environments.

LayoutA.liquid

Purpose#

Where it's used#

High-level structure#

HTML & language mode#

Head includes#

Page composition (Header / Body / Footer)#

Header#

Main (#app)#

Body class (<body class="...">)#

H1 / page title block#

Breadcrumbs#

Footer#

Global UI / Modals outside main#

Debugging helpers#

Script loading order (very important)#

Why this matters#

Runtime globals injected into window#

Recommendations#