ComponentsList.liquid

Purpose

ComponentsList.liquid is the section renderer of the Noir theme.

It receives a list of component models (e.g. header/body/footer components) and renders each component by dynamically including the correct template file based on the component's Name and View.

This file is critical because it defines the include naming convention that all components must follow.

Where it's used

ComponentsList.liquid is called by the main layout (Structure/LayoutA.liquid) to render:

Header components

Body components

Footer components

Example usage:

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

Inputs

ComponentsList.liquid expects the caller to pass a variable named components, which is an array/list of component models.

Each item (commonly referenced as model) includes (at minimum) these fields:

model.Name (string)
The component type/name (e.g. Announcement, Cart, NavBar).

model.View (string)
The view variant (commonly Default).

The model may also contain other fields used by the component itself (e.g. model.Settings.*, model.Translations.*), but ComponentsList.liquid only needs Name and View to resolve the include.

Core logic (how the include name is built)

For each component model, the template constructs an include name:

Components_<model.Name>_<model.View>

In Liquid, this is done with string concatenation:

{% assign componentTemplateName = 'Components_' | append: model.Name | append: '_' | append: model.View %}
{% include componentTemplateName with model %}

What gets included

The resolved include name must exist as a component template.

Example:

If the model is:

model.Name = "Announcement"

model.View = "Default"

Then componentTemplateName becomes:

Components_Announcement_Default

β€¦and the engine will include the corresponding component template.

Note
This convention means that component folders/views must match what the platform sends in model.Name and model.View.

Recommendations

Template not found: If model.Name or model.View doesn't match an existing template include name, the component will not render.

Renaming folders is risky: Component naming is part of the rendering contract; avoid renaming component folders or views unless the platform model is also updated.

Default view: Most components use View = "Default". Ensure your templates follow the expected naming pattern.

ComponentsList.liquid

Purpose#

Where it's used#

Inputs#

Core logic (how the include name is built)#