Add B2B examples to hydrogen

[dustinfirman]

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]

@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]

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]

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]

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]

@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]

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

[dustinfirman]

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

[cuongvu164]

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

[dustinfirman]

@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]

@dustinfirman Okay, thank you

[dustinfirman]

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

[cuongvu164]

@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