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.

The Contentstack logo

Prerequisites

To begin, you must have the following accounts:

  • Kibo Commerce Account
  • Contentstack Account

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.Navigation for
  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. Applications page with
  5. Enter the required details and click Save.Create Application modal with the required fields and  
  6. Copy the Application ID and Shared Secret to use later in your application.Application ID and Shared Secret details on Application page 
  7. Be sure to configure only the necessary application behavior, follow the below procedure:

    Behaviors determine what operations your application can perform once installed in a particular tenant. To enable the application to send a notification to your endpoint whenever a new product category is created, your application needs permission to read product category data:

    1. Within your application record, click Packages.
    2. On the Behaviors tab, click Select Behaviors.
    3. In the Select Behaviors dialog box, under Behavior category, select Product.
    4. Under Behavior name, enable the Product Read checkbox and click Save.

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.Contentstack homepage with navigation for adding
  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.Create New Extension page with required fields and
  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.Contentstack homepage with navigation for adding
  2. When the modal appears, enter the required details and click Save and Proceed.“Create New Content Type” modal with required fields and “Save and Proceed” button at the bottom
  3. Click Insert a field link (+ sign), and add the Custom field to it.Insert a field link displays with plus signA modal with various fields highlighting Custom field
  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.Select Extension or App page with added extension list to choose and
  6. Click Save and Close.Custom field page with
  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.Contentstack homepage with navigation for adding  
  3. Select the required custom field and click Proceed.List of added
  4. Select the corresponding Add Products as you wish to add single or multiple products.Add Products buttons for single and multiple products adding with
  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).Add Product page with added product list and
  8. Click Save to save your entry.Add Product page with added product list and