Skip to main content

Adding commercetools data

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

  1. In commercetools Merchant Center, expand to Settings in the sidebar.
  2. Click Developer Settings
  3. Click Create new API API client
  4. Provide a name for this API client
  5. Under Scopes, make at least the following selections:
    1. Categories select View
    2. Products (all) select View
    3. Products (published) select View
  6. Switch the "download your credentials" section near the bottom of the screen to "Environment Variables (.env)", copy result.

After our API client is created, log into Uniform and add the integration for commercetools

  1. Go to Settings on your on https://uniform.app project, then click Integrations
  2. Find the commercetools integration and add it
  3. Provide the details from the downloaded text file into the configuration form:
    1. API URL is the CTP_AUTH_URL environment variable
    2. Auth URL is the CTP_AUTH_URL environment variable
    3. Client ID is the CTP_CLIENT_ID environment variable
    4. Client Secret is the CTP_CLIENT_SECRET environment variable
    5. Project Key is the CTP_PROJECT_KEY environment variable
    6. Locale will switch the locale for product titles you see in product fields (per user preference)
    7. Currency Code will switch the currency displayed on products (per user preference)

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

  • commercetools Product List - Allows the selection of multiple products.
  • commercetools Product - Allows the selection of a single product.

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

yarn add @uniformdev/canvas-commercetools

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 { ApiRoot, createApiBuilderFromCtpClient } from '@commercetools/platform-sdk';
import { createClient } from '@commercetools/sdk-client';
import { createAuthMiddlewareForClientCredentialsFlow } from '@commercetools/sdk-middleware-auth';
import { createHttpMiddleware } from '@commercetools/sdk-middleware-http';
import { createCommercetoolsEnhancer } from '@uniformdev/canvas-commercetools';
import fetch from 'node-fetch';

const { serverRuntimeConfig } = getConfig();
const {
commercetoolsAuthUrl,
commercetoolsProjectKey,
commercetoolsClientId,
commercetoolsClientSecret,
commercetoolsApiUrl,
} = serverRuntimeConfig;

if (!commercetoolsAuthUrl) {
throw new Error('CTP_AUTH_URL env not set.');
}

if (!commercetoolsProjectKey) {
throw new Error('CTP_PROJECT_KEY env not set.');
}

if (!commercetoolsClientId) {
throw new Error('CTP_CLIENT_ID env not set.');
}

if (!commercetoolsClientSecret) {
throw new Error('CTP_CLIENT_SECRET env not set.');
}

if (!commercetoolsApiUrl) {
throw new Error('CTP_API_URL env not set.');
}

const authMiddleware = createAuthMiddlewareForClientCredentialsFlow({
host: commercetoolsAuthUrl,
projectKey: commercetoolsProjectKey,
credentials: {
clientId: commercetoolsClientId,
clientSecret: commercetoolsClientSecret,
},
});

const httpMiddleware = createHttpMiddleware({
host: commercetoolsApiUrl,
fetch,
});

const ctpClient = createClient({
middlewares: [authMiddleware, httpMiddleware],
});

const apiRoot: ApiRoot = createApiBuilderFromCtpClient(ctpClient);

export const commercetoolsEnhancer = createCommercetoolsEnhancer({
apiRoot,
projectKey: commercetoolsProjectKey,
});

Also, add the associated variables to your Nextjs configuration object in next.config.js to pull from your environment variables.

module.exports = {
serverRuntimeConfig: {
// ... rest of the definition here ...
commercetoolsAuthUrl: process.env.CTP_AUTH_URL,
commercetoolsProjectKey: process.env.CTP_PROJECT_KEY,
commercetoolsClientId: process.env.CTP_CLIENT_ID,
commercetoolsClientSecret: process.env.CTP_CLIENT_SECRET,
commercetoolsApiUrl: process.env.CTP_API_URL,
},
};

For local development, copy the environment variable configuration from the API client step into your .env file.

CTP_PROJECT_KEY=<project key>
CTP_CLIENT_SECRET=<client secret>
CTP_CLIENT_ID=<client id>
CTP_AUTH_URL=<auth url>
CTP_API_URL=<api url>

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_COMMERCETOOLS_PARAMETER_TYPES } from '@uniformdev/canvas-commercetools';
import { commercetoolsEnhancer } from './commercetoolsEnhancer';

const enhancers = new EnhancerBuilder()
// ... other enhancers here ...
.parameterType(CANVAS_COMMERCETOOLS_PARAMETER_TYPES, commercetoolsEnhancer);

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

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