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

This step-by-step guide explains how to install and configure SAP Commerce Cloud within your stack.

The steps to be performed are as follows:

  1. Retrieve Configuration Details for SAP Commerce Cloud
  2. Install and Configure SAP Commerce Cloud in Contentstack Marketplace
  3. Use SAP Commerce Cloud within your Stack
  1. 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, and then click the environment for which you must retrieve the configuration details. 
    3. SAP-Cloud_Portal-Environments.png
    4. Copy the API and Backoffice URLs. 
    5. SAP-Cloud_Portal-API-Backoffice.png
    6. To retrieve the Base Site ID, follow the steps below:
      1. Click the Backoffice URL and log in using your SAP Commerce Cloud account credentials.
      2. Under Base Commerce, in the left panel, click Base Store.
      3. Click the Base Site whose Base Site ID you want to retrieve.

    You will find the Base Site ID under the PROPERTIES section. 

    SAP-Cloud_Portal-Base_Site_ID.png

  2. Install and Configure SAP Commerce Cloud 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. SAP-Marketplace_Icon.png
    4. Within the Marketplace, you can see all the apps available; hover over the SAP Commerce Cloud app and click the Install App button. 
    5. SAP-Install.png
    6. Select the stack for which you want to install the SAP Commerce Cloud app, accept the Terms of Service and Privacy Policy, and click the Install button. 
    7. SAP-Select_Stack.png
    8. On the Configuration screen, enter the following details retrieved from your SAP Commerce Cloud Account:
      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. API Base URL
      3. Note: Enter the URL starting from api.

      4. Base Site ID
      5. Backoffice URL
      6. Save in Entry: Choose how you want to save your data in the entry.
        1. If you select Whole JSON, you can select only a limited number of products.
        2. For Custom JSON, you should search and add specific SAP Commerce Cloud Keys you want to fetch. By default, the code and name of the products are selected.
          SAP-Configuration-SAP-URL-Structure-Addon.png
    9. Click the Save button.
    10. Click the Open Stack button to start using the SAP Commerce Cloud application.
  3. Use SAP Commerce Cloud within your Stack

    To use the SAP Commerce Cloud application 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. SAP-Content_Type.png
    4. 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.
    5. Under Select Extension/App, select SAP Commerce Cloud - Product and click the Proceed button. 
    6. SAP-Custom_Field-Product.png
    7. Add another Custom field for category in your content type by clicking the Insert a field link represented by a + sign.
    8. Under Select Extension/App, select SAP Commerce Cloud - Category and click the Proceed button. 
    9. SAP-Custom_Field-Category.png
    10. After adding the app, click Save or Save and Close to save your changes. 
    11. SAP-Custom_Field-Save_and_Close.png
    12. In the left navigation panel, navigate to the Entries page and click + New Entry to create a new entry for the above content type. And then click Proceed.
    13. You will see the SAP Commerce Cloud custom fields on your entry page as shown below:

      SAP-Custom_Fields_in_Entry.png
    14. Click the Add Product(s) button, select the products from your SAP Commerce Cloud store and add them to your entry. 
    15. SAP-Products-Media_Library.png

      The products you selected are referenced within your entry in the thumbnail view:

      SAP-Products-in-Entry.png

      To view the products in list view, select the list view option from the dropdown as given below:

      SAP-Product-Select_List.png

      The products you selected are referenced within your entry in the list view:

      SAP-Product-List.png
    16. To reorder, open in SAP Commerce Cloud or delete the selected product, hover over the product to get the options available, then 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 Delete icon to delete the product.
    17. Thumbnail View

      SAP-Product-Thumbnail-Edits-Reorder.png

      List View 

      SAP-Product-List-Edits-Reorder.png
    18. Click the Save button to save your entry.
    19. 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.

    20. In the right navigation panel, select Widgets, and then select SAP Commerce Cloud to view the product details.
    21. SAP-Product-Sidebar.png
    22. Enter the product name in the dropdown to search and view the product details.
      SAP-Product-Sidebar-Search.png
    23. Click the Add Category(s) button, select the categories from your SAP Commerce Cloud store and add them to your entry. 
    24. SAP-Categories-Media_Library.png

      The categories you selected are referenced within your entry. 

      SAP-Categories-in-Entry.png
    25. To remove the selected category, hover over the category and click the Remove icon.
    26. SAP-Categories-Remove.png
    27. Click the Save button to save your entry.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^