Was this article helpful?
Thanks for your feedback
This demo e-commerce app is built using Contentstack and commercetools. It uses Contentstack to store the content and images of your product and commercetools to get the product price and product ID.
Here’s a quick guide on how to create an e-commerce app using Contentstack and commercetools.
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.
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.
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.
To work with commercetools, you need to create an API client in commercetools. Refer to this article to learn how to do that.
Then add the commercetools extension field in your stack. Follow the steps given here to learn more about it.
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.
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.
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.
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.
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.
Was this article helpful?
Thanks for your feedback