commercetools and Contentstack™

Published in

Devgurus

8 min readNov 8, 2019

Two giants come together

Recently, commercetools, leader in next-generation commerce software, and Contentstack™, the headless CMS pioneer and enterprise Content Experience Platform, have announced (few days ago) a strategic alliance to deliver the future of digital shopping experiences.

This partnership will offer an enterprise-class, cloud-native solution built exclusively on microservices to provide the highest speed, agility, and flexibility for digital shopping.

Next, we will test this potential between both platforms by taking the first steps to create a customizable e-commerce website.

Let’s get to work!

Build an E-commerce Website Using Contentstack™ and commercetools

Here’s a quick guide on how to create an e-commerce app using Contentstack™ and commercetools.

Prerequisites

commercetools account. If you don’t have one, you can start here.
Contentstack™ account. In case you don’t have an account, click here.

Step 1 -> Create a Stack

Log in to your Contentstack™ account, and create a new stack. This stack will hold all the data, specific to your e-commerce website. Learn more about how to create a stack.

Step 2 -> Add a Publishing Environment

To add an environment in Contentstack™, navigate to Settings > Environment, and click on the + New Environment tab. Provide a suitable name for your environment, say ‘staging’. Specify the base URL (e.g., http://YourDomainName.com), and select the language. Then, click on Save. Read more about environments.

Step 3 -> Create API Client in commercetools

To work with commercetools, you need to create an API client in commercetools. Refer to this article to learn how to do that.

Step 4 -> Add commercetools Extension

Then add the commercetools extension field in your stack. Follow the steps given below to learn more about it.

commercetools Extension Setup Guide

The commercetools extension lets you search and fetch the products of your commercetools store and display them in a field in your content type. Subsequently, the content managers creating entries using this content type can select one of your store’s products as the input value for that field.

This step-by-step guide explains how to create a commercetools custom field extension for your content types in Contentstack™.

Step 1 — Retrieve your API client credentials

In order to use this extension, you will first need to retrieve the credentials of your commercetools store API client. The credentials include the project key, client_id, and secret of your commercetools store API client. Refer the Getting Started with the commercetools platform documentation for more details.

Step 2 — Add the ‘commercetools’ custom field extension to your stack

Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.

2. In the Select Extension Type dialog box, select Custom Field.

3.You will be redirected to the Create New Extension details page where you need to enter details in the fields as given below:

Title: Provide a suitable title. For example, ‘commercetools’.
Field Data Type: Select the data type in which the input data of the field should be saved in Contentstack™. Select ‘JSON’ in this case.
Multiple: Leave this checkbox unchecked since the custom field won’t accept multiple values, just one in JSON format.
Hosting Method: Select Hosted By Contentstack™. As soon as you do this, you will see the Extension Source Code field appear below.
Extension Source Code: Enter the source code for the extension. To get the source code of the commercetools extension, contact Contentstack™. The support team will provide you with the source code. You need to use the code from the index.html file located inside the root folder. Lastly, paste this code in the Extension source code field.
Config Parameter: Provide values for the config parameters. Enter the configuration details retrieved in Step 1 in your extension settings as follows:

{
    "project_key": "contentstack",     
    "domain": "commercetools.co",
    "client_id": "duis9xxxxxxxxxxxx-",
    "client_secret": "FufYxxxxxxxxxxxxxxxOS_t"
}

4. Click on Save. This creates your custom field.

Now, let’s understand how you can start using this custom field in your content type.

Step 3 — Use your custom field

To use your custom field, you need to follow the steps given below:

Create a content type by clicking on the + New Content Type. Enter the relevant details for the content type and click on Create and Add fields. This leads you to the Content Type Builder page where you can add the relevant fields.

2. Add the Custom field to your content type.

3. Select commercetools in the Select Extension dropdown and set the other properties (shown in the above screenshot).

4. After adding the necessary information of the extension, add other relevant fields (if needed) in your Content Type. Click on Save and Close when you are done

This will create your Content Type. Now you can use the custom field while creating an entry for this Content Type as shown below:

Step 4 — Use the data saved by the extension

This extension will embed the details of the selected product as JSON in an entry. You can use this data and display it on your presentation layer as per your requirement.

Let’s continue building our web site!

Step 5 -> Import Content Types

A content type is like the structure or blueprint of a page or a section of your web or mobile property. Read more about Content Types.

For this e-commerce website example, four basic content types are required: Header, Home Page, Category, and Products. For quick integration, we have already created these content types. You simply need to import them to your stack. You can also create your own content types. Learn how to do this here.

To import the content types, first, save the zipped folder of the JSON files downloaded from here on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack™. The next screen prompts you to either create a new content type or import one into your stack. Click on the Import link, and select the JSON file saved on your machine.

Here’s a brief overview of all the content types required for this project.

Header: This content type lets you add content for the header section of the site.
Home Page: This content type has entries for a typical home page for an e-commerce website.
Category: This content type lets you create the various categories of the products of your e-commerce website. The fields of this content type include name and URL.
Products: This content type will help you create the product entries of your e-commerce site. The fields include name, URL, category, price, image, and so on. You need to add the commercetools extension to this content type. Learn more on how to add the commercetools extension.

When you add the commercetools extension to your Product content type, make note of the “Unique ID”. You will have to add the extension ID in the configuration file as shown in step 7 below.

Now that all the content types are ready, let’s add some content for your e-commerce website.

Step 6 -> Add Content

In commercetools: We assume that you have already added products in your commercetools account. If not, add the products in your commercetools account. Add other information such as product pricing, images, and tax categories details for specific countries.
In Contentstack™: Add entries for Category, Products, Home Page, and Header content types.

Inside your Products content type, add the entry and select the products from commercetools using the commercetools field extension. This will link the products from commercetools with Contentstack™.

Save and publish these entries on your created environment. Learn how to create and publish entries.

With this step, you have created sample data for your e-commerce site.

Note: From Contentstack™ the application fetches the content and images of your products. From commercetools, you get the product price and their IDs. This ID is linked with the products in Contentstack™ using the commercetools custom fields that we have used in your entries.

Step 7 -> Make configuration changes

Clone the GitHub repository using the following command:

git clone https://github.com/contentstack/contentstack-commercetools-nodejs-demo

Once you have downloaded the code, go to the config folder and open the default.js file. Add your stack’s API key and the access token as shown below.

module.exports = exports = {
    port: 4000,     
    // Contentstack Config
    contentstack: {
        api_key: '<<YOUR API KEY>',
        access_token: '<<YOUR ACCESS TOKEN>>', 
        ct_extension_id: '<<YOUR COMMERCETOOLS EXTENSION UNIQUEID>>'
};

Also, you need to add your commercetools project ID, domain, client ID, scope, and client secret as shown below. Refer to this article to learn how to generate these details.

commercetools: {
    "project_id": "<<YOUR PROJECT KEY>>",
    "domain": "<<API host URL>>",
    "client_id": "<<YOUR CLIENT ID>>",
    "client_secret": "<<YOUR CLIENT SECRET KEY>>",
    "scopes":[]
};

Note: In this example, we have added this to our default.js file. You need to create a file and add details as mentioned above as per your environment. For example, in step 2, if you have created an environment named “production”, then inside the config folder create a new file named “production.js” inside the config folder and add your stack and commercetools details.

Step 8 -> Start the App

Now that the set up is completed, start the application using the following command by setting the node environment:

npm install 
npm start

You should be able to see the app running. Create some orders and as soon as you click on checkout, a cart and order get created on the commercetools platform with a cart and order ID.