ProductAttributes

Purpose

The ProductAttributes component renders a product “attributes/specs” section.

It:

renders only when attributes exists and contains items

optionally renders a section header

delegates the list rendering to the reusable: Reusables\\ProductAttributes\\Default

Inputs (model contract)

Model shape (storefront example)

{
  "attributes": [
    {
      "name": "Sample text",
      "slug": "sample-slug",
      "usedAsFilter": false,
      "displayOnProduct": true,
      "displayOnList": true,
      "displayOnCompare": true,
      "attributeId": "Attribute Id",
      "attributeItemId": "Attribute Item Id",
      "attributeItemValue": "Sample text"
    },
    "..."
  ],
  "name": "ProductAttributes",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirProductAttributes",
    "name": "ProductAttributes",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": "",
    "header": "Sample text",
    "alignment": "Center"
  },
  "translations": {
    "...": "..."
  }
}

Required fields

settings.id

attributes[] (must have at least one item)

Optional fields

settings.cssClass

settings.header

settings.alignment (Left | Center | Right)

JavaScript

Global object

Components/ProductAttributes/Default.js exposes:

This component currently has no client-side behavior (no Alpine x-data binding and no methods).

Dependencies

Reusables\\ProductAttributes\\Default

Notes

The component only renders when attributes.size > 0.

Alignment is applied only to the optional header wrapper:

Left → text-left items-start

Center → text-center items-center

Right → text-right items-end

Extras

Template behavior (Liquid + Alpine)

Determines alignment classes using settings.alignment.

Renders:

wrapper <section id="comp-{{ id }}" ...>

optional header <h2> when settings.header is non-empty

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

ProductAttributes

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#