Was this page helpful?

commercetools

commercetools product picker

Overview

The commercetools app allows editors to select a product or a product category from their commercetools account and reference it inside of Contentful entries.

Requirements

To use this app, you will need:

  • An account with commercetools.
  • A content type with a field of type Short text.

Usage

Step 1: Install

To install this app:

  • Create a new commercetools API client to acquire credentials that you can use with the app by following these steps on the commercetools website:

    1. Log in to your account at the commercetools Merchant Center and select your project.
    2. On the sidebar click on Settings > Developer settings > Create new API client.
    3. Select Read only client from the scope presets dropdown and click the "Create client" button. Admin API permissions
    4. Store the generated client ID, client secret, API and Auth endpoints as you will need them for the app installation.
  • Fill in the credentials and endpoints in the commercetools installation screen. Installation screen

  • Select all fields for which you would like to install the commercetools app from the list of available fields. For each field, select the picker widget you would like to enable, depending on whether you would like to select a product or a product category. Picker mode

  • Click on Install.

This will modify the fields in the selected content types and change their appearance to use the commercetools app.

Step 2: Use the picker to select a product or a product category from commercetools

To reference commercetools a product or product category from your Contentful entries:

  1. Navigate to the Content page.
  2. Select or create a new entry of the content type for which you installed the app.
  3. Find the field and click on "Select product" or "Select Category".
  4. Scroll through the available product or category pages or search for a specific item by name or SKU for products and name or slug for categories and save your selection.
  5. Your selection should now appear like this: Selected products

FAQ

What is the difference between the product picker and the category picker in the configuration screen?

Depending on which picker you choose, you will be presented with a different widget in the entry editor. The product picker allows you to select a product from commercetools and persist its SKU. The category picker allows you to select a product category and persist its ID.

How can I query the commercetools API for the SKUs I saved in my Contentful entries?

To fetch the data for the products corresponding to the SKUs you have selected and saved in your Contentful entries, you will need to query the ProductProjections search endpoint, passing your SKUs in the payload.