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,
    "brandIds": [],
    "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.brandIds (array)
Present in the model; the template doesn’t use it directly (it can be part of server-side selection/filtering).

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(id, enableSlider)`

What it does
Initializes Swiper for the BrandList carousel when slider mode is enabled.

Guard clauses (early exits)

If enableSlider is falsy:

returns immediately (no Swiper).

Finds the carousel element:

#brands-carousel-<id>

If not found: returns.

Reads all slides:

.swiper-slide

Advice

This is the correct pattern for theme components: always fail gracefully if expected DOM isn’t present.

Keep enableSlider as a boolean from Liquid. If it comes as a string ("true"), it will still be truthy; if you ever suspect type issues, normalize with enableSlider === true.

Resolve optional UI controls
The function tries to resolve navigation and pagination elements:

Next button:

.swiper-button-next-<id>

Prev button:

.swiper-button-prev-<id>

Pagination container:

.swiper-pagination-<id>

Navigation is only enabled if both next + prev exist.

Advice

This avoids broken Swiper navigation when the buttons aren’t rendered (e.g., slider disabled, or markup changed).

If you change class naming in Liquid, update selectors here to match—these are coupled by design.

Slides-per-view & loop rules
The breakpoints are fixed:

Mobile:

slidesPerView = 2.5

Tablet (≥ 1024):

slidesPerView = 4.5

Desktop (≥ 1440):

slidesPerView = 6.5

Loop rule:

enableLoop = slides.length > slidesPerViewDesktop

i.e. the slider loops only if there are “enough” slides to fill the desktop view.

Advice

The loop threshold uses 6.5 (a fractional value). That means practically loop is enabled when slides.length >= 7.
If you want loop to enable at exactly 6 items, change the logic to use Math.floor(slidesPerViewDesktop) or a dedicated integer threshold.

Fractional slidesPerView is intentional: it gives a “peek” of the next slide and communicates scrollability.

Swiper configuration details
Base config (applies to mobile by default):

loop: enableLoop

slidesPerView: 2.5

spaceBetween: 40

slidesPerGroup: 1

centeredSlides: false

observer: true, observeParents: true (helps when layout changes)

lazy: true

pagination: false (unless pagination element exists)

Breakpoints:

≥ 1024

slidesPerView: 4.5

slidesPerGroup: 2

navigation: { nextEl, prevEl } only when both exist

≥ 1440

slidesPerView: 6.5

slidesPerGroup: 1

navigation only when both exist

Pagination handling:

If .swiper-pagination-<id> exists, it enables:

pagination: { el, clickable: true }

Finally:

new Swiper(carousel, swiperConfig);

Advice

Swiper must be loaded globally before this runs (the code assumes Swiper exists).

observer/observeParents is useful, but if you dynamically replace slides, Swiper may still need manual swiper.update() or destroy/re-init, depending on the change.

slidesPerGroup differs (2 on tablet, 1 on desktop). This is usually a UX choice:

tablet: faster navigation

desktop: smoother/less jumpy movement
If you change it, verify that arrow navigation still “feels right”.

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#

JavaScript#

Global object#

swiperInit(id, enableSlider)#

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

JavaScript

Global object

`swiperInit(id, enableSlider)`

Dependencies

Notes

Extras

Template behavior (Liquid + Alpine)

Header

Slider initialization

Navigation buttons

“Show all brands” button