commercetools

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.

Prerequisites

  1. commercetools account
  2. Contentstack account

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 key of your commercetools store API client.

    Note: Make note of the api_url, auth_url, and project_key, as these will be required while configuring the parameters.

    While making an API client to be used with the extension, make sure to select Read only client as the permission as shown below. 

    permission.png

    Additional Resource: you can also refer to the official commercetools documentation for more details.

    To get these credentials from your commercetools account, refer to the Getting Started with the commercetools platform documentation for more details. Make a note of these keys as you will need to use them to configure your commercetools store in Step 2.

    Note: For the commercetools extension to work, you need to have a configured commercetools account.

  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 into the Extension source code field.
      • Note: In the downloaded code, inside the root folder, there's a redirect HTML file. Upload this file as an asset in Contentstack by following the 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.

      • Config Parameter: Provide values for the config parameters. Enter the configuration details retrieved in Step 1 in your extension settings as follows:
        {
            "api_url": "<<api url>>",
            "auth_url": "<<auth url>>",
            "type": "product_single",
            "page_count": "20",
            "project_key": "<<your project key>>",
            "client_id": "<<Your Client ID>>",
            "client_secret": "<<Secret access key>>",
            "locale": "<<your locale>>",
            "redirect_url": "<<URL of the HTML file that you uploaded as asset>>"
        }
      In the above config parameters, the "type" key can have different values such as "product_single" (to select a single product from the available list of products using a radio button), "product_multiple" (to select more than one item from the available list), and "category"( to select item category).

      By using the "page_count" key, you can control the number of items listed. The value of the "redirect_url" key is the URL of the HTML file that you uploaded as an asset in Contentstack.
    5. Save the custom field.
  3. Now, let’s understand how you can start using this custom field in your content type.

  4. 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.commercetool_extension

    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.

  5. Use the data saved by the extension

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

    extension_data_1.png


    As shown in the image above, the extension-data.js file can be used to modify the extension data. By default, the ID gets saved for products and/or categories. However, you can update the file to save other details of the products or categories as shown in the image below.

    extension_data_2.png

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

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^