Use Coveo Search in Salesforce B2C Storefront Reference Architecture (SFRA)

This is for:

Developer System Administrator
In this article

The B2C Commerce Storefront Reference Architecture (SFRA) allows for adding custom code to the storefront. This article provides recommendations on how to add the Coveo-powered search to your SFRA storefront.

Important

This article focuses on the B2C Commerce Storefront Reference Architecture (SFRA). However, it’s possible to implement the Coveo search in the SiteGenesis architecture.

Most of the steps are the same for SiteGenesis; those that are different are formatted as SiteGenesis only notes.

Add custom code

By default, an SFRA storefront has the base cartridge, app_storefront_base. To add the Coveo-powered search to your storefront, you need to replace the following files:

The templates for adding the Coveo search are included into the int_coveo_sfra_changes cartridge.

htmlHead.isml

Replace the htmlHead.isml file located in the app_storefront_base cartridge with the int_coveo_sfra_changes/cartridge/templates/default/common/htmlHead.isml template.

SiteGenesis only

For SiteGenesis, the template is int_coveo_sg_changes/cartridge/templates/default/components/header/htmlhead.isml

Find and update the following code to suit your needs:

<iscomment>Custom Start: Coveo Integration</iscomment>
<isif condition="${'coveoEnabled' in dw.system.Site.current.preferences.custom ? dw.system.Site.current.preferences.custom.coveoEnabled : false}">
    <isinclude template="coveo/coveoInclude" />
</isif>
<iscomment>Custom End: Coveo Integration</iscomment>

pageHeader.isml

Replace the pageHeader.isml file located in the app_storefront_base cartridge with the int_coveo_sfra_changes/cartridge/templates/default/components/header/pageHeader.isml template.

SiteGenesis only

For SiteGenesis, the template is int_coveo_sg_changes/cartridge/templates/default/components/header/header.isml

Find and update the following code to suit your needs:

<iscomment>Custom Start: Coveo Integration</iscomment>
<isset name="coveoEnabled" value="${'coveoEnabled' in dw.system.Site.current.preferences.custom ? dw.system.Site.current.preferences.custom.coveoEnabled :false}" scope="page" />
<isset name="coveoSearchEnabled" value="${'coveoSearchEnabled' in dw.system.Site.current.preferences.custom ? dw.system.Site.current.preferences.custom.coveoSearchEnabled : false}" scope="page" />
<isif condition="${coveoEnabled && coveoSearchEnabled}">
    <script src="${URLUtils.staticURL('/js/coveoSearch.js')}"></script>
</isif>
<iscomment>Custom End: Coveo Integration</iscomment>

search.isml

Replace the search.isml file located in the app_storefront_base cartridge with the int_coveo_sfra_changes/cartridge/templates/default/components/header/search.isml template.

SiteGenesis only

For SiteGenesis, the template is int_coveo_sg_changes/cartridge/templates/default/search/simplesearch.isml

Update the file as required for your storefront.

suggestions.isml

Replace the suggestions.isml file located in the app_storefront_base cartridge with the int_coveo_sfra_changes/cartridge/templates/default/search/suggestions.isml template.

SiteGenesis only

For SiteGenesis, the template is int_coveo_sg_changes/cartridge/templates/default/search/suggestions.isml

Update the file as required for your storefront.