ProductAttachments

Purpose

The ProductAttachments reusable renders a simple list of product attachment links (typically PDFs) for a product, using the attachments passed in from a parent component.

Where it's rendered

This reusable is rendered from:

Components/ProductAttachments/Default.liquid

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

Components/ProductSingle/Default.liquid

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

Inputs (Liquid render parameters)

Named parameters:

attachments

The reusable expects attachments to be an array of attachment items.

Template behavior (Liquid + Alpine)

The template iterates attachments and renders one row per item.

Each row contains:

an anchor that opens in a new tab (target="_blank")

an aria-label that includes Reusables.ProductAttachments.Translations.ViewAttachment plus the attachment alt

a PDF icon element (ic-pdf)

There is no Alpine wiring in this reusable (no x-data, no $store usage).

Data contract (JS runtime)

This reusable is Liquid-only, but it has a strict runtime data contract for each attachment item.

Model shape (storefront example)

Example (from a real ProductAttachments model dump) keeping only the relevant fields for this reusable:

{
  "attachments": [
    {
      "alt": "Sample text",
      "link": "https://example.com/sample",
      "title": "Sample text",
      "icon": {
        "link": "#"
      }
    },
    ...
  ]
}

`attachments[]` item fields (as consumed by Liquid)

link

Used as the anchor href.

title

Rendered as the anchor text.

alt

Used in the anchor aria-label.

Optional fields (present in sample data but not used by the current template):

icon.link

Present in the backend payload but not rendered by Reusables/ProductAttachments/Default.liquid.

If any of these are missing, the rendered output may be incomplete (e.g. empty link text or an aria-label without the attachment description).

JavaScript

Global object

Global object: productattachmentsreusabledefault

Notes:

It is currently an empty object ({}) and is not referenced by the Liquid template.

If JS behavior is added later, prefer a factory pattern only if Liquid parameters are required.

Dependencies

Liquid: Reusables/ProductAttachments/Default.liquid

Translations: Reusables/ProductAttachments/Default.json

Icons/style: uses the ic-pdf icon class (provided by the theme icon font).

Notes

The parent component(s) are responsible for deciding when to render attachments and for passing the attachments array.

Translation usage in this reusable is limited to the aria-label prefix (ViewAttachment).

ProductAttachments

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

Model shape (storefront example)#

attachments[] item fields (as consumed by Liquid)#

JavaScript#

Global object#

Dependencies#

Notes#