Build an E-commerce Website Using Contentstack and commercetools

Quickstart

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

Prerequisites

• commercetools account
• Contentstack account

Note: For this tutorial, it's assumed that you are familiar with Contentstack and commercetools. If not, then please refer to the docs (Contentstack docs and commercetools docs) for more details.

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.

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 (e.g., English - United States). Then, click on Save. Read more about environments.

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.

4. Add commercetools Extension

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

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 given below 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. 

   

   Download all content types.

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

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.

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 UNIQUE ID>>',
       },
   

   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 our 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.

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.

Additional Resource: Snipcart is another popular tool among developers for building an eCommerce website. To know how to build an eCommerce website using Snipcart and Contentstack, read our guide on how to build an ecommerce website using Snipcart and Contentstack.