RelatedProducts

Purpose

The RelatedProducts component renders one or more product carousels for related product relations.

It:

renders only when relations[] is non-empty

optionally renders a main header (settings.header)

for each relation:

optionally renders a relation title

renders a Swiper carousel of relation.selectedProducts[]

sends a GA4 viewItemList when the carousel enters the viewport

Inputs (model contract)

Model shape (storefront example)

{
  "relations": [
    {
      "title": "Sample title",
      "selectedProducts": [
        {
          "id": "Product Id",
          "title": "Sample product title",
          "link": "product/sample-product",
          "mediaItems": [
            {
              "id": "Media Item Id",
              "link": "https://example.com/media/sample.jpg",
              "position": 0,
              "alt": "sample.jpg",
              "mediaType": "Image"
            },
            "..."
          ],
          "productVariants": [
            {
              "id": "Variant Id",
              "finalPriceText": "Sample price text",
              "finalPrice": 10
            },
            "..."
          ],
          "dimension1": {
            "attributeId": "Attribute Id",
            "type": "Color",
            "items": [
              {
                "id": "Attribute Item Id",
                "value": "Sample text"
              },
              "..."
            ]
          },
          "dimension2": {
            "attributeId": "Attribute Id",
            "type": "Size",
            "items": [
              {
                "id": "Attribute Item Id",
                "value": "S"
              },
              "..."
            ]
          }
        },
        "..."
      ]
    },
    "..."
  ],
  "name": "RelatedProducts",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "relatedProductsAssociationType": "Product",
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirRelatedProducts",
    "name": "RelatedProducts",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": "",
    "header": "Sample text",
    "alignment": "Left"
  },
  "translations": {
    "relatedProducts": "Sample text"
  }
}

Required fields

settings.id

Optional fields

settings.cssClass

settings.header (main header for the whole section)

settings.alignment (Left, Center, Right)

relations[]

When empty/missing, the component renders nothing.

Per relation:

relation.title

relation.selectedProducts[]

translations.relatedProducts

JavaScript

Global object

Components/RelatedProducts/Default.js exposes:

Liquid binds it via Alpine:

<div x-data='relatedproductsdefault.initComponent("{{ relationId }}", {{ products | serialize | escape }}, "{{ relation.Title | default: model.Translations.RelatedProducts }}")'>

`initComponent(id, products, headerTitle)`

What it does

Creates and returns the Alpine state object for one relation carousel.

`init()`

What it does

Initializes the Swiper instance.

Registers an “in view” hook that sends GA4 viewItemList when 25% of the carousel is visible.

Key behaviors / edge cases

Uses elementInView("#products-carousel-" + id, ...), so carousel ids must match Liquid.

`swiperInit(id)`

What it does

Creates a Swiper on #products-carousel-<id>.

Enables pagination in .swiper-pagination-<id>.

Uses breakpoints:

mobile: 1 per view

>= 1024: 4 per view

Key behaviors / edge cases

Enables looping only when slides.length > 4.

Dependencies

Alpine.js

Swiper

Reusables\\ProductGridItem\\Default

Theme utilities:

elementInView(...)

prepareListProducts(...)

sendGAEvent(...)

Notes

Even though the Swiper component has pagination, there are no next/prev arrows.

The top-level settings.header is optional; relation titles can be shown per relation.

Extras

Template behavior (Liquid + Alpine)

Computes alignmentClass from settings.alignment.

Builds a relationId as <componentId>-<index> so multiple carousels on the same page don’t collide.

Computes colorExists for the relation by scanning products for a Color dimension.

RelatedProducts

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

initComponent(id, products, headerTitle)#

init()#

swiperInit(id)#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Purpose

Inputs (model contract)

Model shape (storefront example)

Required fields

Optional fields

JavaScript

Global object

`initComponent(id, products, headerTitle)`

`init()`

`swiperInit(id)`

Dependencies

Notes

Extras

Template behavior (Liquid + Alpine)