ProductAttributes

Purpose

ProductAttributes is a product-detail reusable that renders structured product attribute/specification rows.

It ensures attributes are displayed consistently across product presentation contexts.

Where it's rendered

It’s rendered in multiple places:

Components/ProductAttributes/Default.liquid

Components/ProductSingle/Default.liquid

From Components/ProductAttributes/Default.liquid:

{% render 'Reusables\\ProductAttributes\\Default', attributes: attributes %}

Inputs (Liquid render parameters)

Named parameters:

attributes

The reusable expects attributes to be an array of attribute items.

Template behavior (Liquid + Alpine)

The template renders a <ul> list and iterates attributes.

Each attribute item is rendered only if item.attributeItemValue is truthy.

For each rendered item it outputs a responsive grid:

left column: item.name

right column: item.attributeItemValue

It applies alternating zebra background styles based on index parity (forloop.index0 | modulo: 2).

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 attribute item.

Model shape (storefront example)

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

{
  "attributes": [
    {
      "name": "Sample text",
      "slug": "sample",
      "usedAsFilter": false,
      "displayOnProduct": true,
      "displayOnList": true,
      "displayOnCompare": true,
      "attributeId": "Attribute Id",
      "attributeItemId": "Attribute Item Id",
      "attributeItemValue": "Sample text"
    },
    ...
  ]
}

attributes[] item fields (as consumed by Liquid)

Required for meaningful rendering:

name

Rendered as the label (left column).

attributeItemValue

Rendered as the value (right column). Also acts as a guard: if falsy, the item is not rendered.

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

slug

usedAsFilter

displayOnProduct

displayOnList

displayOnCompare

attributeId

attributeItemId

JavaScript

File: Reusables/ProductAttributes/Default.js

Exposes: productattributesreusabledefault = {}

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/ProductAttributes/Default.liquid

Notes

If attributeItemValue contains long strings, the layout will wrap inside the right column.

This reusable does not currently use translations (Default.json is effectively empty).

ProductAttributes

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

Model shape (storefront example)#

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

JavaScript#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#