Get started with Coveo for Salesforce B2B Commerce for Visualforce
Get 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:
-
Install Salesforce B2B Commerce for Visualforce in your Salesforce organization.
-
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.
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. In order for your source to benefit from the group of functionalities that promote the personalization feature, it needs to be Stream API enabled.
Add a source for the Product
objects
-
On the Sources (platform-ca | platform-eu | platform-au) page, click Add source.
-
Add a Salesforce source linked to your Salesforce organization with the B2B Commerce content and specify the following configuration information:
-
Source name: Enter a significant name. This source will index your
Product
objects. -
Schema version: Select the Current version in the dropdown menu.
-
Objects:
- Unselect Service Cloud.
-
Select B2B Commerce for Visualforce (Products) to index the custom
Product
andPriceListItem
objects (i.e.,ccrz__E_Product__c
andccrz__E_PriceList__c
, respectively).The
Product
object retrieves information related to theCategories
,Inventory_Items
,ProductMedias
, andSpecs
child objects.
-
-
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
-
On the Sources (platform-ca | platform-eu | platform-au) page, click Add source.
-
Add a Salesforce source linked to your Salesforce organization with the B2B Commerce content and specify the following configuration information:
-
Source name: Enter a significant name. This source will index your
Order
objects. -
Schema version: Select the Current version in the dropdown menu.
-
Objects:
-
-
Click Add source.
Step 2: Create a commerce catalog to support Commerce entitlements
-
On the Catalogs (platform-ca | platform-eu | platform-au) page, click Add catalog.
-
Add a commerce catalog for your product source.
-
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:
-
In Salesforce, under Setup, search for and select Visualforce Pages (Build > Develop > Visualforce Pages).
-
On the Visualforce Pages page, select New.
-
Give your new component a Label; the Name should be filled automatically.
-
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.
-
-
Click Save.
-
All attribute and options of the
SearchInterface
section are mandatory. However, you may want to wait before putting thecatalogId
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
-
Access the Visualforce page you created in the previous step (see View and Edit Visualforce Pages).
-
On your Visualforce page Page Detail subpage, click Preview.
-
In the webpage that opens, click Set up a search page to build your Coveo-powered search interface.
-
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:
-
In Salesforce, under Setup, search for and select Visualforce Pages (Build > Develop > Visualforce Pages).
-
On the Visualforce Pages page, select New.
-
In the Label box, type
SearchBox
; the Name should be filled automatically. -
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 topageKey=
) with the page key created in step 3. -
DefaultStore
(next toCoveoStorefront=
) with the name of the Storefront in which you want the Coveo Searchbox.
-
-
Click Save.
-
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:
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.