Commercetools

This article describes how to add the Commercetools catalog data to your web application using Prepr.

Introduction

Prepr supports native integration with Commercetools (opens in a new tab), a cloud-based headless commerce solution. This integration works as a real-time connection with the Commercetools system, making it possible for editors to search, preview, and add products in content items, as a result, include your catalog data in a web application.

You can set up Commercetools as a remote content source in Prepr by following the steps below.

Step 1: Set up an API Client in Commercetools

Before Prepr can interact with your Commercetools project, you must get your API Client credentials first. API Clients include authentication information and permission scopes for the Prepr application. Follow the Commercetools documentation (opens in a new tab) to create an API Client. As a result of this step, you will get your API Client information, including the following parameters:

• project_key
• client_id
• secret
• scope
• API URL
• Auth URL You will need these API credentials in the next step to connect Prepr to Commercetools.

Step 2: Add Commercetools as a remote source in Prepr

Now that you’ve set up your API Client, you can add Commercetools as a remote source in Prepr. Learn more about adding a remote source.

Step 3: Add Commercetools content to your content item

Once you’ve connected to Commercetools and added the Remote content field to your model, you can add your catalog data to a content item using the following steps:

1. Navigate to the Content tab and click on the desired content item from the list.
2. In the remote content section, click Add product, search through the catalog and add the desired items to the content item.
3. Save and publish this content item to complete the setup.

Step 4: Retrieve Commercetools content using the API

Now that you’ve added products from the Commercetools catalog to the content item, you can retrieve the corresponding data using the API. All API calls must be made to the Product Projection Search endpoint (opens in a new tab) with the appropriate SKU numbers passed in the payload. Check out the example code snippets below:

query {
 Pages {
   items {
     content_integrations {
       key1
       key2 
     }
   }
 }
}

That’s it. Now your web page includes content inserts from Commercetools. Prepr will synchronize your remote content automatically to keep it up to date.