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

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. Copy the API and Backoffice URLs. 
   
   4. 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. 

   



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. Within the Marketplace, you can see all the apps available; hover over the SAP Commerce Cloud app and click the Install App button. 
   
   4. 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. 
   
   5. On the Configuration screen, enter the following details retrieved from your SAP Commerce Cloud Account:
      1. API Base URL

      Note: Enter the URL starting from api.

      2. Base Site ID
      3. Backoffice URL
      4. 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.
   
   6. Click the Save button.
   7. 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. 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 SAP Commerce Cloud - Product and click the Proceed button. 
   
   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 SAP Commerce Cloud - Category and click the Proceed button. 
   
   7. After adding the app, click Save or Save and Close to save your changes. 
   
   8. 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.

   You will see the SAP Commerce Cloud custom fields on your entry page as shown below:

   
   9. Click the Add Product(s) button, select the products from your SAP Commerce Cloud store and add them to your entry. 
   

   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:

   
   10. 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.

   Thumbnail View

   

   List View 

   
   11. 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.

   12. In the right navigation panel, select Widgets, and then select SAP Commerce Cloud to view the product details.
   
   13. Click the Add Category(s) button, select the categories from your SAP Commerce Cloud store and add them to your entry. 
   

   The categories you selected are referenced within your entry. 

   
   14. To remove the selected category, hover over the category and click the Remove icon.
   
   15. Click the Save button to save your entry.