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 along with a few published products.
• Contentstack account.

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

Steps for Execution

1. Create a Stack
2. Add Content to your commercetools Store
3. Create and Retrieve Credentials from commercetools
4. Add Products to your commercetools Extension and Publish the Content
5. Build and Configure the Website
6. Start the App

1. Create a Stack

   We will now set up the essentials in Contentstack. Log in to your Contentstack account and create a new stack. Now, follow the steps given below:

   1. Firstly, add a management token for your newly created stack. This management token will be required to authenticate our stack in the CLI.
   2. Then, install the Contentstack CLI by following the steps mentioned in the Install the CLI guide.
   3. Before using any of our CLI commands, you need to authenticate your stack. To do so, follow the steps mentioned in the authenticate with CLI guide.

   4. For this exercise, we have created the code for our sample app. You can download or clone it from our GitHub repository.

      You can clone the GitHub repository using the following command:

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

   5. Once you have downloaded the code, unzip and open it in any code editor or you choice. You'll see the contents folder. Let's import this content to our new stack.

   6. Now in your command prompt, use the following command to import content to your destination stack:

      csdx cm:stacks:import --alias <management_token_alias> --data-dir <path_of_folder_where_content_is_stored>
      

      In the above command, enter the path of your "contents" folder.

   7. After the successful completion of this command, go to your stack and you will see that content has been imported to your new stack.

2. Add Content to your commercetools Store

   • Now go to your commercetools account and add products in your commercetools account based on the list of entries seen in the products content type that you imported in your stack. 

     Tip: You can add products in your commercetools store project from the assets of your stack.

   • Add other product information such as product pricing in USD, tax categories, categories, description and other details. 

     Warning: It is mandatory to add relevant product images and other details, according to the entries in products content type for the sample app and extension to work smoothly.

   Now lets proceed to create commercetools credentials, that we require to set up the extension and build the website.

3. Create and Retrieve Credentials from commercetools

   To work with commercetools, you need to create API client keys and HTTP APIs in commercetools.

   Additional Resource: Refer to the API Clients and HTTP APIs guides to learn how to generate these values.

4. Add products to your commercetools Extension and Publish the Content

   1. Navigate to the commercetools extension settings and add your commercetools' client credentials as config values.
   2. Once done, Save your extension.
   3. Go to your Products content type, you will find the commercetools custom extension field. The extension will fetch products from your commercetools store and display them in a field in your content type. 

   4. Additional Resource: Follow our detailed step-by-step guide on how to create commercetools custom field extension for your content types in Contentstack. 

   5. Add all the relevant products from your commercetools store to the extension field in your entries. 
   6. Now, navigate to Settings -> Environments, and hard refresh (Ctrl+Shift+R) the page to view the environments that we imported.  
   7. Finally go to your entries, Save and publish the entries on any of the environment. 
      

   With this step, you have created sample data for your E-commerce website. 

5. Build and Configure the Website

   Now go to the code which you downloaded from our GitHub repository, navigate the config folder and open the default.js file. 
   Add your stack’s API key, delivery token, publish environment, and commercetools extension ID.

   Note: To get the commercetools extension ID, go to your stack and open the "Products" Content Type Builder and note the commercetools extension "Unique ID" as shown below and add it to the configuration file.
   

   
   module.exports = exports = {
       port: 4000,
       // Contentstack Config
       contentstack: {
           api_key: '<<YOUR API KEY>',
           delivery_token: '<<YOUR DELIVERY TOKEN>>',
           environment: '<<publish_env>>',
           ct_extension_id: '<<YOUR COMMERCETOOLS EXTENSION UNIQUE ID>>',
       },
   
   

   Also, you need to add your commercetools project ID, domain, client ID, client secret, and scope as shown below.

   Note: User can create a new API client key in commercetools with scope manage_project:{project_key} and use it in the sample app config as shown below. Make sure the extension API client config and the sample app API config should be different.

   commercetools: {
           "project_id": "<<YOUR PROJECT KEY>>",
           "domain": "<<API host URL>>" //For eg. "us-central1.gcp.commercetools.com",
           "client_id": "<<YOUR CLIENT ID>>",
           "client_secret": "<<YOUR CLIENT SECRET KEY>>",
           "scopes":[ ] // For eg. ["manage_project:project_key"]
       }
   };
   

   Note: While creating client API credentials in commercetools for sample app make sure to select Admin client as scope in the dropdown section, to avoid errors while running the app.

6. Start the App

   Now that the set up is completed, fire up your terminal and point to your project location.
   Start the application using the following commands:

   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.