Support 2k variant, combined listing usage with getProductOptions #2659

wizardlyhel · 2024-11-28T01:30:59Z

WHY are these changes introduced?

Uses the new product fields to build the product form in support of 2k variant and combined listing:

Provides:

getProductOptions function that will return product options along with the states of this current variant

WHAT is this pull request doing?

HOW to test your changes?

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 · 2024-11-28T01:31:18Z

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

Storefront	Status	Preview link	Deployment details	Last update (UTC)
classic-remix	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 10, 2024 5:13 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 10, 2024 5:13 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 10, 2024 5:13 PM
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 10, 2024 5:13 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 10, 2024 5:13 PM

Learn more about Hydrogen's GitHub integration.

packages/hydrogen-react/src/getProductOptions.ts

wizardlyhel · 2024-12-04T22:46:41Z

Doubled checked on the newly generated types - the SitemapQuery is suppose to go away since it got migrated to the Hydrogen package. We just forgot to update the generated types in the examples.

blittle · 2024-12-09T16:16:40Z

packages/hydrogen-react/src/getProductOptions.ts

+  product: RecursivePartial<Product>,
+): ProductVariant[] {
+  // Checks for valid product input
+  const checkedProduct = checkProductParam(product);


Why does sometimes checkProductParm "checkAll" vs other times not? Looks like it has to do with whether it checks for PRODUCT_INPUTS_EXTRA existing on the return product object. But why would we want to check that in one spot but not the other?

I want to reuse the checkProductParam with the getAdjacentAndFirstAvailableVariants.

The purpose of getAdjacentAndFirstAvailableVariants is to return an unique list of variants found in options.optionValues.firstAvailableVariant, adjacentVariants, and selectedOrFirstAvailableVariant.

The getAdjacentAndFirstAvailableVariants doesn't require other fields to be present like encodedVariantExistence, and encodedVariantAvailability.

templates/skeleton/app/routes/products.$handle.tsx

blittle

In testing it, I noticed going from the collection page to a product, I often landed directly on an unavailable variant. This confused me because we have all the logic for firstAvailableVariant. It turns out we hard-code adding the first selected option in the template: https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/lib/variants.ts#L45

I suggest we update that code to remove the selected option query parameter. That will make it automatically find and select the first available variant.

wizardlyhel · 2024-12-09T18:52:43Z

Good catch - I thought I found all of them

wizardlyhel · 2024-12-10T04:02:33Z

@blittle I have addressed the following:

All product anchor links are now without selected option params
- collection.$handle and collection.all routes renders normal products/$handle link and continues utilizing useVariantUrl (to maintain locale paths)
- search and predictive search queries for selectedOrFirstAvailableVariant in place of first variant
I have exported a new hook useSelectedOptionInUrlParam
- test and docs are written for this new hook
- It will add the selected option of the selectedOrFirstAvailableVariant to the url when landing on a product page, even if the url itself may contain other search params
I left the export of mapSelectedProductOptionToObject as is. I think it is still useful to have but you think we shouldn't export it, let me know and I'll take it out
I have remove the displaying single option value so that we keep the same product form UI look as before

blittle · 2024-12-10T14:42:01Z

/snapit

github-actions · 2024-12-10T14:49:12Z

🫰✨ Thanks @blittle! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20241210144810",
"@shopify/hydrogen": "0.0.0-snapshot-20241210144810"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.

Rheeseyb · 2024-12-10T16:35:00Z

.changeset/three-cows-shave.md

+'@shopify/hydrogen': patch
+---
+
+Introduce `getProductOptions`, `getAdjacentAndFirstAvailableVariants`, and `mapSelectedProductOptionToObject` to support combined listing products and products with 2000 variants limit.


Also needs the new useSelectedOptionInUrlParam hook now

wizardlyhel · 2024-12-10T17:11:46Z

/snapit

github-actions · 2024-12-10T17:13:44Z

🫰✨ Thanks @wizardlyhel! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20241210171242",
"@shopify/hydrogen": "0.0.0-snapshot-20241210171242"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.

getProductOptions

256cd25

wizardlyhel added 7 commits November 29, 2024 11:30

tests and helper functions

68dd48f

more test

3e40ea4

lint

fe6f8ce

Clean up

5ddc8fb

add one more test

8a11fd3

Replace product form

1dd7a59

comments

da91cfa

wizardlyhel marked this pull request as ready for review December 3, 2024 22:28

This comment has been minimized.

Sign in to view

wizardlyhel added 3 commits December 3, 2024 15:43

more comments

3a67d05

docs

4ec0a8f

more docs

6e23e6d

rbshop reviewed Dec 4, 2024

View reviewed changes

packages/hydrogen-react/src/getProductOptions.ts Outdated Show resolved Hide resolved

rbshop approved these changes Dec 4, 2024

View reviewed changes

wizardlyhel added 4 commits December 4, 2024 11:58

docs

d463bae

update b2b example

b36ea1f

fix generated types

bbc91c8

Fix test

a69de5d

add changeset

2b94045

blittle reviewed Dec 9, 2024

View reviewed changes

templates/skeleton/app/routes/products.$handle.tsx Outdated Show resolved Hide resolved

blittle reviewed Dec 9, 2024

View reviewed changes

wizardlyhel added 4 commits December 9, 2024 18:25

address feedbacks

99645ab

don't display single options

bc740e9

lint, typecheck

24a0c90

update generated files

9caa0a4

wizardlyhel added 2 commits December 9, 2024 19:38

update changeset instruction

b647021

update dev docs

707988a

update package lock

b07f6dd

Rheeseyb reviewed Dec 10, 2024

View reviewed changes

update changelog

92a5342

wizardlyhel merged commit a57d526 into main Dec 10, 2024
12 checks passed

wizardlyhel deleted the hl-getProductOptions branch December 10, 2024 21:17

shopify-github-actions-access bot mentioned this pull request Dec 10, 2024

[ci] release 2024-10 #2657

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support 2k variant, combined listing usage with getProductOptions #2659

Support 2k variant, combined listing usage with getProductOptions #2659

wizardlyhel commented Nov 28, 2024

shopify bot commented Nov 28, 2024 •

edited

Loading

This comment has been minimized.

wizardlyhel commented Dec 4, 2024

blittle Dec 9, 2024 •

edited

Loading

wizardlyhel Dec 9, 2024 •

edited

Loading

blittle left a comment

wizardlyhel commented Dec 9, 2024

wizardlyhel commented Dec 10, 2024

blittle commented Dec 10, 2024

github-actions bot commented Dec 10, 2024

Rheeseyb Dec 10, 2024

wizardlyhel commented Dec 10, 2024

github-actions bot commented Dec 10, 2024

Support 2k variant, combined listing usage with getProductOptions #2659

Support 2k variant, combined listing usage with getProductOptions #2659

Conversation

wizardlyhel commented Nov 28, 2024

WHY are these changes introduced?

WHAT is this pull request doing?

HOW to test your changes?

Post-merge steps

Checklist

shopify bot commented Nov 28, 2024 • edited Loading

This comment has been minimized.

wizardlyhel commented Dec 4, 2024

blittle Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

wizardlyhel Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

blittle left a comment

Choose a reason for hiding this comment

wizardlyhel commented Dec 9, 2024

wizardlyhel commented Dec 10, 2024

blittle commented Dec 10, 2024

github-actions bot commented Dec 10, 2024

Rheeseyb Dec 10, 2024

Choose a reason for hiding this comment

wizardlyhel commented Dec 10, 2024

github-actions bot commented Dec 10, 2024

shopify bot commented Nov 28, 2024 •

edited

Loading

blittle Dec 9, 2024 •

edited

Loading

wizardlyhel Dec 9, 2024 •

edited

Loading