VariantSelector component feedback/suggestion

[rub1e]

In the new variant selector component, options with only one value are filtered out (here).

For our store, this is undesirable behaviour as the attribute needs to be displayed (the user needs to know what size the item is, even if there's only one size).

So my feedback/suggestion is that filtering out single-option variants could perhaps be made optional (or even just left to the developer to filter themselves), making the component more flexible.

Or if not, I think this behaviour should be documented as it took me a while to realise what was happening

[therealchrisrock]

I want to add onto that there may be some other props in ProductVariant that developers will wish to include for their stores.

For example, I am working on a store that includes a special label for products that are low in stock.

This is a relatively common design choice that merchants wish to have on their select box; however, the option returned by the VariantSelector only returns a subset of props:

export type VariantOptionValue = {
  value: string;
  isAvailable: boolean;
  to: string;
  search: string;
  isActive: boolean;
};

Maybe there is an abstraction using passthrough props that will allow us to return an option with a type based on what gets passed into it?

[NabeelAhmed1721]

I made a pull request to solve this problem. If it isn't approved by the time you're reading this, you can make a workaround by creating a new copy of the VariantSelector.tsx file and adding the changes from the commits yourself.

[mhmdjaw]

I'm not even sure why they are filtering the one valued options. It's very undesirable for my use case too. I ended up writing a work around but I wish it wasn't forced in the first place.

[jamalsoueidan]

I think it's simple to change, but I can't run the project locally to propose the change.

// Only show options with more than one value
const filteredOptions = hideSingleOptionValues ? options.filter(option =>
  option.values.length > 1
) : options;

return (
  filteredOptions
    .map((option) => {

[jamalsoueidan]

@michenly What do you think?

[blittle]

The change is made in this PR: #2113 and will be available in the 2024.7 release.

[jamalsoueidan]

Perfect! You moved the filter up so it's up to the user! Good choice!

@rub1e @therealchrisrock