Predicting the future is difficult. But given the pace at which customer demands and expectations are evolving, we can be certain that today’s solutions cannot cater to the requirements of tomorrow.

This is especially true for the ecommerce space. Consumers expect more convenience (e.g., order from anywhere, anytime, through smart speakers). Businesses are demanding more flexible commerce solutions and reduced time to market. Moreover, with the increase in adoption of IoT devices, businesses are looking at solutions that can support connected experiences.

This calls for a solution that can keep up with this pace of ever-changing demands. The answer is a re-imagined, modern and headless commerce architecture. Such an architecture combines a headless CMS that can deliver content, as well as a headless ecommerce platform that provides core e-shopping functionalities, such as pricing details, cart, payment gateway – all through REST APIs.

Using Contentstack as your CMS and Commercetools as your ecommerce platform allows you to develop a robust, scalable, and secure ecommerce site that’s ready for the future.

Content in Contentstack: Shopping Details in commercetools

Since a headless CMS ensures that content can be published across any channel with ease, it makes more sense than ever to manage all product-related content within the CMS. This includes articles, images, and any other marketing content. Conversely, key components such as pricing, orders, cart, and checkout, can all be managed in commercetools. Such an implementation ensures that key concerns are separated, and of course, managed by two best-in-class solutions.

Syncing Contentstack and commercetools for Seamless Integration

Since both Contentstack and commercetools are API-based solutions and offer webhooks, keeping them in sync is easy. For example, whenever an order is placed, commercetools can trigger a webhook to update product inventory in Contentstack. Or, if any product details (such as pricing or offers) are updated in commercetools, it can send notifications so that site content editors can make corresponding site updates using Contentstack. It is easy to keep both systems in sync for any other event using webhooks.

Ecommerce Demo: See Contentstack and commercetools in Action

We have created a sample ecommerce web app using Contentstack and commercetools. You can check out the demo, view the code, or go through the steps to set up your own site. While the site is intended to be just a simple, straightforward demo, it will help you gain a quick understanding of how to set up an ecommerce site – and with Contentstack you can always add additional integrations and capabilities if you wish you enrich the experience.

commercetools Extension for Contentstack-powered Sites

The demo web app provided above uses both Contentstack and commercetools within your site code. There’s another way of integrating these two services: Create an ecommerce website using Contentstack, and use the commercetools field extension to fetch product details in your content type’s fields. Or you can use this extension within the demo app given above. Learn more about this extension to understand how you can use it in your apps.

More Resources

• Contentstack + commercetools demo site tutorial
• commercetools custom field extension for Contentstack sites

Delivering content in multiple languages enables businesses to serve their customers better across geographies and improve engagement. However, performing tasks related to multi-language content—from the translation of content to uploading and managing the translated content—can be tedious and tricky at times.

Contentstack understands this, and that’s why we are delivering new features and capabilities that ease the process of managing the content of multiple languages.

Fallback Languages For Easy Localization

Contentstack is introducing the ability to select the fallback language for the languages of your stack. It lets you specify which language to use as source content if the entry does not exist in the specified language.

For example, let’s consider that ‘English - United States’ is the master language of your stack. The fallback language of ‘French - France’ is ‘English - United States,’ and the fallback language for ‘Spanish - Spain’ is ‘French - France.’

Now, while creating an entry for ‘Spanish - Spain,’ Contentstack will fetch data from ‘French - France’ to show the unlocalized entry. You can then use (and modify) this inherited content to localize the content in ‘Spanish - Spain’.

The flexibility of specifying a fallback language makes the process of localization quicker and less painful for content managers. Read more about specifying a fallback language.

Adding Support For Generic Languages

Until now, Contentstack provided support for country-specific languages that allowed you to deliver content to specific markets (for example, ‘English - United States,’ ‘English - United Kingdom,’ ‘French - France,’ ‘French - Canada’).

Contentstack now supports generic language options. A generic language is a language that is not tied to the corresponding region it is spoken in. So, for example, you can now add the generic language of 'Spanish' to your stack, instead of requiring you to associate the language with a region, such as 'Spanish - Bolivia,' 'Spanish - Argentina' or 'Spanish - Spain.'

Read more about how generic languages work in Contentstack.

Since the beginning, Contentstack’s objective has been to help enterprises transform and simplify the way they manage their digital assets.

To that end, we have been releasing powerful and unique features on a near-weekly basis. Last week, we introduced several new features that will aid every member of your team, business and IT users alike.

Here’s a rundown of what’s new.

Dashboard for Stacks

Your stacks just got a brand new Dashboard.

Dashboard is a collection of widgets that are independent powerhouses, enabling you and your team to work better and faster.

The best part about the new Dashboard is that it is fully customizable. In a single, central location, you now can show or hide whichever widgets you’d like, and you can even add new widgets to your stack right from the Dashboard.

The default widgets that Contentstack provides are ‘Recently Modified Entries’ and ‘Recently Modified Assets.’ You can add new widgets through our new type of Experience Extensions called ‘Dashboard Widgets’ (more on this below).

The Dashboard replaces the Content page as the default homepage of the stack. We are introducing the Dashboard to provide users with a console where they can get a quick overview of their stack, navigate to important pages, access widgets, and so much more, all from a centralized location.

Read our documentation to learn more about the new Dashboard.

Dashboard Widgets - A New Type of Extension

We are glad to introduce yet another type of Experience Extension — Dashboard Widget. The Dashboard Widget lets you add any custom widget to your stack Dashboard.

Developers can use this powerful extension to add a plethora of tools to their Dashboard.

For example, you can create widgets that allow your stack’s users to view information about stack usage, add personal notes, and see a summary of other Contentstack components (total assets, users, roles, etc.). You can also use your Dashboard to display information from third-party apps, such as analytics, RSS feeds, and news, and add external functionalities, such as a text translator, keyword generator, and more. With Contentstack Dashboard Widgets, the possibilities are endless.

We have created a step-by-step guide that explains how to create these widgets. Read through the guide and get started with the all-new Dashboard Widgets.

Instance-level Configuration for Custom Fields

Previously, if you had defined a configuration for a custom field, the configuration applied to all instances of that custom field. While this is still possible, you now also can define a different configuration for each instance of that custom field.

For instance, if, while creating the Color Picker custom field, you define in the config parameter that the default color is blue, you can change the default color each time you add the Color Picker custom field in the content type.

Read more about instance-level configuration for custom fields.

The all-new DataSync is here.

With the addition of DataSync to our synchronization offerings, we now provide the best and the most comprehensive synchronization solutions in the headless CMS space. We have something for every kind of content synchronization need. And that makes us the go-to choice for all things synchronization related.

Our Synchronization offerings include the following components:

• Sync API Get all content or only incremental (delta) updates, anywhere, anytime.
• DataSync (New) Sync Contentstack data with your database (FileSystem, MongoDB)
• SDKs with Sync API support Build power apps using our SDKs which now support Sync APIs
• Mobile sync helpers Create offline apps by storing content on the device’s local storage

We will learn more about each of these components later in this post.

All About the New DataSync

Contentstack DataSync Overview

DataSync allows you to synchronize Contentstack data with your database (MongoDB, Filesystem, etc.).

DataSync consists of tools that we have combined to give you the best synchronization possible.

Whenever a piece of content is published, deleted or updated, Datasync saves a copy of the content changes in your database. Subsequently, all page requests are served directly from your database, instead of from Contenstack through APIs.

Why Use Contentstack DataSync?

Datasync is better than any synchronization module available. The following lists some of the compelling reasons to use DataSync.

• Deprecation of contentstack-express framework
  The contentstack-express web framework has a built-in sync utility. However, we have deprecated the framework. If you are using the framework’s sync, please switch to the faster and better DataSync.
• Synchronize data fast
  In comparison to the 'sync' functionality of the contentstack-express framework, DataSync synchronizes data over 8x faster! The former takes about 2 hours to synchronize 10,000 items, whereas the latter synchronizes the same data in under 10 minutes.
• Reduced API calls
  Serving content through your database after syncing reduces the number of API calls made to Contentstack to fetch data.
• Use it with any database
  We offer connectors for FileSystem and MongoDB databases. But you can write your own connectors and use DataSync with any database of your choice.

Learn more about DataSync.

Contentstack Synchronization Tools

The Sync API

In addition to DataSync Contentstack includes the Sync API that is part of our Content Delivery APIs and can be used to sync complete data and fetch incremental updates. It provides three main synchronization requests:

Initial sync: For synchronizing complete data, i.e., the content of a stack that has ever been published to the specified environment. Initial synchronization is usually used to load data when the user uses the app for the very first time.

Subsequent sync: For keeping your app up-to-date through delta updates. After completing an initial sync, this request fetches only the content that was published since the last synchronization.

Pagination token: To fetch the subsequent batches of data.

Read our Sync API documentation to get started with the Sync API.

DataSync

DataSync allows you to synchronize Contentstack data with your database. While we have covered some basics in the previous sections, here are some additional resources to help you get started with DataSync:

• DataSync Overview
• Getting started with DataSync
• Create a Node.js app using Contentstack DataSync
• Contentstack DataSync vs contentstack-express

SDKs with Sync API Support

Most of our content delivery SDKs support Sync API. Refer to the corresponding documentation to learn how the Sync API works with these SDKs.

• Using Sync API with iOS SDK
• Using Sync API with Android SDK
• Using Sync API with Javascript SDK

We have also created SDK-specific playground apps to help you get started with Contentstack Sync API. Clone these apps and try out the APIs to get a first-hand experience of the synchronization methods.

• iOS playground app
• Android playground app
• JavaScript playground app

Mobile Sync Helpers

The mobile sync helpers enable your mobile apps to save data on the device’s local storage, which serve as the base for creating offline apps. These helpers contain methods that are required to map data fields of your content types and Realm database management system. Learn more about them.

• Using Realm Persistence Library with iOS SDK
• Using Realm Persistence Library with Android SDK

We have created a couple of example applications that demonstrate using mobile sync helpers with our SDKs. Refer to the documentation to get started with the helpers.

• iOS persistence example app
• Android persistence example app

Our last release—Advanced Search and Bulk Operations—was all about giving more power and flexibility to content managers.

This release is for developers. 

Contentstack introduces Field Visibility Rules and Improved Content Type Builder that make it easier for developers to create and edit content types. With the help of these features, developers can create dynamic content types, fast. 

Field Visibility Rules enable developers to create dynamic fields that can appear or disappear based on rules you specify. The new Content Type Builder comes with an updated look, empowering developers to drag and drop fields and edit field properties quickly.

In this blog, we will discuss these new features, and see how they take your Contentstack experience to the next level.

Field Visibility Rules – Show or Hide Fields Dynamically

Field visibility rules help you set rules that define the visibility of specific fields of your content types. 

While creating the content type, the developer can set if some fields should appear (or disappear) on the entry page based on the value entered in the operand field.

The examples below show how dynamic fields makes the process of content creation easier and intuitive for content managers:

Hide the Billing Address field if the user checks the Same as Shipping Address box field. 

Display the Number of Years field, if the user selects Yes in the Have Prior Work Experience? select field. 

These are just some of the examples of showing or hiding fields dynamically. Developers can use the flexibility to customize and manipulate the entry fields based on the requirements and accumulate precise data. 

Read more about how you can use Field Visibility Rules to create a dynamic content type.

Content Type Builder – A Fresh Look and Feel

Content modeling is the most crucial process of creating a website or an app. This process happens on the Content Type Builder page. This is where the developer adds fields to the content type and creates the structure of the app. 

To make this process easier and more efficient for the developers, we have re-designed the page and have added new features.  

In addition to making the page more refreshing and cleaner, we have also made it easier for developers to edit field properties. As you drop or select a field, its properties are displayed on the right side of the page. This ensures that you never miss editing the important details of the field.

This new Content Type Builder page will look as follows:

Read more about content types here.