Getting Started With Coveo for Salesforce B2B Commerce

Pro and Enterprise editions only

Coveo for Salesforce B2B Commerce allows you to grow your revenue by making B2B buying experiences relevant and personal, with Enterprise-grade AI-powered search and product recommendations technology.

This section explains how to index the necessary objects and how to create a Coveo Search page within B2B Commerce.

You should contact Coveo Support to get started with Coveo for B2B Commerce.

Prerequisites

To take advantage of Coveo for Salesforce B2B Commerce in your Salesforce Organization, you must:

  1. Install Salesforce B2B Commerce in your Salesforce Organization.

  2. Set up a Salesforce Storefront in your Salesforce Organization.

    When you reach the Load Storefront Data from a Static Resource step, if you have your own set of data or you plan to use your own set, choose the Minimum data required to start building a storefront option.

  3. Install the Coveo for Salesforce Application.

  4. Create a Coveo Commerce Catalog.

Step 1 - Configuring Your B2B Commerce Sources

Add a CCProducts Source

Create a Salesforce Source with the following configuration (see Add or Edit a Salesforce Source):

  • Source name: choose a significant name, such as CCProducts.

  • Schema version: choose the Current version in the dropdown menu.

  • Objects: you must click the Select specific objects manually button and select CC Product.

Add a CCProductsEntitlements Source

  1. Create a Salesforce Source with the following configuration (see Add or Edit a Salesforce Source):

    • Source name: choose a significant name, such as CCProductsEntitlements.

    • Schema version: choose the Current version in the dropdown menu.

    • Objects: you must click the Select specific objects manually button and select CC Price List Item.

      • End Date (ccrz__EndDate__c)

      • Price (ccrz__Price__c)

      • Start Date (ccrz__StartDate__c)

      • Ccrz Product R (ccrz__product__r) > Record ID (Record IDccrz__Product__r.Id)

  2. Create the following fields (see Adding and Managing Fields):

    Field name Type Checkboxes Advanced Setting
    sfccrzenddatec Date Facet Use cache for nested queries
    sfccrzstartdatec Date Facet Use cache for nested queries
    sfccrzpricelistc String Facet Use cache for nested queries
    sfccrzproductrid String Facet Use cache for nested queries
  3. Create the mappings associated to each field (see Adding and Managing Source Mappings):

    Field name Mapping Rule
    sfccrzenddatec %[ccrz__EndDate__c]
    sfccrzstartdatec %[ccrz__StartDate__c]
    sfccrzpricelistc %[ccrz__Pricelist__r.Id]
    sfccrzproductrid %[ccrz__Product__r.Id]

Add a CCOrders Source

Create a Salesforce Source with the following configuration (see Add or Edit a Salesforce Source):

  • Source name: choose a significant name, such as Order Objects.

  • Schema version: choose the Current version in the dropdown menu.

  • Objects: you must click the Select specific objects manually button and select CC Order and CC Order Item.

Step 2 - Create a Visualforce Page for Your Salesforce B2B Commerce Storefront Search Page.

You must first Create a Visualforce page for your Your Salesforce B2B Commerce Storefront Search Page:

  1. In Salesforce, under Setup, search for and select Visualforce Pages (Build > Develop > Visualforce Pages).

  2. On the Visualforce Pages page, select New.

  3. Give your new component a Label; the Name should be filled automatically.

  4. In the Visualforce Markup tab, enter the following code:

     <apex:page sidebar="false" showHeader="false" standardStylesheets="false" applyHtmlTag="false">
         <CoveoV2:SearchInterface name="YourCommerceInterfacePageName" catalog="YourCatalogId"></CoveoV2:SearchInterface>
     </apex:page>
    

    In which you replace:

    • YourCommerceInterfacePageName with the name of your Commerce interface.

    • YourCatalogId with the ID of your Coveo Catalog.

  5. Click Save.

  • All attribute and options of the SearchInterface section are mandatory. However, you may want to wait before putting the catalogId if you want to create your search page with more than only products.

  • You may notice that the interface editor toolbox is a bit out of place in your Visualforce community. You can fix the issue by injecting the following CSS:

      <style>
          .toolbox-container > div {
              margin-left: -7em;
          }
      </style>
    

Step 3 - Configuring a Coveo for Salesforce B2B Commerce Storefront Search Page

  1. Access the Visualforce page you created at the previous step (see View and Edit Visualforce Pages).

  2. In your Visualforce page Page Detail subpage, click the Preview button.

  3. In the webpage that opens, click Set up a search page to build your Coveo search interface.

  4. Click Create page.

Step 4 - Create a “Subscriber Pages” Object

Use this procedure to create your CC Subscriber Page.

Note the value you assigned for the Page Key field as you will need it later on.

Step 5 - Add the Coveo Searchbox in Your Salesforce B2B Commerce Storefront Search Page

You must create a Visualforce page for your Commerce Search box:

  1. In Salesforce, under Setup, search for and select Visualforce Pages (Build > Develop > Visualforce Pages).

  2. On the Visualforce Pages page, select New.

  3. In the Label box, type SearchBox; the Name should be filled automatically.

  4. In the Visualforce Markup tab, enter the following code:

     <apex:page docType="html-5.0" sidebar="false" showHeader="false" standardStylesheets="false" cache="false" applyHtmlTag="false">
         <CoveoV2:JsSearch
                 catalog="YourCatalogId"
                 stylesheet="CoveoFullSearchNewDesign.css"/>
         <!-- Declare a template containing the CoveoSearchbox -->
         <script id="coveoSearchbox" type="text/template">
         <div id="searchbox" style="z-index:20;min-height:100%;background:white;
     ">
             <div class="CoveoSearchbox" data-enable-query-syntax="true"></div>
         </div>
         </script>
         <script>
         jQuery(function ($) {
             // Inject the template declared before in place of the `.search_form` element that is contained in the productSearchView section.
             CCRZ.uiProperties.productSearchView.desktop.tmpl = 'coveoSearchbox';
             CCRZ.uiProperties.productSearchView.phone.tmpl = 'coveoSearchbox';
             // When the productSearchView section is refreshed, initialize the Searchbox.
             CCRZ.pubSub.once('view:productSearchView:refresh', function (event, args) {
                 var root = document.getElementById('searchbox');
                 if (root) {
                     Coveo.initSearchbox(root,'/DefaultStore/ccrz__CCPage?pageKey=coveo&CoveoStorefront=DefaultStore');
                 }
             });
         });
         </script>
     </apex:page>
    

    Where you replace:

    • YourCatalogId with the ID of your Coveo Catalog.

    • coveo (next to pageKey=) with the page key created at step 4.

    • DefaultStore (next to CoveoStorefront=) with the name of the Storefront in which you want the Coveo Searchbox.

  5. Click Save.

  6. From the the CC Admin tab, access your Storefront Configuration Settings, and add your new page as a PageInclude, on Header Include End (see Page Includes and Sample Gross Layout Override).

    Your configurations should look like the followings:

    2925-new-page-setting1

    2925-new-page-setting2

Step 6 - Refresh Your Configuration Cache

Once you are done with the previous steps, you must refresh your configuration cache in order to take advantage of Coveo for B2B Commerce in your Organization.

Recommended Articles