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

Add B2B examples to hydrogen #1677

Closed
dustinfirman opened this issue Jan 23, 2024 · 12 comments · Fixed by #1886
Closed

Add B2B examples to hydrogen #1677

dustinfirman opened this issue Jan 23, 2024 · 12 comments · Fixed by #1886
Assignees
Labels
Customer Account API Issues related to https://shopify.dev/docs/api/customer #gsd:38510 Headless storefront API support for B2B

Comments

@dustinfirman
Copy link
Contributor

dustinfirman commented Jan 23, 2024

Currently hydrogen only supports country and language for @inContext. To support B2B for headless we need to have pass the buyer to @inContext

Also, do we want to add a hydrogen b2b template to make it easy for devs to start?

Update: We are going to make a change to cart to support B2B buyers via updating the buyer identity. This means the only changes needed here would be some examples.

@benjaminsehl
Copy link
Member

@dustinfirman any sense of the work required to have Hydrogen support buyer? We're finishing up our 2024-01 release right now, would love to have your help in getting buyer in there if possible!

Re: Template — would be keen to hear what you were thinking for that. Right now @juanpprieto is building out an example of how to build a "Quick Order List" in Hydrogen.

I think that should be sufficient? But curious what scope you had in mind.

@dustinfirman
Copy link
Contributor Author

Hey @benjaminsehl

any sense of the work required to have Hydrogen support buyer

I haven't dug into the hydrogen codebase, so Im not sure the effort required for supporting buyer inContext. Ideally we would be able to do something like storefront.setBuyer(buyer). After doing this, all storefront and cart queries would add buyer to the query variables of requests (similar to how country and language are added). We would also have to update any cart queries/mutations to include buyer.

I don't want to hold up the 2024-01 release, but we would like to have these changes in by 2024-04

Re: Template — would be keen to hear what you were thinking for that. Right now @juanpprieto is building out an example of how to build a "Quick Order List" in Hydrogen.

A quick order list would be great, but I think there are a few other things that would be nice to have examples for

  1. A location picker that saves the buyer context
  2. Updated query strings that include buyer as a query variable and in @inContext
  3. Support for quantityRules and quantityPriceBreaks
  4. An updated login that grabs a storefrontCustomerAccessToken via the storefrontCustomerAccessTokenCreate mutation. (I heard that this may change, so maybe its not needed)

For reference we have a (somewhat messy) demo store that is the hello world hydrogen template + changes we needed to get B2B to work: https://github.com/Shopify/b2b-headless-storefront-prototype

@juanpprieto
Copy link
Contributor

Thanks for sharing these examples @dustinfirman

Feels like we should definitely scope this well to make sure we cover these different use cases. 2024-04 seems like a good target for it.

Will circle back once we have a chance to discuss internally

@albertot
Copy link

Do you have any updates on this? How can we get the prices for a b2b in hydrogen? I am trying to build a B2B store with it, but it looks like we cannot get contextualised prices in the storefront API.

@dustinfirman
Copy link
Contributor Author

@albertot Support for B2B on the storefront API is currently in unstable and official docs are in progress. To get contextualized prices you will need to set your API version to unstable. If you want to get started now I can give provide the basics.

We have added a buyer agrument to the @inContext directive (not documented yet). The argument has the shape.

buyer: {
   customerAccessToken: String,
   companyLocationId: String || undefined,
}

Adding this to your queries will contextualize them for the catalogs assigned to the company location provided.

The customerAccessToken can be obtained by authenticating with the Customer Account API.

The companyLocationId can be obtained from a company contact on a customer query.

And finally you will need to update the buyer identity on cart

context.cart.updateBuyerIdentity({
   customerAccessToken,
   companyLocationId,
 });

Hope this helps 🙂

@albertot
Copy link

@dustinfirman, this is very helpful; thanks for sharing it. Do you think this feature could land on the release 2024-04?

@dustinfirman
Copy link
Contributor Author

@albertot We are targeting a 2024-04 release for the Storefront API changes. Hydrogen specific examples will be available closer to release.

@dustinfirman dustinfirman self-assigned this Mar 5, 2024
@dustinfirman dustinfirman changed the title Add buyer context to hydrogen Add B2B examples to hydrogen Mar 5, 2024
@darren314 darren314 added the #gsd:38510 Headless storefront API support for B2B label Apr 4, 2024
@cuongvu164
Copy link

cuongvu164 commented Apr 15, 2024

Hi all,
I'm trying to add b2b to hydrogen, but an error occurs when I add buyer into @incontext. Can someone help me? Thanks
image

@dustinfirman
Copy link
Contributor Author

@cuongvu164 We noticed this error last week and are currently working on a fix. This hydrogen example will be merged after it is fixed.

@cuongvu164
Copy link

@dustinfirman Okay, thank you

@dustinfirman
Copy link
Contributor Author

@cuongvu164 The 404 error for contextualized queries should be fixed now. Let me know if you are still running into the issue.

@michenly michenly added the Customer Account API Issues related to https://shopify.dev/docs/api/customer label May 2, 2024
@cuongvu164
Copy link

@cuongvu164 The 404 error for contextualized queries should be fixed now. Let me know if you are still running into the issue.

It works!! Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Customer Account API Issues related to https://shopify.dev/docs/api/customer #gsd:38510 Headless storefront API support for B2B
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants