CategoriesList

Purpose

The CategoriesList component renders a visual list of categories (category cards), optionally as a Swiper slider.

It supports:

Optional header/description area

Optional “Show all categories” button linking to /categories

Category cards linking to /<path>/<alias>

Optional slider mode with pagination dots

Inputs (model contract)

Model shape (storefront example)

{
  "description": null,
  "showAllCategoriesButton": null,
  "enableSlider": null,
  "categories": [
    {
      "title": "Sample category title",
      "alias": "sample-category-alias",
      "path": "category",
      "mediaItem": {
        "id": "Image Id",
        "link": "https://example.com/sample",
        "mediaType": "Image"
      }
    },
    ...
  ],
  "name": "CategoriesList",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirCategoriesList",
    "name": "CategoriesList",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "Sample display name",
    "cssClass": "(UNDEFINED)",
    "header": "Sample header",
    "alignment": "Left"
  },
  "translations": {
    "showAllCategories": "Sample translation",
    "clickToLearnMoreAbout": "Sample translation"
  }
}

Required fields

settings.id
Used for:

wrapper id: comp-{{ id }}

swiper container id: categories-carousel-{{ id }}

pagination class suffix: swiper-pagination-{{ id }} (when slider is enabled)

categories[]
Component renders only when categories exists and categories.length > 0.

Optional fields

settings.cssClass
Applied to wrapper only when non-empty and not (UNDEFINED).

settings.header (string)
Used as the title, unless a breadcrumb label overrides it (see “Template behavior”).

Root.Page.Breadcrumbs (Liquid)
Used by the template to optionally override the header label.

settings.description (string)
Optional description shown under the header.

settings.alignment (string enum)
Controls header alignment classes:

Left (default)

Center

Right

settings.enableSlider (boolean)
If true:

Swiper is initialized

pagination dots are rendered

settings.showAllCategoriesButton (boolean)
If true, renders a CTA button linking to /categories.

JavaScript

Global object

The component exposes a global object:

It’s triggered from the template via Alpine x-init:

x-init="categorieslistdefault.swiperInit('{{ id }}', {{ enableSlider }})"

This component doesn’t return Alpine reactive state; Alpine is used only to run initialization on mount.

swiperInit

Initializes Swiper for the CategoriesList carousel when slider mode is enabled.

It targets #categories-carousel-<id>, wires pagination via .swiper-pagination-<id>, and applies responsive breakpoints (including Swiper grid mode on larger screens).

Dependencies

Swiper (CSS + JS) when slider is enabled

Alpine.js (only for x-init, not for reactive state)

Notes

If enableSlider = false, the list is rendered without Swiper behavior.

If Swiper isn’t loaded and enableSlider = true, the carousel won’t behave as intended.

Title may be overridden by Root.Page.Breadcrumbs[2].label when present; this is useful for category pages but can surprise you if breadcrumb structure changes.

Category links depend on path being correct (category vs categories), since the template builds URLs directly from it.

Extras

Template behavior (Liquid + Alpine)

If available, the component can use a breadcrumb label as the title:

Root.Page.Breadcrumbs[2].label

Priority order:

Root.Page.Breadcrumbs[2].label (if present)

settings.header (if present)

Slider initialization

If enableSlider is true, Swiper is initialized via:

x-init="categorieslistdefault.swiperInit('{{ id }}', {{ enableSlider }})"

If enableSlider is false, no Swiper is created.

Category cards

Each category card:

renders an image background (or fallback)

shows the category title in an overlay

links to /<path>/<alias>

includes an accessibility aria-label based on translations + title

“Show all categories” button

If showAllCategoriesButton is true:

renders a CTA linking to /categories

label comes from translations.showAllCategories

CategoriesList

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

swiperInit#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Header title source (Breadcrumb override)#

Slider initialization#

Category cards#

“Show all categories” button#