SAP Commerce Cloud App Installation Guide

SAP Commerce Cloud is one of the most flexible and efficient eCommerce project development platforms, specifically for B2B businesses and retailers. Using SAP Commerce Cloud, businesses can adapt to various demands and reduce their dependency on different application modules. It allows you to set up an online store to sell your products.

With the Contentstack Marketplace SAP Commerce Cloud app, you can use and refer to the products and categories from your SAP Commerce Cloud account within your Contentstack entries.

Prerequisites

SAP Commerce Cloud account
Contentstack account
Access to the Contentstack Organization/Stack as the Owner/Admin

Let’s follow this step-by-step guide to install and configure the SAP Commerce Cloud app within your stack.

Steps for Execution

Retrieve configuration details for SAP Commerce Cloud
Install and configure the SAP Commerce Cloud app in Marketplace
Use the SAP Commerce Cloud app within your stack

Retrieve Configuration Details for SAP Commerce Cloud
To get your configuration details for SAP Commerce Cloud, follow the steps given below:
1. Log in to the SAP Cloud Portal using your SAP Commerce Cloud account credentials.
2. Click Environments in the left panel, then click the environment for which you want to retreive the configuration details.
3. Copy the API and Backoffice URLs. You will use them during app configuration in step 2.
4. To retrieve the Base Site ID, follow the steps below:
  1. Click the Backoffice URL, then log in using your SAP Commerce Cloud account credentials.
  2. Under Base Commerce, in the left panel, click Base Store.
  3. Click Base Site for which you want to retrieve theBase Site ID.
  You can find the Base Site ID under the PROPERTIES section.
Install and Configure the SAP Commerce Cloud App in Marketplace
To install the app, log in to your Contentstack account and follow the steps below:
1. In the left-hand side primary navigation, click the Marketplace icon.
2. Click Apps from the left panel.
3. Within the Marketplace, you can see the available apps. Hover over the SAP Commerce Cloud app and click Install.
4. In the pop-up window, select the stack where you want to install the SAP Commerce Cloud app, accept the Terms of Service and click the Install button.
5. On the Configuration screen, you can add multiple configurations for SAP Commerce Cloud. To do so, follow the steps given below:
  1. Click the + New Configuration button to add new configuration details.
  2. In the Add Configuration modal, enter the configuration Name and click Add.
  3. After adding the configuration, enter the following details:
    1. SAP URL Structure: Choose the type of URL you want to use in your configuration.
      1. For OCC URL (Omni Commerce Connect URL): You can provide the API Base URL retrieved from the SAP Commerce Cloud dashboard.
      2. For Custom URL: If you are not using OCC URL (Omni Commerce Connect URL) from the SAP Commerce Cloud, you can select Custom URL and provide the respective API Base URL and API Route.
      Note: Please choose Custom URL if the URL does not start with https://your-base-url/occ/v2.
    2. Enter the API Base URL and API Route retrieved from step 1.
      Note: Enter the URL starting from api.
    3. Enter the Base Site ID and Backoffice URL retrieved from step 1.
  4. Set as Default: To set this configuration as the default, click this checkbox.
    Alternatively, you can set a configuration as the default by clicking the horizontal ellipses on the top-right side of the configuration section and then selecting Set as Default.
    Note: At least one app configuration should be selected as the default.
    Similarly, you can add multiple configurations by following the steps discussed above.
  5. To delete the configuration, click the horizontal ellipses and select Delete.
    In the Confirm Deletion modal, add the configuration name and click Delete.
  6. For an existing user, the credentials will be added as the default configuration, and named as legacy_config.
    Warning:
    - legacy_config is a reserved keyword and you cannot use it in adding new configurations.
    - If you delete the legacy_config configuration, data loss may occur and you will not be able to access the products and categories from the related accounts.
  7. Choose the SAP Commerce Cloud Keys to Save in Entry: Choose how to save the data fetched from the SAP Commerce Cloud account in Contentstack entries.
    1. If you select the All Fields option, you can select only a limited number of products in the entry.
    2. For Custom Fields, you can search and add specific SAP Commerce Cloud Fields you want to save in entries.
    If you select Custom Fields then the SAP Commerce Cloud Keys drop-down appears. By default, code and name keys are already selected. If you want to create a new key, click the + New Key Field option.
    In the Add SAP Commerce Cloud Key Field modal, enter the Key Name or Path and click the Create button to create a new key.
6. After adding the configuration details, click the Save button.
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.
  Note: The app requires at least one UI location to be enabled; otherwise, you would not be able to save your app configuration settings.
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 Open Stack to start using the SAP Commerce Cloud app.
Use the SAP Commerce Cloud App within your Stack
To use the SAP Commerce Cloud app within an entry of your stack, follow the steps given below:
1. Go to your stack, 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 or App, select SAP Commerce Cloud - Product and click Proceed.
  This adds SAP Commerce Cloud - 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 Extensionr or App, select SAP Commerce Cloud - Category and click Proceed.
  This adds SAP Commerce Cloud - Category Field in the custom field.
7. Under Advanced properties, you have the option to set the Config Parameter for all entries of a particular content type. If you do so, it overrides the default app configuration that you set at the time of app installation on the Configuration screen.
  The key:value passed in the configuration object overrides the default app configuration settings.
  In case you want to use a different SAP Commerce Cloud configuration for any custom field within the same stack, you need to specify the configuration name in the Config Parameter.
  { "config_label": [ "Configuration-2" ] }
  Note: If any configuration value is not added, or if all the values are empty in the Config Parameter properties settings, the commercetools app uses the default configuration which was set up in step 2.
8. After adding the app, click Save or Save and Close to save your changes.
9. In the left navigation panel, navigate to the Entries page and click + New Entry to create an entry for the above content type, and then click Proceed.
  You will see the SAP Commerce Cloud custom fields on your entry page as shown below:
10. Click the Add Product(s) button, select the products from your SAP Commerce Cloud store and add them to your entry.
  Select the products from your SAP Commerce Cloud selector page and click + Add Product(s) to add them to your entry.
  You can select the products from multiple configurations at once using the Configuration drop-down.
  You can also search for products in the SAP Commerce Cloud selector page based on the product name.
  Hover over the product on the SAP Commerce Cloud selector page, and you can see the View in SAP Commerce Cloud option to go directly to the SAP Commerce Cloud store.
  The products you selected are referenced within your entry in the thumbnail view:
  To view the products in list view, select the List view option from the dropdown as given below:
  The products you selected are referenced within your entry in the list view:
11. To reorder, open in SAP Commerce Cloud, or delete the selected product, hover over the product and perform the following:
  1. Click the Drag icon to drag and reorder the product.
  2. Click the Open in SAP Commerce Cloud icon to open the product in the SAP Commerce Cloud app.
  3. Click the Remove 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 save your entry to get the product details in the Sidebar Widget.
13. In the right navigation panel, select Apps, and then select SAP Commerce Cloud to view the product details.
14. Enter the product name in the dropdown to search and view the product details.
15. Click the Add Category(s) button, select the categories from your SAP Commerce Cloud store and add them to your entry.
  Select the categories from your SAP Commerce Cloud selector page and click + Add Category(s) to add them to your entry.
  You can select the categories from multiple configurations at once using the Configuration drop-down.
  Hover over the category on the SAP Commerce Cloud selector page, and you can see the View in SAP Commerce Cloud option to go directly to the SAP Commerce Cloud store.
  The categories you selected get referenced within your entry.
16. To remove the selected category, hover over the category and click the Remove icon.
17. After adding the category(s), Save and Publish button your entry.