ProductAttachments

Purpose

ProductAttachments is a product-detail reusable that renders downloadable product attachment/document links.

It standardizes attachment listing and link presentation inside product-focused views.

Where it's rendered

It’s rendered in multiple places:

Components/ProductAttachments/Default.liquid

Components/ProductSingle/Default.liquid

From Components/ProductAttachments/Default.liquid:

{% render 'Reusables\\ProductAttachments\\Default', attachments: 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

File: Reusables/ProductAttachments/Default.js

Exposes: productattachmentsreusabledefault = {}

Global Alpine stores

No direct Alpine store dependencies are used by this reusable.

Services / API calls

No direct API/service calls are made by this reusable.

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 Alpine stores#

Services / API calls#

Dependencies#

Notes#