commercetools App Installation Guide

commercetools is a leading digital commerce platform that allows you to create powerful, highly customized commerce experiences while building a profitable, sustainable brand.

With Marketplace, you can easily install the commercetools application and use it in your entry to refer to products or product categories from commercetools in your entries.

Prerequisites

• commercetools account
• Access to Project in commercetools
• Access to create API clients in commercetools
• Contentstack account
• Access to the Contentstack Organization/ Stack as the Owner/ Admin

This step-by-step guide explains how to install and configure commercetools in your stack.

Steps for Execution

1. Create a New commercetools API Client
2. Install and Configure commercetools in Contentstack Marketplace
3. Use commercetools within your Stack

1. Create a New commercetools API Client

   1. Log in to your account at the commercetools Merchant Center and select your project.
   2. On the sidebar, click Settings and select Developer settings. 
      
      
   3. Click Create new API client. 
      
      
   4. Give a suitable name and select the scopes as shown below from the view section and then click the Create API client button. 
      
      
      
   5. Store the generated project key, client ID and client secret, since you will need them to configure the app in Contentstack.

   Note: Refer to the commercetools Composable Commerce Regions page to know the region of your commercetools account. 
   You can check the locale you use to specify the search locale in config field locales through Settings > Project settings > Languages Section.

2. Install and Configure commercetools in Contentstack Marketplace

   To install the application in Contentstack, follow the steps below:

   1. Log in to your Contentstack account.
   2. In the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace.
      
      
   3. Click Apps from the left panel.
   4. Within the Marketplace, you can see all the available apps. Hover over the commercetools app and click Install App.
      
   5. In the popup window, select the stack for which you want to install the commercetools app and click Install.
       
      
   6. On the Configuration page, enter the following details:
      1. Select the Region, enter the Project Key, Client ID, and Client Secret retrieved from your commercetools Account in step 1.
      2. Click the Get Locale & Currency button.
      
      3. Select the Default Locale value and Default Currency value from the respective dropdowns.
      4. Choose commercetools Keys to Save in Entry: Choose how to save the data fetched from the commercetools account in Contentstack entries.
         1. If you select the Only ID option, you can select only ID of products in the entry.
         2. If you select the All Fields option, you can select only a limited number of products in the entry.
         3. For Custom Fields, you can search and add specific commercetools Fields you want to save in entries. By default, the id and name of the products are selected.
      
   7. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.
   8. If the webhook is enabled for your app, you can view the webhook logs under the Webhook tab.

   Additional Resource: For more information on UI location and webhooks, please refer to the Installed Apps guide.

   9. Click the Save button.
   10. Click Open Stack to start using the commercetools app.

3. Use commercetools within your Stack

   To use the commercetools application within an entry of your stack, follow the steps given below: 

   1. Go to your stack and click the Content Models icon in the left navigation panel, and click the + New Content Type button.
   2. Create a content type by adding relevant details as displayed below:
      
      
   3. In the Content Type Builder page, add a Custom field for product in your content type by clicking the Insert a field link represented by a + sign.
   4. Under Select Extension/App, select commercetools - Product Field, and then click the Proceed button. 
      
      This adds commercetools - Product Field in the custom field.
      
      
   5. Add another Custom field for category in your content type by clicking the Insert a field link represented by a + sign.
   6. Under Select Extension/App, select commercetools - Category Field, and then click the Proceed button.
      
      This adds commercetools - Category Field in the custom field.
      
      
   7. After adding the custom fields for the app, click Save or Save and Close to save your changes. 
      
      
   8. To use the commercetools app, create an entry for this content type. In the left navigation panel, navigate to the Entries page, click + New Entry to create a new entry for the above content type, and then click Proceed.
      You can see the commercetools app’s custom fields on your entry page as shown below: 
      
   9. Click the + Add Product(s) button to choose the product(s).
      
      
   10. Select the product(s) from your commercetools selector page and click + Add Product(s) to add them to your entry.
       
   You can also search for products in the commercetools selector page based on the product name.
   
   Hover over the product on the commercetools selector page, and you can see the View in commercetools option to go directly to the commercetools platform.
   
   The products you selected are referenced within your entry in the thumbnail view. 
   
   Select the list view option from the dropdown to view the products in the list view.
   
   The products you selected are referenced within your entry in the list view. 
   
   11. To reorder, open in commercetools, or delete the selected product, hover over the product to get the available options, then perform the following:
       1. Click the Reorder icon to drag and reorder the product.
       2. Click the Open in commercetools icon to open the product in the commercetools app.
       3. Click the Delete icon to delete the product.
   
   Thumbnail View
   
   List View
   
   
   12. Click the Save button to save your entry.
       You can view more product details in the Sidebar Widget.

   Note: You must first save your entry to get the product details in the Sidebar Widget.

   13. In the right navigation panel, select Widgets, select commercetools, and then select the product to view the product details. By default, the Sidebar Widget displays the details of the first product added in the custom field.
       
       
   14. You can also search for products by typing the product name in the dropdown and view the product details.
       Click the Product dropdown to view the Search bar, type the name of the product, and then click the preferred product to view the details.
       
       
   15. Click the + Add Category(s) button to choose the category(s).
       
   16. Select the category(s) from your commercetools selector page and click the + Add Category(s) button to add them to your entry.
       
   
   You can also search and filter categories in the commercetools selector page using a full-text search based on the Category Name.
   
   Hover over the category on the commercetools selector page, and you can see the View in commercetools option to go directly to the commercetools platform.
   
   The category(s) you selected are referenced within your entry.
   
   17. To edit, or delete the selected category, hover over the category to get the available options, then perform the following:
       1. Click the Edit icon to edit the category.
       2. Click the Delete icon to delete the category.
       
   18. After adding the category(s), Save and Publish your entry.