Skip to content

setup-guide.md

Latest commit

 

History

History
111 lines (65 loc) · 5.42 KB

setup-guide.md

File metadata and controls

111 lines (65 loc) · 5.42 KB

Setup guide

Prerequisites

Before we get started, you will need to create an API token 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 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

Tokens are created on https://store-<storehash>.mybigcommerce.com/manage/settings/api-accounts

Steps

  1. Click here to create your codebase

With this you’re creating a fork from our template, so make sure you download your fork as you will need it in the next steps

  1. Install BigCommerce <-> Vercel integration

Click on “Add” on Add Integrations and install Nextjs app on your store

  1. Deploy it

After that it will deploy automatically and create the repo

  1. Enable headless channel on dashboard

  1. Update url on BigCommerce site

Fist get sites linked to a headless storefront sales channels with this cURL using TOKEN_A:

curl --request GET \
  --url 'https://api.bigcommerce.com/stores/[store_hash]/v3/sites' \
  --header 'Accept: application/json' \
  --header 'Content-Type: application/json' \
  --header 'X-Auth-Token: <TOKEN_A>'

It will return an array of channels, you should verify which match with the recent one, copy the id value

The url it’s provided by Vercel page, just copy and paste it on the body

The site_id on the url it’s the value that we get from listed sites

curl --location --request PUT 'https://api.bigcommerce.com/stores/[store_hash]/v3/sites/[site_id]' \
--header 'Accept: application/json' \
--header 'Content-Type: application/json' \
--header 'X-Auth-Token: <TOKEN_A>' \
--data '{
    "url": "<url provided by vercel>"
}'

This will applies to internal Vercel links or production urls

  1. Update information on script tag

Go to -> app/layout.tsx and update your data, push this to your fork or run it locally to see the changes

You can get these values from the view on step 4 by clicking on deploy script option

<script
  type="module"
  data-storehash="yourStoreHash"
  data-channelid="yourChannelId"
  src="https://cdn.bundleb2b.net/b2b/production/storefront/headless.js"
></script>

  1. Make available your desired products on the new channel

Go to Products -> View, select all the products you want to make available on the new channel, then click on Bulk Actions -> Add to channels

Select the desired channels and click on add

Customization of environment variables (optional)

You can go to your store deployment on Vercel -> settings -> Environment Variables, to modify the values of COMPANY_NAME, TWITTER_CREATOR, TWITTER_SITE and SITE_NAME

Staging environment

If you are targeting the B2B Edition staging environment, you can use this script instead on the src attribute:

https://cdn.bundleb2b.net/b2b/staging/storefront/assets/headless.js