Getting Started With Coveo for Salesforce B2B Commerce for Visualforce

Pro and Enterprise editions only

Coveo for Salesforce B2B Commerce for Visualforce lets you 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-powered search page within Salesforce B2B Commerce for Visualforce.

The earliest version of Salesforce B2B Commerce for Visualforce (formerly CloudCraze) that’s supported by Coveo is 4.12.

Contact Coveo Support to get started with Coveo for Salesforce B2B Commerce for Visualforce.

Prerequisites

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

  1. Install Salesforce B2B Commerce for Visualforce 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. Configure the Coveo for Salesforce application.

  5. Create a dedicated Salesforce crawling user.

Indexing Salesforce B2B Commerce for Visualforce

Step 1: Configure Your B2B Commerce Sources

To configure your B2B Commerce sources, you must create two separate sources (i.e., one for the custom Product objects and another for the custom Order objects.

Add a Source for the Product Objects

  1. On the Sources page, click Add source.

  2. Add a Salesforce source linked to your Salesforce organization with the B2B Commerce content and specify the following configuration information:

    1. Source name: Enter a significant name. This source will index your Product objects.

    2. Schema version: Select the Current version in the drop-down menu.

    3. Objects:

      • Unselect Service Cloud.
      • Select B2B Commerce for Visualforce (Products) to index the custom Product and PriceListItem objects (i.e., ccrz__E_Product__c and ccrz__E_PriceList__c, respectively).

        The Product object retrieves information related to the Categories, Inventory_Items, ProductMedias, and Specs child objects.

  3. Click Add source.

Product spec fields are automatically selected when you add a source for the Product objects.

Add a Source for the Order Objects

  1. On the Sources page, click Add source.

  2. Add a Salesforce source linked to your Salesforce organization with the B2B Commerce content and specify the following configuration information:

    1. Source name: Enter a significant name. This source will index your Order objects.

    2. Schema version: Select the Current version in the drop-down menu.

    3. Objects:

      • Unselect Service Cloud.

      • Select B2B Commerce for Visualforce (Orders) to index the custom Order and OrderItem objects (i.e., ccrz__E_Order__c and ccrz__E_OrderItem__c, respectively).

  3. Click Add source.

Step 2: Create a Commerce Catalog to Support Commerce Entitlements

  1. On the Catalogs page, click Add catalog.

  2. Add a commerce catalog for your product source.

  3. Create a new catalog configuration.

    Once your commerce catalog is created, stream your catalog data into the source. This ensures that the catalog is properly registered.

Integrating Coveo in your B2B for Visualforce Storefront

Step 1: Create a Visualforce Page for Your Salesforce B2B Commerce Storefront Search Page

You must first Create a Visualforce page for 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="<YOUR_COMMERCE_INTERFACE_PAGE_NAME>" catalog="<YOUR_CATALOG_ID>"></CoveoV2:SearchInterface>
     </apex:page>
    

    Where you replace:

    • <YOUR_COMMERCE_INTERFACE_PAGE_NAME> with the name of your Commerce interface.

    • <YOUR_CATALOG_ID> 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 2: Configure a Coveo for Salesforce B2B Commerce Storefront Search Page

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

  2. On your Visualforce page Page Detail subpage, click Preview.

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

  4. Click Create page.

Step 3: 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 4: 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's 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 in step 3.

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

  5. Click Save.

  6. From 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 as follows:

    2925-new-page-setting1

    2925-new-page-setting2

Step 5: Refresh Your Configuration Cache

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

What’s Next?

Learn how to display product pricing in a B2B search page.

Learn about common Coveo for Salesforce customizations.

Recommended Articles