Product options (unstable)

[wizardlyhel]

Reworking product page to anticipate the new unstable API on product options and variants

WHY are these changes introduced?

2024-10 SFAPI will be introducing some changes to the product api.

WHAT is this pull request doing?

• Clean up routes/product.$handle.tsx - We should no longer need all variants (WIP)
• Provide convenient data function getProductOption to correctly maps variants to various new api data

HOW to test your changes?

This PR has to run on the unstable SFAPI version

• Product with swatch - http://localhost:3000/products/the-huebert-snowboard?Size=154cm&Color=Ember
• Combined listing - http://localhost:3000/products/snowboard

Post-merge steps

Checklist

• I've read the Contributing Guidelines
• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've added a changeset if this PR contains user-facing or noteworthy changes
• I've added tests to cover my changes
• I've added or updated the documentation

[shopify]

Oxygen deployed a preview of your hl-product-options branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 18, 202410:12 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 18, 202410:12 PM
classic-remix	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 18, 202410:12 PM
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 18, 202410:12 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 18, 202410:12 PM
sitemap	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 18, 202410:12 PM

Learn more about Hydrogen's GitHub integration.

[blittle]

I think this should be:

Suggested change

	const variant: ProductVariant = variants[targetKey] || value.firstSelectableVariant;
	const variant: ProductVariant = variants[targetKey] || product.selectedOrFirstAvailableVariant;

[wizardlyhel]

It's not. product.options.optionValues.firstSelectableVariant is the first available variant of this product variant. For example ...

We have product options as follows and the selected option is ['Red', 'Small'] and colors options is a combined listing.

[
  ['Red', 'Blue'],
  ['Small', 'Medium', 'Large]
]

Let's say I need to generate a link for Blue option, however, ['Blue', 'Small'] is an option that doesn't exist and the first available variant is ['Blue', 'Medium'].

This is where we need the product.options.optionValues.firstSelectableVariant which will return the variant for ['Blue', 'Medium']