ProductsBlock

Purpose

The ProductsBlock component renders a product list section (grid + mobile carousel) for a resolved collection.

It:

renders only when products exists and contains items

renders up to 8 products

shows a More button that links to collectionUrl when there are more than 8 products

Inputs (model contract)

Model shape (storefront example)

{
  "products": [
    {
      "vatIncluded": true,
      "vatRate": 25,
      "reducedVatRate": 5,
      "unitText": "Sample text",
      "isMpnVisible": true,
      "isSkuVisible": true,
      "title": "Sample product title",
      "alias": "sample-product-alias",
      "status": "Active",
      "categoryId": "Category Id",
      "categoryName": "Sample category name",
      "categoryLink": "/category/sample",
      "additionalCategoryIds": [],
      "tags": [
        "sample-tag",
        "..."
      ],
      "pathCategories": [
        "Path Category Id",
        "..."
      ],
      "stockAvailabilityModelId": "Stock Availability Model Id",
      "isBundle": false,
      "id": "Product Id",
      "companyId": "Company Id",
      "link": "product/sample-product",
      "mediaItems": [
        {
          "id": "Media Item Id",
          "link": "https://example.com/media/sample.jpg",
          "position": 0,
          "alt": "sample.jpg",
          "mediaType": "Image"
        },
        "..."
      ],
      "maxPrice": 50,
      "minPrice": 35,
      "maxRetailPrice": 25,
      "minRetailPrice": 25,
      "updateDate": "2025-01-01T00:00:00.0000000+00:00",
      "insertDate": "2025-01-01T00:00:00.0000000+00:00",
      "variantCount": 24,
      "additionalFeatures": {
        "icoTags": [
          {
            "id": "IcoTag Id",
            "name": "Sample text"
          },
          "..."
        ]
      },
      "searchAttributes": [
        "Sample search attribute",
        "..."
      ],
      "productVariants": [
        {
          "quantityConstraints": {
            "additive": {
              "minimum": 1,
              "maximum": 999999,
              "step": 1,
              "isValid": true
            },
            "absolute": {
              "minimum": 1,
              "maximum": 999999,
              "step": 1,
              "isValid": true
            }
          },
          "id": "Variant Id",
          "mediaItem": {},
          "unitPrice": 25,
          "price": 25,
          "quantity": 0,
          "retail": {
            "price": 25,
            "unitId": "(UNDEFINED)",
            "unitPrice": 25
          },
          "dimension1ItemId": "Attribute Item Id",
          "dimension2ItemId": "Attribute Item Id",
          "sellOutOfStock": true,
          "unitId": "Unit Id",
          "requiresShipping": false,
          "translation": {},
          "canOrder": true,
          "additionalFeatures": {},
          "bundleItems": [],
          "shoppingLists": [],
          "startQuantity": 1,
          "finalPriceText": "Sample price text",
          "finalPrice": 25
        },
        "..."
      ],
      "attributes": [
        {
          "attributeId": "Attribute Id",
          "attributeItemId": "Attribute Item Id",
          "attributeItemValue": "Sample text",
          "name": "Sample text",
          "slug": "sample-slug",
          "usedAsFilter": false,
          "displayOnProduct": true,
          "displayOnList": true,
          "displayOnCompare": true
        },
        "..."
      ],
      "icoTags": [
        {
          "id": "IcoTag Id",
          "name": "Sample text",
          "icon": {
            "alt": "Sample text"
          }
        },
        "..."
      ],
      "labels": [
        {
          "id": "Label Id",
          "name": "Sample text",
          "icon": {
            "alt": "Sample text"
          }
        },
        "..."
      ],
      "dimension1": {
        "id": "Dimension Id",
        "attributeId": "Attribute Id",
        "name": "Sample text",
        "translation": {},
        "type": "Color",
        "usedAsFilter": true,
        "displayOnProduct": true,
        "displayOnList": true,
        "displayOnCompare": true,
        "items": [
          {
            "textColor": "#000000",
            "id": "Attribute Item Id",
            "value": "Sample text"
          },
          "..."
        ]
      },
      "dimension2": {
        "id": "Dimension Id",
        "attributeId": "Attribute Id",
        "name": "Sample text",
        "translation": {},
        "type": "Size",
        "usedAsFilter": true,
        "displayOnProduct": true,
        "displayOnList": true,
        "displayOnCompare": true,
        "items": [
          {
            "id": "Attribute Item Id",
            "value": "S"
          },
          "..."
        ]
      },
      "startPriceText": "Sample price text",
      "startPrice": 25,
      "hasPriceRange": false,
      "inWishlist": false
    },
    "..."
  ],
  "collectionUrl": "/collections/sample-collection",
  "name": "ProductsBlock",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "collectionIds": [
      "Collection Id",
      "..."
    ],
    "description": "Sample text",
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirProductsBlock",
    "name": "ProductsBlock",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "Sample text",
    "cssClass": "",
    "header": "Sample text",
    "alignment": "Left"
  },
  "translations": {
    "clickToLearnMoreAbout": "Sample text",
    "productsBlock": "Sample text",
    "more": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id

products[] (must have at least one item)

Optional fields

settings.cssClass

settings.header

settings.description

settings.alignment

collectionUrl (required for the More button)

JavaScript

Global object

The component uses a global JS object (exposed by Components/ProductsBlock/Default.js) and binds it via Alpine:

<section
  x-data='productsblockdefault.initComponent("{{ id }}", {{ products | serialize | escape }}, "{{ header | default: model.Translations.ProductsBlock }}")'>

Implementation notes:

Swiper is enabled only on smaller viewports (window.innerWidth < 1440).

GA4 list tracking (view item list) is triggered when the carousel enters the viewport.

Dependencies

Reusables\\ProductGridItem\\Default

Swiper (loaded in Structure/LayoutA.liquid)

Global theme utilities (typically in Assets/js/theme.js):

elementInView(...)

prepareListProducts(...)

sendGAEvent(...)

Notes

This doc uses a sanitized storefront model sample (values replaced; keys preserved).

The component doesn't resolve collectionIds itself; it expects the platform to populate products and collectionUrl.

Extras

Template behavior (Liquid + Alpine)

If products is empty/missing, the component doesn't render anything.

The template renders product cards via Reusables\\ProductGridItem\\Default.

Up to 8 products are rendered.

If there are more than 8 products, a More button is shown and links to collectionUrl.

ProductsBlock

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#