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 (opens in a new tab), 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 (opens in a new tab).

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:

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

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.