BlogHighlights

Purpose

The BlogHighlights component renders a curated set of highlighted blog posts.

On desktop it shows a two-column layout: a list of post titles/excerpts on the left and a stacked set of images on the right, where hovering/focusing a list item reveals its excerpt and cross-fades in the matching image. On mobile it falls back to a Swiper carousel of post cards. A "See all blogs" link is always rendered at the bottom.

It typically shows up on the storefront home page.

Inputs (model contract)

Model shape (storefront example)

{
  "items": [
    {
      "id": "Post Id",
      "title": "Sample title",
      "excerpt": "Sample excerpt text describing the blog post.",
      "alias": "sample-post-alias",
      "categoryTitle": "Sample category",
      "categoryLink": "sample-category",
      "publishedAt": "2026-01-01T00:00:00+00:00"
    },
    {
      "id": "Post Id",
      "title": "Sample title",
      "excerpt": "Sample excerpt text describing the blog post.",
      "alias": "sample-post-alias",
      "categoryTitle": "Sample category",
      "categoryLink": "sample-category",
      "publishedAt": "2025-01-01T00:00:00+00:00",
      "mediaItem": {
        "id": "Image Id",
        "link": "https://example.com/sample",
        "mediaType": "Image",
        "variants": [
          {
            "size": "small",
            "link": "https://example.com/sample-small",
            "width": 150
          },
          {
            "size": "medium",
            "link": "https://example.com/sample-medium",
            "width": 300
          },
          {
            "size": "large",
            "link": "https://example.com/sample-large",
            "width": 600
          },
          {
            "size": "xlarge",
            "link": "https://example.com/sample-xlarge",
            "width": 1000
          }
        ]
      }
    },
    ...
  ],
  "name": "BlogHighlights",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "blogIds": [],
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirBlogHighlights",
    "name": "BlogHighlights",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "Sample display name",
    "cssClass": "Sample cssClass",
    "header": "Sample header"
  },
  "translations": {
    "seeAll": "Sample translation",
    "noImageAltAvailable": "Sample translation",
    "linkTo": "Sample translation"
  }
}

Required fields

items[]
Component renders only when items is present and items.size > 0.

settings.id
Used to form deterministic ids:

wrapper: comp-{{ id }}

mobile swiper container: blogHighlightsCarousel-{{ id }}

mobile pagination: swiper-pagination-{{ id }}

Optional fields

settings.cssClass
Appended when non-empty and not (UNDEFINED).

settings.header
When present and non-empty, renders the section header above the list.

settings.Alignment (string enum)
Controls the header/text alignment. Values: Center, Right, or any other value (default/left). Defaults to left-aligned on desktop, centered on mobile.

item.categoryTitle / item.categoryLink
When both are present and non-empty, renders a category link above the post title.

item.excerpt
When present and non-empty, shown in the expandable excerpt area (desktop) or directly under the title (mobile).

item.mediaItem
When missing or without a link, falls back to GlobalData.Settings.noImage.link, and if that is also empty, to the theme's built-in Assets/images/no-image.svg.

Template behavior (Liquid + Alpine)

Renders nothing if items is empty.

Desktop (lg: and up): a two-column grid — a divided list of post titles/excerpts on the left, and a stack of absolutely-positioned images on the right. Only the image matching activeIndex is visible (cross-fade via opacity + z-index).

Hovering or focusing a list item (@mouseenter / @focusin) calls setActive(index), which updates activeIndex and expands that item's excerpt (grid-rows-[1fr] transition) while collapsing the others.

Mobile (below lg:): renders a Swiper carousel of post cards instead of the two-column layout; slideChange keeps activeIndex in sync with the active slide.

Falls back to the theme "no image" asset per item when item.mediaItem/item.mediaItem.link is missing.

Always renders a "See all blogs" link (/blog/posts) at the bottom.

JavaScript

Global object

The component exposes a global object:

It is used from Liquid via Alpine:

x-data='bloghighlightsdefault.initComponent({{ items | serialize | escape }})'

initComponent(items) returns the Alpine component state + methods for tracking the active highlighted post and booting the mobile Swiper carousel.

initComponent

Factory that returns Alpine state + handlers for the highlighted post list/carousel.

It provides:

state: items, activeIndex, swiperInstance

lifecycle: init()

handlers: setActive(index), swiperInit()

init

Runs on Alpine mount. Defers to this.$nextTick(() => this.swiperInit()) so the Swiper markup is present in the DOM before initialization.

setActive

Sets activeIndex to the given index. Called from the desktop list on @mouseenter/@focusin and from the mobile Swiper slideChange callback, so the active title/excerpt and the active image stay in sync regardless of layout.

swiperInit

Initializes the mobile Swiper carousel (#blogHighlightsCarousel-{id}), where id is this.$root.id with the comp- prefix stripped and escaped via CSS.escape.

No-ops if the carousel element isn't found.

Loops only when there is more than one slide (slidesPerView: 1, slidesPerGroup: 1, spaceBetween: 24).

Wires pagination to .swiper-pagination-{id} when present.

Only creates the Swiper instance once (if (!this.swiperInstance)).

slideChange

Swiper on.slideChange callback: sets activeIndex to swiper.realIndex, keeping the active state in sync when the user swipes on mobile.

Notes

The desktop layout and the mobile carousel render the same items list independently (two separate DOM trees toggled via hidden lg:grid / lg:hidden), rather than one shared list that's restyled — keep both in sync when changing markup.

BlogHighlights

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

JavaScript#

Global object#

initComponent#

init#

setActive#

swiperInit#

slideChange#

Notes#