BrandList

Purpose

The BrandList component renders a list of brands as:

a responsive Swiper slider (when enableSlider = true), or

a static list/grid-like presentation (when enableSlider = false)

It optionally shows:

a header title

a “Show all brands” button linking to /brands

Each brand links to:

/brand/<alias>

Inputs (model contract)

Model shape (storefront example)

{
  "showAllBrandsButton": false,
  "enableSlider": false,
  "brands": [
    {
      "name": "Sample brand name",
      "alias": "sample-brand-alias",
      "mediaItem": {
        "id": "Image Id",
        "link": "https://example.com/sample",
        "mediaType": "Image"
      }
    },
    ...
  ],
  "name": "BrandList",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "showAllBrandsButton": false,
    "enableSlider": false,
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirBrandList",
    "name": "BrandList",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": "(UNDEFINED)"
  },
  "translations": {
    "showAllBrands": "Sample translation",
    "clickToLearnMoreAbout": "Sample translation",
    "previous": "Sample translation",
    "...": "..."
  }
}

Required fields

settings.id
Used for:

wrapper id: comp-{{ id }}

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

nav button class suffixes: swiper-button-next-{{ id }}, swiper-button-prev-{{ id }}

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

Optional fields

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

settings.header (string)
If present, shown as the section headline.

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

Left (default)

Center

Right

settings.enableSlider (boolean)
If true, Swiper is initialized and next/prev buttons are rendered.

settings.showAllBrandsButton (boolean)
If true, renders a CTA button linking to /brands.

settings.CarouselAutoplay (boolean)
If true, Swiper autoplays through brand slides automatically.

settings.CarouselAutoplayDelay (number)
Delay in milliseconds between auto-advances. Defaults to 3000.

settings.CarouselPauseOnHover (boolean)
If true (default), autoplay pauses when the user hovers over the carousel.

settings.CarouselNavigation (string enum)
Controls which navigation UI is rendered. Defaults to 'Arrows'.
Values: Dots, Arrows, Both.

Root.Page.Metas (Liquid)
Optional page metadata available in the global render context; referenced in the component template.

Template behavior (Liquid + Alpine)

Describe rendering flow, state branches, and key Liquid/Alpine behavior.

JavaScript

Global object

The component exposes a global object:

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

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

This component does not return Alpine reactive state; it only uses Alpine as a “run-on-mount” hook.

swiperInit

Initializes Swiper for the BrandList carousel when enableSlider is enabled.

It targets #brands-carousel-<id>, wires optional navigation/pagination elements (when present), and applies responsive breakpoints for slides-per-view.

carouselNavigation (default 'Arrows') controls which controls are shown: 'Dots', 'Arrows', or 'Both'.

carouselAutoplay enables automatic advancement; carouselAutoplayDelay (default 3000 ms) sets the interval; carouselPauseOnHover (default true) pauses on hover.

Dependencies

Swiper (CSS + JS)

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

Notes

If brands[] is empty or missing, the component renders nothing.

If enableSlider is true but Swiper isn’t loaded, the list will not behave as a slider.

Brands without mediaItem.link will use the no-image fallback; depending on mode, the brand name may also appear as text in the card.

Extras

Template behavior (Liquid + Alpine)

Header

If settings.header exists, it prints a title (uppercase).
Alignment is controlled by settings.alignment.

Slider initialization

If settings.enableSlider is true, Swiper initialization is triggered via:

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

If slider is enabled:

renders prev/next buttons

each button includes screen-reader text from translations (previous, next)

“Show all brands” button

If settings.showAllBrandsButton is true:

renders a CTA linking to /brands

button text comes from translations.showAllBrands

BrandList

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

JavaScript#

Global object#

swiperInit#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Header#

Slider initialization#

Navigation buttons#

“Show all brands” button#

Purpose

Inputs (model contract)

Model shape (storefront example)

Required fields

Optional fields

Template behavior (Liquid + Alpine)

JavaScript

Global object

swiperInit

Dependencies

Notes

Extras

Template behavior (Liquid + Alpine)

Header

Slider initialization

Navigation buttons

“Show all brands” button