The commercetools extension lets you search and fetch the products of your commercetools store and display them in a field in your content type. Thus, while creating entries for this content type, you can select one of your store’s products as the input value for that field.

This step-by-step guide explains how to create a commercetools custom field extension for your content types in Contentstack. The steps performed are as follows:

  1. Retrieve your API client credentials
  2. Add the “commercetools” custom field extension to your stack
  3. Use your custom field
  4. Use the data saved by the extension
  1. Retrieve your API client credentials

    In order to use this extension, you will first need to retrieve the credentials of your commercetools store API client. The credentials include the project key, client_id, and secret of your commercetools store API client. 

    To get these credentials from your commercetools account, refer to the Getting Started with the commercetools platform documentation for more details.

    Note these values down as you will need to use them to configure your commercetools store in Step 2.

  2. Add the “commercetools” custom field extension to your stack

    To add this extension to your stack, perform the following steps:

    1. Go to your stack, navigate to the “Settings” gear icon, and select Extensions.
    2. On the Extensions page, click on the + Add Extension button, and select Create new. If you have not added any extensions in the stack yet, click on the create a new one link as shown below.create-new-button.png
    3. In the Select Extension Type window, select Custom Field.
      Select Extension Type - Custom Field.png
    4. On the Create New Extension page, enter values in the fields as given below:
      • Title (required): Provide a suitable title, for example “commercetools,” 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. To get the code, contact our Support team.

        The support team will provide you with the source code (src file). Copy the code from the index.html file located in the root folder and paste it in the Extension source code field.
      • Config Parameter: Provide values for the config parameters. Enter the configuration details retrieved in Step 1 in your extension settings as follows:
            "project_key": "contentstack",
            "domain": "",
            "client_id": "duis9xxxxxxxxxxxx-",
            "client_secret": "FufYxxxxxxxxxxxxxxxOS_t"
    5. Save the custom field.

    Now, let’s understand how you can start using this custom field in your content type.

  3. Use your custom field

    Once you have added a custom field, you can use it in your content type like any other field. To add a custom field in your content type, perform the following steps:

    1. Create a content type and add the Custom field to it.

    2. Under Select Extension, select the “commercetools” field that you created and set the other properties. You can add other fields as per requirements.
      Add 'Custom' field.png
    3. Finally, click on either Save or Save and Close to save your changes.
    4. Next, create an entry for this content type, and you will see the commercetools field in action.commercetools extension demo.png

    Note: The number of items that can be selected depends on the size of the JSON that is to be stored, and currently, only 10 KB of data can be stored. This is due to limitation of the JSON data stored via Custom Field. Refer to our Custom Field Limitation doc for more detail.

  4. Use the data saved by the extension

    This extension will embed the details of the selected product as JSON in an entry. You can use this data and display it on your presentation layer as per your requirement.

Additional resource: Refer to our step-by-step guide on how to create an example e-commerce app using Contentstack and commercetools.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page