Introducing Contentstack AI Assistant - our new ChatGPT integrationNew ChatGPT integrationRead more
cs-icon.svg

Salesforce Commerce App Installation Guide

Salesforce Commerce is a seamless cloud-based eCommerce platform that can help deliver a personalized and cohesive commerce experience. With its robust online store management features, you can set up an online store, create AI-powered shopping experiences and grow your online businesses.

Contentstack Marketplace allows you to easily install the Salesforce Commerce application and use it within your stack to add products and categories from the Salesforce Commerce store within your entries.

Prerequisites

This step-by-step guide explains how to install and configure the Salesforce Commerce app within your stack.

Steps for Execution

  1. Retrieve your client credentials from Salesforce Commerce
  2. Install and Configure Salesforce Commerce in Contentstack Marketplace
  3. Use Salesforce Commerce within your Stack
  1. Retrieve your client credentials from Salesforce Commerce

    Follow the steps given below to retrieve the API client ID:

    1. Log in to Commerce Cloud Account Manager.
    2. Click API Client from the menu.
    3. SFCC-API_Client.png
    4. Click the Add API Client button.
    5. SFCC-Add_API_Client.png
    6. Provide the following details for the new API client:
      1. Enter a display name and set a password.
      2. SFCC-API_Client-Name_and_Password.png
      3. Add an organization.
        1. Click the Add button for Organizations.
        2. SFCC-Organization-Add.png
        3. Select your organization and click the Add button.
        4. SFCC-Assign_Organization-Add.png
      4. Add roles.
        1. Click the Add button for Roles.
        2. SFCC-Roles-Add.png
        3. Select the required roles and click the Add button.
        4. SFCC-Assign_Roles-Add.png
      5. Add scopes under OpenID Connect.

        Enter the following scopes in Default Scopes:

        mail
        roles
        tenantFilter
        profile
        openId
        

        Enter the following scopes in Allowed Scopes:

        sfcc.shopper-baskets-orders.rw
        sfcc.shopper-promotions
        sfcc.shopper-gift-certificates
        sfcc.shopper-categories
        sfcc.shopper-product-search
        sfcc.shopper.stores
        sfcc.shopper-customers.register
        sfcc.shopper-customers.login
        sfcc.shopper-myaccount.rw
        sfcc.shopper-myaccount.addresses.rw
        sfcc.shopper-myaccount.baskets
        sfcc.shopper-myaccount.orders
        sfcc.shopper-myaccount.paymentinstruments.rw
        sfcc.shopper-myaccount.productlists.rw
        sfcc.products.rw
        sfcc.catalogs.rw
        sfcc.shopper-products
        sfcc.shopper-productlists
        
      6. SFCC-Scopes.png

        Note: By default, you will see the scope mail in the Default Scopes.

      7. Select client_secret_post as the Token Endpoint Auth Method.
      8. SFCC-client-secret-post.png
      9. Click the Save button to get the API client ID.
        Now you can see your API client ID in the Account Manager screen.
      10. Copy the API client ID for future reference.
      11. SFCC-API_Client-Displayed.png

    Follow the steps given below to retrieve the Short code, Site Id and Organization Id:

    1. Log in to Business Manager using the Account Manager credentials.
    2. Note: Contact the Salesforce Support Team to get the Business Manager account link.

    3. Go to Administration and click Site Development.
    4. SFCC-Site_Development.png
    5. Click Salesforce Commerce API Settings on the following screen. 
      SFCC-Salesforce_Commerce_API_Settings.jpg
    6. Click the Request Short Code button to retrieve the Short Code.
    7. SFCC-Request_Short_Code.png
    8. Click the Copy to Clipboard buttons next to Short Code and Organization Id and store these values for future purposes.
    9. SFCC-Short_Code-Org_ID-Copy.png
    10. Go to Administration and click Sites.
    11. SFCC-Sites.png
    12. Click Manage Sites on the following screen.
    13. SFCC-Manage_Sites.png
    14. Note down the required Site Id from the list or create a new one.
    15. SFCC-Select_or_Create_Site_ID.png

    Note: Before retrieving the Client Secret, go to the Authorization for Shopper APIs guide and follow the steps listed in the Set Up User Roles and Filters section to set the SLAS Organization Administrator roles.

    Follow the steps given below to retrieve the Client Secret:

    1. Use the following URL to open the SLAS User Login page.
      https://{{short-code}}.api.commercecloud.salesforce.com/shopper/auth-admin/v1/ui/
      

      Note: Replace the {{short-code}} in the URL with the Short Code retrieved in the previous steps.

    2. Log in to SLAS Admin UI using the Account Manager credentials.
    3. From the menu on top, click Clients.
    4. Click the Add Client button.
    5. SFCC-SLAS_Admin_UI-Add_Client.png
    6. On the next screen that appears, provide the following details:
      1. In the What tenant will be used? dropdown, select your tenant ID.

        Note: The tenant ID will be the same as the last portion of your organization ID. For example, if the organization ID is abc_zybz_001, the tenant ID will be zybz_001.

      2. In the What site will be used? dropdown, enter the site name if the site is not already populated.
      3. Enter the API client ID retrieved in the previous steps in the Client ID field.
      4. SFCC-Details_for_Client_Secret.png
    7. Click the Submit button.
      You can view the Client Secret generated at the top.
    8. SFCC-Client_Secret.png
    9. Copy and save the Client Secret.
  2. Install and Configure Salesforce Commerce in Contentstack Marketplace

    Follow the steps given below to install the application in Contentstack.

    1. Log in to your Contentstack account.
    2. In the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace.
      MP-Apps.png
    3. Click Apps from the left panel.
    4. Within the Marketplace, you will be able to see all the available apps. Hover over the Salesforce Commerce app and click Install App.
      Salesforce-Commerce-App.png
    5. In the popup window, select the stack where you want to install the Salesforce Commerce app and click the Install button.
      Salesforce-Commerce-App-Install.png
    6. On the Configuration screen, enter the following details:
      1. Enter the following details we retrieved in Step 1:
        1. Client ID (API client ID)
        2. Client Secret
        3. Organization ID
        4. Short Code
        5. Site Id
      2. Save in Entry: Choose how you want to save your data in the entry.
        1. If you select Whole JSON, the entire object returned from Salesforce Commerce will be saved. Also, with Whole JSON, you can choose only a limited number of products or categories.
        2. If you select Custom JSON, you need to search and add specific Salesforce Commerce Keys you want to fetch. The default selections are productId and productName.
    7. Note: You cannot remove the default keys from the selection for Custom JSON.

      SFCC-Configuration.png
    8. After adding the configuration details, click the Save button.
    9. Click Open Stack to start using the Salesforce Commerce application.
  3. Use Salesforce Commerce within your Stack

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

    1. Go to your stack, click the Content Models icon on the left navigation panel, and click the + New Content Type button.
    2. Create a content type by entering relevant details as given below:
    3. SFCC-Create_Content_Type.png
    4. Click the Save and proceed button.
    5. 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.
    6. Under Select Extension/App, select Salesforce Commerce - Product and click the Proceed button.
    7. SFCC-Product-Select_Extension_or_App.png
    8. Add another Custom field for category in your content type by clicking the Insert a field link represented by a + sign.
    9. Under Select Extension/App, select Salesforce Commerce - Category and click the Proceed button.
    10. SFCC-Category-Select_Extension_or_App.png
    11. After adding the app, click the Save button or the Save and Close button to save your changes.
    12. SFCC-Content_Type-Save_and_Close.png
    13. To use the Salesforce Commerce app, create an entry for the newly created content type, and you will see the Salesforce Commerce custom field on your entry page as shown below:
    14. SFCC-Entry.png
    15. Click the Add Product(s) button, select the products from your Salesforce Commerce store and add them to your entry.
    16. SFCC-Product-Selector_Page.png

      The products you selected are referenced within your entry.

      SFCC-Entry-Selected_Products.png
    17. To reorder 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 Delete icon to delete the product.
    18. Thumbnail View:

      SFCC-Products-Thumbnail-Drag_or_Delete.png

      List View:

      SFCC-Products-List-Drag_or_Delete.png

      You can drag and drop the products to arrange them in the required order in both Thumbnail and List views.

      Thumbnail View

      SFCC-Thumbnail-Gif-New.gif

      List View

      SFCC-List-Gif-New.gif

    19. Click the Save button to save your entry.
    20. You can view more product details in the Sidebar Widget.
    21. Note: You must save your entry to get the product details in the Sidebar Widget.

      SFCC-Sidebar-Gif-New.gif
    22. Click the Add Category(s) button, select the categories from your Salesforce Commerce store and add them to your entry.
    23. SFCC-Category-Selector_Page.png

      The categories you selected are referenced within your entry.

      SFCC-Entry-Selected_Categories.png
    24. To delete the selected category, hover over the category and click the Delete icon.
    25. SFCC-Category-Delete.png

    26. Click the Save button to save your entry.


Was this article helpful?
^