Screenshots

Quickstart

Prerequisites

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

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

Step 3: 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, Footer, Category, and Product. 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 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.

Footer: The Footer content type enables you to add content for the footer section of your site.

Categories: 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.

Product: 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.

Once you have downloaded the project, add Contentstack API Key, Delivery Token, baseDir (the base directory where Contentstack DataSync will syn the data), and the locales to the project. (Learn how to find your Stack's API Key and Delivery Token.)

The development.js file inside the config folder would look something like this: