Mar 24, 2017Integrating Headless CMS Contentstack with Ecommerce Solution Snipcart
The need to reach out to a larger market is pushing retailers to create an online presence. While there are a wide variety of online tools available to create an ecommerce website, choosing the best from the lot can be a little daunting.
Several ecommerce solution providers offer a one-size-fits-all package—including content management system (CMS)—for various requirements. This approach takes away the flexibility and expertise that each component can provide individually. The best approach is to use various best-in-breed microservices and combine them to create a solution that is more flexible and easy to use.
We recommend using a popular ecommerce solution provider (such as Snipcart) for the shopping cart needs of your site and Contentstack for managing the content. Snipcart enables you to integrate the basic functionalities of a shopping cart (sell items, process payments, manage orders) to your site, while Contentstack (being an API-first, headless CMS) lets you easily create, manage and deliver content to your ecommerce website (or to any other digital properties).
In this step-by-step tutorial, we will show you how to integrate Snipcart directly within Contentstack in a few simple steps. The resulting package is a powerful, easy-to-use ecommerce backend that is scalable and can be used by developers and business owners alike.
Prerequisites
Snipcart account
Contentstack account
Note: For this tutorial, we have assumed that you are familiar with Contentstack and Snipcart. If not, then please refer to the docs (Contentstack docs and Snipcart docs) for more details.
Setting It Up
Now, let’s get started with the steps.
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 ecommerce website. Learn more on how to create a stack.
Step 2: Add a publishing environment
In Contentstack, a publishing environment is the destination server where the content is published. Read more about environments.
To add an environment, 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.
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 ecommerce 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 and download links 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.
Category: This content type lets you create the various categories of the products of your ecommerce website. The fields of this content type include name and URL.
Product: This content type will help you create the product entries of your ecommerce site. The fields include name, URL, category, price, image, and so on.
Click here to download content types.
Now that all the content types are ready, let’s add some content for your ecommerce website.
Step 4: Add content
Create entries for the Category and Products content type. Add a few entries each for the Category and Products content type. Save and publish these entries. Learn how to create and publish entries.
Create entries for the header and footer content types. Using the header content type, add the name and other details of your site. Similarly, add footer content using the footer content type.
With this step, you have created sample data for your ecommerce site. Now, it’s time to setup your Snipcart account and initiate Contentstack app.
Step 5: Setup Snipcart account
If you do not have an account, you can register for one here. When signing up, you can leave the field asking for website URL blank or enter a random value. This can be updated later.
Step 6: Build and configure website
Since Contentstack is a headless CMS, the content created and saved in it can be consumed by any platform, any channel, anywhere. However, to get your app up and running quickly, we have created a sample ecommerce webapp (using Node.JS) for this project.
Click here to download code.
Note: The website uses the Content Delivery API (which has in-built CDN support) to deliver content to the ecommerce website. Read more about our CDN-enabled content delivery system.
Once you have downloaded the project, add your Snipcart key, Contentstack API Key and Access Token to the project. The config/all.js file would look something like this:
port: 4000,
// Contentstack Config
contentstack: {
api_key: '',
access_token: ''
},
// Snipcart Key
snipcart_key: ''
Fire up your terminal (command prompt or similar on Windows), point it to your project location and run the following:
npm install
npm start
This will initiate your project. However, you will not be able to fully use the checkout process until the project is live on a domain.
Step 7: Go live
You can make the application live by deploying it on any cloud hosting service. In this tutorial, we have used Zeit’s Now. You can download Zeit's Now from here.
Run Zeit Now to deploy. Every time you run Now, you get a new deployment!
contentstack-snipcart-nodejs-demo$ now
The first time you run Now, it will ask for your email address for verification. Simply click on the email you have received, and you will be logged in automatically.
Once the deployment has started, you will get a link (copied to your clipboard) that you can share immediately with your peers, even before the upload and startup completes!
Step 8: Connecting to Snipcart
The last step is to update your Snipcart settings to point to your new Now site online.
Go to your Snipcart dashboard, click on "Account", and then "Domains & URLs." Enter your now website URL under "Default Website Domain" and save your settings.
Your ecommerce site should now be up and running! Try viewing your categories, adding items to your cart, and checking out. While your Snipcart account is in test mode, no purchases will actually be made.
Live Demo
Have a look at the demo ecommerce site that we have already created. By following the steps given above, you will be able to create a similar site.
.jpg?format=pjpg&auto=webp)
