From fd35c2f4c1b349c40244e8d54c848559eb5cb352 Mon Sep 17 00:00:00 2001 From: Traci Porter Date: Tue, 17 Dec 2024 14:04:32 -0600 Subject: [PATCH 1/8] DEVDOCS-5858:[new] add headless channel doc --- docs/b2b-edition/headless.mdx | 106 ++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 docs/b2b-edition/headless.mdx diff --git a/docs/b2b-edition/headless.mdx b/docs/b2b-edition/headless.mdx new file mode 100644 index 000000000..6c923330b --- /dev/null +++ b/docs/b2b-edition/headless.mdx @@ -0,0 +1,106 @@ +# Creating Channels + + + +### Prepare + +You will need to create two API tokens for your BigCommerce store. They have different permissions required, so please pay attention to which one is used for the step you are working on. Refer to this [support article](https://support.bigcommerce.com/s/article/Store-API-Accounts?language=en_US#:~:text=Level%20API%20Accounts-,1.,to%20use%20the%20API%20account) for more information on how to create API Accounts. + +* Create a token (TOKEN_A) with modify permissions for the following resources: + - Channel listings + - Channel settings + - Sites & routes + +* Create a token (TOKEN_B) with modify permissions for the following resources: + - Carts + - Storefront API tokens + - Storefront API customer impersonation tokens + + + Tokens are created using the API path: https://{storehash}.mybigcommerce.com/manage/settings/api-account + + +Also check that you have multistorefront feature enabled and available seats + +### Create the channel + +Send a request to the [Create a channel](/docs/rest-management/channels#create-a-channel) endpoint using TOKEN_A to create a channel for your headless platform. Note the channel ID returned in the response; you'll use it in successive steps. + +```http filename="Example request: Create channel" showLineNumbers copy +POST https://api.bigcommerce.com/stores/{store_hash}/v3/channels +Accept: application/json +Content-Type: application/json +X-Auth-Token: {{TOKEN_A}} + +data '{ + "name": "", + "platform": "", + "type": "storefront", + "status": "active", + "is_listable_from_ui": true, + "is_visible": true +}' +``` + + + Currently we’re working with [Vercel template, and that uses NextJS](https://github.com/B3BC/b2b-headless-example). + + + ### Generate an impersonation token + +[Generate an impersonation token](/docs/storefront-auth/tokens/customer-impersonation-token) by using the next cURL as base and using TOKEN_B. + +```http filename="Example request: Create an impersonation token" showLineNumbers copy +POST https://api.bigcommerce.com/stores/{store_hash}/v3/storefront/api-token-customer-impersonation +Accept: application/json +Content-Type: application/json +X-Auth-Token: {{TOKEN_B}} + +data '{ + "channel_id": , + "expires_at": +}' +``` + +### Create a site for the channel + +[Create the site for the channel](/docs/rest-management/sites#create-a-site), you should use TOKEN_A. + +```http filename="Example request: Create an impersonation token" showLineNumbers copy +POST https://api.bigcommerce.com/stores/{store_hash}/v3/sites +Accept: application/json +Content-Type: application/json +X-Auth-Token: {{TOKEN_A}} + +data '{ + "url": , + "channel_id": +}' +``` + +### Update script tag information + +Add the following script tag on your application. + +```http copy + +``` +### Enable headless channel on the B2B dashboard + +In the B2B dashboard, go to **Storefronts** > **Headless Storefronts** and select **Activate B2B** for the storefront channel. + +### Make products available on your new channel + +In the control panel, go to **Products** > **View** and select all the products you want to make available on the new channel. Then click **Bulk Actions** > **Add to channels** > select the desired channels > and click **Add**. + + + #### Staging environment + If you are targeting the B2B Edition staging environment, you can use this script instead of the src attribute: https://cdn.bundleb2b.net/b2b/staging/storefront/assets/headless.js + + + From c981e3a60c1985e3a00c8c049dc94f6538136d46 Mon Sep 17 00:00:00 2001 From: Traci Porter Date: Tue, 17 Dec 2024 15:35:42 -0600 Subject: [PATCH 2/8] fix errror --- docs/b2b-edition/headless.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/b2b-edition/headless.mdx b/docs/b2b-edition/headless.mdx index 6c923330b..50a12f2c0 100644 --- a/docs/b2b-edition/headless.mdx +++ b/docs/b2b-edition/headless.mdx @@ -17,10 +17,10 @@ You will need to create two API tokens for your BigCommerce store. They have dif - Storefront API customer impersonation tokens - Tokens are created using the API path: https://{storehash}.mybigcommerce.com/manage/settings/api-account + Tokens are created using the API path `https://{storehash}.mybigcommerce.com/manage/settings/api-account`. -Also check that you have multistorefront feature enabled and available seats +Also check that you have multi-storefront feature enabled and available seats. ### Create the channel @@ -96,7 +96,7 @@ In the B2B dashboard, go to **Storefronts** > **Headless Storefronts** and selec ### Make products available on your new channel -In the control panel, go to **Products** > **View** and select all the products you want to make available on the new channel. Then click **Bulk Actions** > **Add to channels** > select the desired channels > and click **Add**. +In the control panel, go to **Products** > **View** and select all the products you want to make available on the new channel. Then click **Bulk Actions** > **Add to channels**. Next, select the desired channels and click **Add**. #### Staging environment From 6ff4d78f481e4e2d28bef92ee7e17727eeb9fcd0 Mon Sep 17 00:00:00 2001 From: Traci Porter Date: Fri, 20 Dec 2024 15:33:33 -0600 Subject: [PATCH 3/8] Update docs/b2b-edition/headless.mdx Co-authored-by: Micah Thomas <95306190+bc-micah@users.noreply.github.com> --- docs/b2b-edition/headless.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/b2b-edition/headless.mdx b/docs/b2b-edition/headless.mdx index 50a12f2c0..136bc0aea 100644 --- a/docs/b2b-edition/headless.mdx +++ b/docs/b2b-edition/headless.mdx @@ -32,14 +32,14 @@ Accept: application/json Content-Type: application/json X-Auth-Token: {{TOKEN_A}} -data '{ +{ "name": "", "platform": "", "type": "storefront", "status": "active", "is_listable_from_ui": true, "is_visible": true -}' +} ``` From f1a3098628cebef27b12a6f7f119b2943d4110b7 Mon Sep 17 00:00:00 2001 From: Traci Porter Date: Fri, 20 Dec 2024 15:33:53 -0600 Subject: [PATCH 4/8] Update docs/b2b-edition/headless.mdx Co-authored-by: Micah Thomas <95306190+bc-micah@users.noreply.github.com> --- docs/b2b-edition/headless.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/b2b-edition/headless.mdx b/docs/b2b-edition/headless.mdx index 136bc0aea..4c79a2e80 100644 --- a/docs/b2b-edition/headless.mdx +++ b/docs/b2b-edition/headless.mdx @@ -56,10 +56,10 @@ Accept: application/json Content-Type: application/json X-Auth-Token: {{TOKEN_B}} -data '{ +{ "channel_id": , "expires_at": -}' +} ``` ### Create a site for the channel From 0e4df789daee9ba154001cbd915ed93d5bee89ae Mon Sep 17 00:00:00 2001 From: Traci Porter Date: Fri, 20 Dec 2024 15:34:00 -0600 Subject: [PATCH 5/8] Update docs/b2b-edition/headless.mdx Co-authored-by: Micah Thomas <95306190+bc-micah@users.noreply.github.com> --- docs/b2b-edition/headless.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/b2b-edition/headless.mdx b/docs/b2b-edition/headless.mdx index 4c79a2e80..58e1b80a4 100644 --- a/docs/b2b-edition/headless.mdx +++ b/docs/b2b-edition/headless.mdx @@ -72,10 +72,10 @@ Accept: application/json Content-Type: application/json X-Auth-Token: {{TOKEN_A}} -data '{ +{ "url": , "channel_id": -}' +} ``` ### Update script tag information From 33b6ac2ac1033d7cdd496933dfbf9bee42d45656 Mon Sep 17 00:00:00 2001 From: Traci Porter Date: Fri, 20 Dec 2024 15:34:25 -0600 Subject: [PATCH 6/8] Update docs/b2b-edition/headless.mdx Co-authored-by: Micah Thomas <95306190+bc-micah@users.noreply.github.com> --- docs/b2b-edition/headless.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/b2b-edition/headless.mdx b/docs/b2b-edition/headless.mdx index 58e1b80a4..484ab44c0 100644 --- a/docs/b2b-edition/headless.mdx +++ b/docs/b2b-edition/headless.mdx @@ -82,14 +82,13 @@ X-Auth-Token: {{TOKEN_A}} Add the following script tag on your application. -```http copy +```html copy -``` ### Enable headless channel on the B2B dashboard In the B2B dashboard, go to **Storefronts** > **Headless Storefronts** and select **Activate B2B** for the storefront channel. From 95ebaafaadd68b5621d9d964ad4b94f20e977ec0 Mon Sep 17 00:00:00 2001 From: Traci Porter Date: Fri, 20 Dec 2024 15:35:34 -0600 Subject: [PATCH 7/8] removed callout --- docs/b2b-edition/headless.mdx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/b2b-edition/headless.mdx b/docs/b2b-edition/headless.mdx index 484ab44c0..147e614e2 100644 --- a/docs/b2b-edition/headless.mdx +++ b/docs/b2b-edition/headless.mdx @@ -97,9 +97,4 @@ In the B2B dashboard, go to **Storefronts** > **Headless Storefronts** and selec In the control panel, go to **Products** > **View** and select all the products you want to make available on the new channel. Then click **Bulk Actions** > **Add to channels**. Next, select the desired channels and click **Add**. - - #### Staging environment - If you are targeting the B2B Edition staging environment, you can use this script instead of the src attribute: https://cdn.bundleb2b.net/b2b/staging/storefront/assets/headless.js - - From 975bec9768e1398f6fc51acf5e6ae1b00b7b5acf Mon Sep 17 00:00:00 2001 From: Traci Porter Date: Fri, 20 Dec 2024 15:39:28 -0600 Subject: [PATCH 8/8] fix linter errors --- docs/b2b-edition/headless.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/b2b-edition/headless.mdx b/docs/b2b-edition/headless.mdx index 147e614e2..d0a7f403d 100644 --- a/docs/b2b-edition/headless.mdx +++ b/docs/b2b-edition/headless.mdx @@ -83,12 +83,13 @@ X-Auth-Token: {{TOKEN_A}} Add the following script tag on your application. ```html copy - + src="https://cdn.bundleb2b.net/b2b/production/storefront/headless.js"> + +``` ### Enable headless channel on the B2B dashboard In the B2B dashboard, go to **Storefronts** > **Headless Storefronts** and select **Activate B2B** for the storefront channel.