Metafields

Display merchant-defined product metafields. show-metafield resolves one metafield by key (or its field alias) + namespace (default custom) and renders it by type; metafield-wrapper hides a whole label+value block when its metafields are absent; metafield-item is the per-value template a list.* metafield clones. The metafield identifiers are collected from the DOM and fetched via the PRODUCT_METAFIELDS query, then held on productContext.metafields.

show-metafield

• Purpose: metafield displayer. Renders by type - scalars as text; url/link onto a nested <a>; money/dimension/weight formatted; rich_text_field as HTML; file_reference as <img>/<video>/download link; and list.* types by cloning a nested metafield-item per value. Extends LightElement.
• Attributes:
  • key : string = "" - the metafield key (required to resolve anything, unless field is given).
  • field : string = "" - an alias for key; when both are set, field wins. It exists because React/JSX silently swallows a key prop (React’s reserved list key), so in @storesynk/next / any React JSX you must author field=, never key=. In plain HTML (no-build sites, Astro .astro templates) either works - key= is the conventional spelling there. Read identically by the client element, the SSR transform, and collectMetafieldIdentifiers.
  • namespace : string = "custom" - the metafield namespace.
• Required ancestor / context: storesynk-product (consumes productContext).
• Children / template rule: for a list.* metafield, exactly one metafield-item template (cloned per value). Scalar metafields need no children. No SSK-107 - a scalar renders without a template.
• Events: none.
• State it sets: [ss-empty] (and clears itself) when the metafield is missing or blank - hide with show-metafield[ss-empty] { display:none }.

metafield-wrapper

• Purpose: groups a metafield displayer with its label and hides the whole block when none of its descendant show-metafield elements resolve to a value (so a “Care:” label never shows for a product lacking the metafield). Extends LightElement.
• Attributes: none.
• Required ancestor / context: storesynk-product (consumes productContext).
• Children: a label + one or more show-metafield.
• Events: none.
• State it sets: [ss-empty] on itself when no descendant show-metafield has a value - hide with metafield-wrapper[ss-empty] { display:none }.

metafield-item

• Purpose: the per-value template a list.* metafield clones (one clone per list value). A logic-free styleable element - no logic of its own.
• Attributes: none.
• Required ancestor / context: show-metafield (SSK-108).
• Children: whatever markup should repeat per value; the engine writes each value into the clone (text, or an <a>/<img> for link/file types).
• Events / state: none.

---

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