Contentstack Integration

The Kibo Commerce extension lets you search and fetch products from your Kibo Commerce catalog and display them on your entry page via a custom field. To create entries for this content type, select the single or multiple products option from your Kibo Commerce Catalog as the input value for that field. 

For information on Contentstack, see their website and developer portal.

Prerequisites

This step-by-step guide explains how to create a Kibo Commerce custom field extension for your content types in Contentstack.

Installing the App

For installation instructions, you have to email the Contentstack support team and request access to the Kibo Commerce Contentstack integration source code.

Steps

The following sections of this guide will walk through the different steps that must be performed to create a Kibo Commerce custom field extension: 

1. Retrieve your Kibo Commerce App API credentials
2. Add the Kibo Commerce custom field extension to your account
3. Use the custom field
4. Add Products in the custom field

Retrieve your Kibo Commerce API credentials

1. Log in to your Kibo Commerce Dev Center.
2. Click Develop and select Applications from the drop-down menu.
3. On the Applications page, select an existing application or create an application for your sandbox or production environment.
4. To create a new application, click Create Application on the top right corner. 
5. Enter the required details and click Save. 
6. Copy the Application ID and Shared Secret to use later in your application.

Add the Kibo Commerce custom field extension to your account

The root folder of the source code that you get from the support team contains a redirect HTML file. Upload this file as an asset in Contentstack by following steps mentioned in the Create/Upload asset article. After uploading the file, you'll get a URL in the asset details section, make note of this URL.

Log in to your Contentstack account. To add the extension to your stack, perform the following steps:

1. Click the Settings icon on the left navigation panel.
2. Select Extensions.
3. Click + New Extension in the top right, and select Create New.
4. In the Select Extension Type window, select Custom Field. 
5. On the Create New Extension page, enter values in the fields as given below:
   • Title (required): Provide a suitable title, for example, “Kibo Commerce” for your custom field. This title will be visible when you select the extension in the Custom field in your content type. 
   • Field Data Type (required): Select the data type in which the input data of the field should be saved in Contentstack. In this case, select JSON. 
   • Multiple (optional): Leave this field unchecked. 
   • Hosting Method (required): Select Hosted by Contentstack as the hosting method for this content type. 
   • Extension Source Code: Specify the extension code here. Copy the source code from the index.html file located in the root folder that you get from our Support team, and paste it into the Extension source code field.
     
6. Set up the Configuration Parameter.

   {
     "apiHost": "",
     "authHost": "",
     "applicationId": "",
     "sharedSecret": "",
     "type": "product",
     "pageCount": "",
     "redirectUrl": ""
   }

   These parameters are:
   • apiHost: Host of your Kibo API environment
   • authHost: Host for Kibo API authentication, either a production (https://t00000.tp0.mozu.com) or sandbox (https://t00000.sandbox.mozu.com) environment; replace the numeric placeholders with your tenant ID and production pod
   • applicationId: Application ID from your Kibo Commerce Dev Console
   • sharedSecret: Application Secret from your Kibo Commerce Dev Console
   • type: Kibo Data Object being fetched (currently only supports product)
   • pageCount: Number of items that API will return for each page of the pagination of your query (default is 10)
   • redirectUrl: Contentstack URL to uploaded redirect.html asset
7. Click Save.

Example Configuration

{
  "apiHost": "https://t1234.sandbox.mozu.com", // Host of your Kibo Commerce environment
  "authHost": "https://t1234.sandbox.mozu.com", // Note that the previous Home URL is no longer used
  "applicationId": "kibo.example-app-name.1.0.0.Release", // The Application ID found on your dev console
  "sharedSecret": "12345_Secret", // The Application Shared Secret found on your dev console
  "type": "product_multiple",
  "pageCount": "10",
  "redirectUrl": "https://assets.contentstack.io/v3/assets/123/123/123/redirect.html"
}

Use the Custom Field

Once you have added a custom field, you can use it in your content type. To add a custom field in your content type, follow the steps below:

1. Click the Content Models icon on the left navigation panel. Click + New Content Type in the top right.
2. When the modal appears, enter the required details and click Save and Proceed.
3. Click Insert a field link (+ sign), and add the Custom field to it.
4. Click Select Extension/App drop-down menu in Basic properties. The Select Extensions or App modal appears to select the KiboCommerce extension field that you created.
5. Click Proceed.
6. Click Save and Close.
7. Create an entry for this content type, and you will see the Kibo Commerce custom field.

Add Products in the Custom Field

To add products of your choice to the custom field, follow the steps below:

1. Click the Entities icon on the left navigation panel.
2. Click All Entries and then + New Entry in the top right. 
3. Select the required custom field and click Proceed.
4. Select the corresponding Add Products as you wish to add single or multiple products.
5. Selecting Add Products will redirect you to the KiboCommerce Extension window.
6. Use the search bar at the top to search for the product of your choice.
7. Select one or more products and click Add Product(s).
8. Click Save to save your entry.