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.
Problem
EPVariationPickerrepeatedElements a singleEPVariationOptionListacross every variation axis (Language, Format, …).EPVariationOptionListalready supportsselectionMode: "cards" | "dropdown"(thedropdownbranch 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 — pickingdropdownapplies it to every axis.For an iso.org-faithful PDP we want:
<select>dropdownToday there's no way to express that from a Plasmic builder without forking the picker.
Suggested API
Add a single map prop on
EPVariationPicker:Then forward it to repeated children via a sibling
DataProvider:EPVariationOptionListreadscurrentVariationUIModebefore falling back to its ownselectionModeprop.Why this approach
selectionMode: "dropdown"already renders a native<select>)Alternative considered
"Two scoped
EPVariationOptionLists outside the repeat" — would need a newaxis/forVariationfilter prop and breaking therepeatedElementmodel. No UX benefit over the recommended approach.Note: raw axis name slug not exposed
EPVariationPicker.tsx:248-262currently exposes only{id, name, values}in thecurrentVariationDataProvider, wherename = variation.displayName(the user-facing label, e.g. "Language"). The rawoption.nameslug (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. Addname: variation.nameslug here + siblingDataProvider name="currentVariationUIMode".src/variant-picker/EPVariationOptionList.tsx:75-147— read the override selector before the existingselectionMode === "dropdown"check at L124.src/variant-picker/VariationPickerContext.tsx:4-8— no change needed; selection state is already axis-keyed byvariation.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.