Skip to main content

Adding BigCommerce data

To configure BigCommerce, we must first create an API account with the access to appropriate OAuth scopes, to do this:

  1. In BigCommerce, navigate to Advanced Settings in the sidebar.
  2. Click API Accounts
  3. Click Create API Account and select Create V2/V3 API Token
  4. Provide a name for this API Account
  5. Under OAuth Scopes, make the following selections:
    1. Products select read-only
  6. Click Save and download text file when prompted.

After our API account is created, log into Uniform and add the integration for BigCommerce

  1. Go to Settings on your on https://uniform.app project, then click Integrations
  2. Find the BigCommerce integration and add it
  3. Provide the details from the downloaded text file into the configuration form:
    1. Store Hash can be retrieved from the API PATH URL, for example: API PATH: https://api.bigcommerce.com/stores/123storehash123/v3/, 123storehash123 is the Store Hash property.
    2. API Token is the ACCESS TOKEN property.

Adding and configuring the integration will allow the following parameter types to be inserted on component definitions:

  • BigCommerce Product List - Allows the selection of multiple products.
  • BigCommerce Product - Allows the selection of a single product.
  • BigCommerce Product Query - Allows you to define parameters in which products will be selected.

After adding these parameters to your components, it's time to configure the BigCommerce enhancer so our application is able to resolve BigCommerce data. First start by installing the npm package for the BigCommerce integration.

yarn add @uniformdev/canvas-bigcommerce

After the package is installed, we need to create the enhancer and wire it up for resolution. The basic syntax for creating the enhancer looks like the following, copy the contents of this to the location in your solution where you are storing the rest of your Canvas specific configurations. Typically, this is a lib folder or similar.

import getConfig from 'next/config';
import { createBigCommerceClient, createBigCommerceEnhancer } from '@uniformdev/canvas-bigcommerce';

const { serverRuntimeConfig } = getConfig();
const { bigCommerceStoreHash, bigCommerceToken } = serverRuntimeConfig;

export const bigCommerceEnhancer = createBigCommerceEnhancer({
client: createBigCommerceClient({
storeHash: bigCommerceStoreHash,
token: bigCommerceToken,
}),
createProductOptions: () => {
return {
// Modify or exclude this property if you want more fields returned from the BigCommerce API
include_fields: ['id', 'name'],
};
},
createProductQueryOptions: () => {
return {
// Modify or exclude this property if you want more fields returned from the BigCommerce API
include_fields: ['id', 'name'],
};
},
});

Also, add bigCommerceStoreHash and bigCommerceToken to your Nextjs configuration object in next.config.js to pull from your environment variables.

module.exports = {
serverRuntimeConfig: {
// ... rest of the definition here ...
bigCommerceStoreHash: process.env.BIGCOMMERCE_STORE_HASH,
bigCommerceToken: process.env.BIGCOMMERCE_TOKEN,
},
};

For local development, define BIGCOMMERCE_STORE_HASH and BIGCOMMERCE_TOKEN in your .env file or similar.

BIGCOMMERCE_STORE_HASH=<store hash here>
BIGCOMMERCE_TOKEN=<access token here>

Once this configuration is in place, we must pass this enhancer to enable parameter resolution. Navigate to where enhance is being called. This is typically in getStaticProps. Modify the enhancers that are being passed into this function and add the BigCommerce enhancer.

import { EnhancerBuilder } from '@uniformdev/canvas';
import { canvas_BIGCOMMERCE_PARAMETER_TYPES } from '@uniformdev/canvas-bigcommerce';
import { bigCommerceEnhancer } from './bigCommerceEnhancer';

const enhancers = new EnhancerBuilder()
// ... other enhancers here ...
.parameterType(CANVAS_BIGCOMMERCE_PARAMETER_TYPES, bigCommerceEnhancer);

await enhance({ composition, enhancers, context: {});

Now BigCommerce parameters will be enhanced when they are encountered on compositions.