Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes to <VariantSelector> API and add useVariantUrl hook #1094

Merged
merged 1 commit into from
Jul 14, 2023

Conversation

blittle
Copy link
Contributor

@blittle blittle commented Jul 12, 2023

Fixes to <VariantSelector> API and add useVariantUrl hook.

  1. <VariantSelector> now takes handle as a property. This makes the component useable on pages other than the default PDP route.
  2. <VariantSelector> also gives you the product options search param, so if you have a custom PDP route, you can still link to it.
  3. The useVariantUrl is useful for situations where you want to get a link to a product variant.

WHY are these changes introduced?

Fixes #0000

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

@blittle blittle requested a review from juanpprieto July 12, 2023 19:19
@github-actions
Copy link
Contributor

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset.
If the changes are user-facing and should cause a version bump, run npm run changeset add to track your changes and include them in the next release CHANGELOG.
If you are making simple updates to examples or documentation, you do not need to add a changeset.

@blittle blittle force-pushed the bl-fix-variantselector branch from 25795e4 to 6ab6096 Compare July 13, 2023 20:21
@blittle blittle changed the title Fix VariantSelector to take a paramsPrefix Fixes to <VariantSelector> API and add useVariantUrl hook Jul 13, 2023
@@ -19,7 +19,8 @@
"version:hydrogen": "node -p \"'export const LIB_VERSION = \\'' + require('./packages/hydrogen/package.json').version + '\\';'\" > packages/hydrogen/src/version.ts",
"version:cli": "cd packages/cli && npm run generate:manifest",
"changeset": "changeset",
"clean-all": "rimraf node_modules/.bin && rimraf node_modules/.cache && rimraf packages/*/dist && rimraf templates/*/.cache"
"clean-all": "rimraf node_modules/.bin && rimraf node_modules/.cache && rimraf packages/*/dist && rimraf templates/*/.cache",
"check": "npm run build && npm run lint && npm run typecheck && npm run test"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I run all of these before commit. So figured I'd add a simple check command.

import {useVariantUrl} from '@shopify/hydrogen';

function MyComponent() {
const {to, search} = useVariantUrl('snowboard', [
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't return a real URL object, because we don't easily have the origin at the moment, because useLocation() doesn't return it. I felt like path or pathname implies it doesn't include the search (because the native URL.prototype.pathname doesn't).

@juanpprieto juanpprieto merged commit fa71938 into 2023-04 Jul 14, 2023
@juanpprieto juanpprieto deleted the bl-fix-variantselector branch July 14, 2023 08:01
FrcPpe pushed a commit to FrcPpe/hydrogen that referenced this pull request Aug 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants