ProductAttachments

Purpose

The ProductAttachments component renders a simple list of product-related attachments (PDFs, manuals, etc.) on the Product page.

It:

Shows an optional header/title.

Renders nothing when there are no attachments.

Delegates the actual list rendering to the reusable Reusables\\ProductAttachments\\Default.

Inputs (model contract)

Model shape (storefront example)

{
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirProductAttachments",
    "name": "ProductAttachments",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "Sample text",
    "cssClass": "",
    "header": "Sample text",
    "alignment": "Left"
  },
  "attachments": [
    {
      "alt": "sample-file.pdf",
      "link": "https://example.com/media/sample.pdf",
      "title": "sample-file.pdf",
      "icon": {
        "link": "#"
      }
    },
    "..."
  ],
  "name": "ProductAttachments",
  "view": "Default",
  "section": "SectionA",
  "translations": {
    "": null
  }
}

Required fields

settings.id

attachments[]
The component renders only when attachments.size > 0.

Optional fields

settings.cssClass

settings.header
When provided (non-empty), rendered as an <h2> above the list.

settings.alignment
Controls the alignment of the header block.
Supported values (as used in Liquid): Left (default), Center, Right.

JavaScript

There is no client-side behavior for this component.

Components/ProductAttachments/Default.js defines an empty object so the component matches the theme's component structure.

const productattachmentsdefault = {};

Dependencies

Liquid reusable: Reusables\\ProductAttachments\\Default

Notes

The component is used in Pages/product.json (SectionA).

Links are rendered as <a target="_blank">.

Each attachment row shows a PDF icon using the class: ic-pdf.

Extras

Template behavior (Liquid)

Reads:

model.Settings.Header

model.Settings.Alignment

model.Attachments

Render condition:

The entire <section> is rendered only if attachments exists and attachments.size > 0.

Reusable rendering

The list is rendered by:

{% render 'Reusables\\ProductAttachments\\Default', attachments: attachments %}

ProductAttachments

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Dependencies#

Notes#

Extras#

Template behavior (Liquid)#

Reusable rendering#