Commerce Layer

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

Introduction

Prepr supports native integration with Commerce Layer, an API-first commerce platform. This integration works as a real-time connection with the Commerce Layer 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 Commerce Layer as a remote content source in Prepr by following the steps below.

Step 1: Set up an API Client in Commerce Layer

To use the Commerce Layer API, you need to be authorized first. This means you must get the API credentials, including a client ID, client secret, and a base endpoint, in your Commerce Layer Organization settings. Check out the Commerce Layer documentation to learn more about getting your API credentials.

Step 2: Add Commerce Layer as a remote source in Prepr

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

Step 3: Add Commerce Layer products to your content item

Once you’ve connected to Commerce Layer 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 Commerce Layer products using the API

Now that you’ve added products from the Commerce Layer catalog to the content item, you can retrieve the corresponding data using the API. All API calls must be made to the Base 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 Commerce Layer. In addition, Prepr will synchronize your remote content automatically to keep it up to date.