Fix partial shop variant availability

[tannerlinsley]

Evidence

Commit bf855523 made product options dependent, but its partial availability checks returned the first matching variant. If that variant was sold out, an option was marked unavailable even when a later matching variant was in stock. Large dropdowns could disable every first-step value for the same reason.

Fix

• Treat an option as available when any matching variant is in stock.
• Use the same availability rule in the product drawer and full product page.
• Keep exact variant selection unchanged for pricing and add-to-cart.

Impact

Customers can select valid colors and other leading options when one size is sold out but another remains available.

Validation

• Added focused partial, exact, and all-sold-out variant tests.
• pnpm test passes: TypeScript, type-aware lint, and 153 unit tests (152 passed, 1 opt-in smoke test skipped).

Risk

Low. The change only affects option availability display and disabling. Exact variant selection and cart submission are unchanged.

Summary by CodeRabbit

• Bug Fixes

  • Improved product option availability checks across product drawers and product pages.
  • Options now remain selectable when a matching available variant exists, including partial selections.
  • Prevented unavailable options from appearing selectable when all matching variants are sold out.

• Tests

  • Added coverage for partial and complete variant selections, including unavailable matches.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f9c9f7e7-78c3-41db-b0d2-7e284ad113d7

📥 Commits

Reviewing files that changed from the base of the PR and between c1c213d and 9576843.

📒 Files selected for processing (4)

• src/components/shop/ProductDrawer.tsx
• src/routes/shop.products.$handle.tsx
• src/utils/shopify-queries.ts
• tests/shopify-variant.test.ts

---

📝 Walkthrough

Walkthrough

The change adds a shared hasAvailableVariant helper and updates product drawer and product route option controls to use it. Tests cover partial and complete selections, including unavailable matching variants.

Changes

Variant availability matching

Layer / File(s)	Summary
Shared availability helper and tests src/utils/shopify-queries.ts, tests/shopify-variant.test.ts	hasAvailableVariant checks available variants against all provided option values. Tests cover partial, complete, and unavailable selections.
Product drawer availability integration src/components/shop/ProductDrawer.tsx	Select, size, color, and other option controls now use hasAvailableVariant.
Product route availability integration src/routes/shop.products.$handle.tsx	Select, size, and chip controls now use hasAvailableVariant. The local matcher was removed.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: abeuty

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: fixing partial product variant availability.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/fix-shop-partial-variant-availability

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	9576843	Commit Preview URL Branch Preview URL	Aug 07 2026, 02:10 PM