Commercetools

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

Introduction

Prepr supports native integration with Commercetools, 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 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.

Important

API Client information is only displayed once. Ensure that you save your credentials securely before closing the API Client details page in Commercetools.

Note

Make sure to activate the indexing of product information in your Commercetools project. If indexing is deactivated for your project, no data is returned by the Commercetools API. Read more in the Commercetools docs.

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.

Note

Once you set up the Commercetools source in Prepr, an access token will be generated automatically. You can find it under Settings > Access tokens. Prepr will use the token as a credential when making API requests.

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.

Add remote content to a content item

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 with the appropriate SKU numbers passed in the payload. Check out the example code snippets below:

{
 Pages {
   items {
     content_integrations {
       key1
       key2 
     }
   }
 }
}
curl --location --request POST 'https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"{ Pages { items { content_integrations { key1 key2 } } } }","variables":{}}'
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

const graphql = JSON.stringify({
query: "{ Pages { items { content_integrations { key1 key2 } } } }",
variables: {}
})
const requestOptions = {
method: 'POST',
headers: myHeaders,
body: graphql,
redirect: 'follow'
};

fetch("https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
// WARNING: For POST requests, body is set to null by browsers.
const data = JSON.stringify({
query: "{ Pages { items { content_integrations { key1 key2 } } } }",
variables: {}
});

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
  console.log(this.responseText);
}
});

xhr.open("POST", "https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(data);
<?php
$client = new Client();
$headers = [
'Content-Type' => 'application/json'
];
$body = '{"query":"{ Pages { items { content_integrations { key1 key2 } } } }","variables":{}}';
$request = new Request('POST', 'https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>', $headers, $body);
$res = $client->sendAsync($request)->wait();
echo $res->getBody();
{
 "data": {
   "Pages": {
     "items": [
       {
         "content_integrations": [
           {
             "key1": "Value 01",
             "key2": "Value 02"      
           },
           {
             "key1": "Value 11",
             "key2": "Value 12"
           }
         ]
       }
     ]
   }
 }
}

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.