Emporix Storyblok App

Emporix partners with Storyblok which is a headless CMS that combines developer flexibility with an intuitive visual editor, making it easy to create and deliver content across any digital platform. The integration between Emporix and Storyblok is established with the field plugin. This plugin connects to the Emporix Commerce API to retrieve products and categories that are later displayed for the customers.

The key features are:

• Product Search – finding products by name

• Category Filtering – narrowing search results by category

When adding items to the story through the field plugin, you can browse through products and categories using either a list view or grid:

If you want to filter the results, you can narrow the search by categories:

Configuration

The Storyblok integration setup requires different steps that need to be combined between the customer and Emporix support team.

Preparation steps

To start your integration between Storyblok and Emporix, as a customer go through the following steps:

Field plugin configuration

The Storyblok field plugin requires the following details to connect to the Emporix API:

• tenant - Your Emporix tenant identifier

• clientId - Client ID for API authentication

• clientSecret - Client secret for API authentication

• baseUrl - Emporix API base URL, the default is https://api.emporix.io

You can find all the data in your Emporix developer portal in the Manage API Keys section.

When you have the data, these values are configured using Storyblok UI when adding the field plugin in Storyblok:

1

Create a new field plugin

Go to the field plugin design in your Storyblok account.

2

Define values in the field configuration

Enter the tenant, clientID, clientSecret and baseUrl values as Options in the Settings section.

3

Add the items

When the values are defined, use the Add items in the Preview block within the field plugin UI editor and select the products or categories that you want to have displayed. When you select the products for your story, they are later visible in the preview list:

4

Save the story

After you save the story, you can review it and check if everything is displayed correctly.