VariantSelector only support full locale identifier format

[qiushihe]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

latest

What version of Remix are you using?

No response

Steps to Reproduce

1. Setup a Hydrogen store
2. Create a product with more than 1 variant selection (i.e. both "size" and "colour")
3. Configure the store so it uses URL path to identify locale, by following guide: https://shopify.dev/docs/storefronts/headless/hydrogen/markets/multiple-languages-url-paths, and use the abbreviated locale identifier format (so instead of en-us, use just en which is what the guide uses)
4. Go to the product page with the abbreviated locale identifier (i.e. /en/products/my-product)
5. Select a different variant option

Expected Behavior

The variant selection for both variants should be preserved through URL parameters.

Actual Behavior

Only the selected variant option is preserved.

[qiushihe]

The issue actually comes from this line: https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen/src/product/VariantSelector.ts#L179. As you can see, that regular expression only matches the en-us format, and no other formats, despite your own documentations using the abbreviated format.

So, please update that hook so it can support more locale identifier formats: en, and en_US as well.

Thanks!

[frandiox]

@juanpprieto @blittle should we get the locale from the <VariantSelector> props optionally? Otherwise, maybe we should consider injecting the locale from the server -- we have it in getLocaleFromRequest so we could return it in the root loader and put it in a React provider.

[blittle]

@frandiox @benjaminsehl we are talking about introducing a hydrogen provider. This might be another usecase for doing so. the locale from the request could be passed to it.