Options

change-option

• Purpose: renders one product option, emits the selection, and provides optionContext to its descendant option displayers. Auto-detects mode from its children: select (<select> with a template <option>), radio (input[type=radio] wrappers), or swatch/button (option-value pills). Clones the per-value template, marks the active value, and marks unavailable/nonexistent values.
• Attributes:
  • name : string = "" - option name, matched case-insensitively (e.g. name="color" resolves Color); the element canonicalizes itself to the option’s real name.
  • group : number = 0 - 1-based option index (group="1" = first option). Used when name is absent. group="0"/negative resolves nothing (SSK-207).
  • (Author exactly one of name / group; neither → renders nothing, SSK-204.)
  • name vs group: name is for a single known product; a non-matching name makes the element self-hide (display: none) - silent, no error. On any multi-product surface (a dynamic [handle] route, a shared PDP layout) use group=: three blocks (group="1"/"2"/"3") cover every Shopify product, extras self-hide (SSK-208/209; blueprint in build-patterns §2.2 “Option pickers on multi-product routes”).
• Required ancestor / context: storesynk-product (consumes productContext); provides optionContext ({ name, group, selected }).
• Children / template rule: TEMPLATE-CLONE - first <option> (select mode), first radio wrapper (radio mode), or first option-value (swatch mode) is the per-value template.
• Events: emits sf:option-change (bubbles, composed; detail = { name, value }).
• State it sets: on each option-value it sets value, toggles the [ss-active] attribute, and sets [ss-unavailable]="nonexistent" / [ss-unavailable]="out-of-stock". Hides itself when the option isn’t found.

option-value

• Purpose: styleable container for one option value (pill / swatch / radio wrapper). The first one is the clone template. A logic-free styleable element - no logic of its own. (Renamed from value-option.)
• Attributes:
  • value : string - ENGINE-SET (the option value name). Do not author.
• Required ancestor / context: change-option (SSK-108).
• Children: optionally show-option-title and/or show-option-swatch, a radio <input>, etc.
• Events / state: none of its own; receives value, [ss-active], [ss-unavailable] from change-option.

show-option-title

• Purpose: invisible (display:contents) text holder inside an option-value; the engine writes that value’s name (e.g. “Red”) into it. A logic-free invisible element. (Renamed from show-label.)
• Attributes: none.
• Required ancestor / context: option-value within change-option (SSK-108).
• Events / state: none.

show-option-swatch

• Purpose: swatch visual inside an option-value; the engine fills its background color or image from the option value’s swatch data. A logic-free styleable element. (Renamed from show-swatch.)
• Attributes:
  • type : "color" | "image" = "" - how to render the swatch. With color, the engine sets background-color; with image, it sets an <img> src (if present) or a background-image. (If type is absent the engine still falls back to color, then image.)
• Required ancestor / context: option-value within change-option (SSK-108).
• Children: optionally an <img> (for image swatches).
• Events / state: none of its own (engine sets inline style).

show-option-label

• Purpose: displays an option group’s name (e.g. “Color”). Dual-mode: nested inside a change-option it reads the group from optionContext; standalone it resolves from a group/name attribute + the product. (New.)
• Attributes:
  • group : number = 0 - 1-based option index (standalone mode).
  • name : string = "" - option name, case-insensitive (standalone mode).
  • (Inside a change-option, neither is needed - it reads the context.)
• Required ancestor / context: storesynk-product (consumes productContext), optionally inside change-option (consumes optionContext).
• Events / state: none.

show-active-option-title

• Purpose: displays the currently selected value for a group (e.g. “Red”). Same dual-mode resolution as show-option-label. (New.)
• Attributes:
  • group : number = 0 - 1-based option index (standalone mode).
  • name : string = "" - option name, case-insensitive (standalone mode).
• Required ancestor / context: storesynk-product, optionally inside change-option.
• Events / state: none. Re-renders as the selection changes.

---

Imported from the Storesynk skill v0.1.0 (references/component-reference.md). To change this page, change it there.