ProductDocumentation

Purpose

The ProductDocumentation component renders an “extra information” section made of one or more content blocks.

Each block (“line”):

can render an image (line.mediaItem.link)

can render a title (line.title)

can render a rich HTML description (line.description)

alternates layout left/right per row on desktop (odd rows reversed)

Inputs (model contract)

Model shape (storefront example)

{
  "lines": [
    {
      "id": "Line Id",
      "title": "Sample title",
      "description": "<p>Sample description</p>",
      "position": 0,
      "mediaItem": {
        "id": "Media Item Id",
        "galleryId": "Gallery Id",
        "link": "https://example.com/media/sample.jpg",
        "mediaType": "Image"
      },
      "translation": {},
      "imageTranslation": {}
    },
    "..."
  ],
  "name": "ProductDocumentation",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirProductDocumentation",
    "name": "ProductDocumentation",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "Sample text",
    "cssClass": "",
    "header": "Sample text"
  },
  "translations": {
    "": null
  }
}

Required fields

settings.id

lines[]

The component renders nothing if the list is missing/empty.

Optional fields

settings.cssClass

Per line:

line.title (if missing/empty, no <h2> is rendered)

line.description (if missing/empty, no description is rendered)

line.mediaItem.link (if missing/empty, no <img> is rendered)

line.mediaItem.alt

JavaScript

Global object

Components/ProductDocumentation/Default.js defines an (currently empty) global object:

There’s no Alpine binding (x-data) in the Liquid template for this component.

Dependencies

Liquid only (no Alpine usage in this template)

Notes

Rendering is gated by linesCount > 0.

Desktop layout alternates per row using lg:flex-row-reverse for odd-index rows.

line.description is rendered as raw HTML ({{ line.description }}), so the backend is expected to provide safe HTML.

Extras

Template behavior (Liquid + Alpine)

Assigns lines = model.Lines and exits early if there are no lines.

For each line:

computes whether the line is odd/even (forloop.index0 | modulo: 2)

renders image and text in two columns on desktop when both exist

reverses the desktop columns for odd rows

ProductDocumentation

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#