Skip to content

EPVariationPicker: support per-axis input type (selectionModeByAxis) #336

@field123

Description

@field123

Problem

EPVariationPicker repeatedElements a single EPVariationOptionList across every variation axis (Language, Format, …). EPVariationOptionList already supports selectionMode: "cards" | "dropdown" (the dropdown branch renders a real native <select>), but because the list is repeated for every axis, a single Plasmic instance can't carry different values per axis — picking dropdown applies it to every axis.

For an iso.org-faithful PDP we want:

  • Language axis → native <select> dropdown
  • Format axis → radio buttons (or chip buttons)

Today there's no way to express that from a Plasmic builder without forking the picker.

Suggested API

Add a single map prop on EPVariationPicker:

selectionModeByAxis?: Record<string, "cards" | "dropdown">
// keyed by raw axis `name` slug (e.g. "language", "format")
// falls back to the existing `selectionMode` for any axis not in the map

Then forward it to repeated children via a sibling DataProvider:

// EPVariationPicker.tsx — inside the repeatedElement loop
<DataProvider name="currentVariation" data={{ id, name: variation.name, displayName: variation.displayName, values }}>
  <DataProvider name="currentVariationUIMode" data={selectionModeByAxis?.[variation.name] ?? selectionModeOverride}>
    {/* repeated children */}
  </DataProvider>
</DataProvider>

EPVariationOptionList reads currentVariationUIMode before falling back to its own selectionMode prop.

Why this approach

  • Preserves single-instance repeat model — no breaking changes to existing layouts
  • Reuses an API that's already production-ready (selectionMode: "dropdown" already renders a native <select>)
  • Only requires Plasmic builders to set one prop at the picker level
  • ~30 LOC change

Alternative considered

"Two scoped EPVariationOptionLists outside the repeat" — would need a new axis/forVariation filter prop and breaking the repeatedElement model. No UX benefit over the recommended approach.

Note: raw axis name slug not exposed

EPVariationPicker.tsx:248-262 currently exposes only {id, name, values} in the currentVariation DataProvider, where name = variation.displayName (the user-facing label, e.g. "Language"). The raw option.name slug (e.g. "language") is not exposed. The fix here should also surface the slug so consumers can key off a stable value rather than the display label.

Callsites

  • src/variant-picker/EPVariationPicker.tsx:248-262 — repeat loop + DataProvider. Add name: variation.name slug here + sibling DataProvider name="currentVariationUIMode".
  • src/variant-picker/EPVariationOptionList.tsx:75-147 — read the override selector before the existing selectionMode === "dropdown" check at L124.
  • src/variant-picker/VariationPickerContext.tsx:4-8 — no change needed; selection state is already axis-keyed by variation.id.

Use case

Building iso.org pixel-faithful PDPs in iso-storefront. See https://www.iso.org/standard/31621.html buy panel as the visual target — Language as <select>, Format as native radios.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions