Use Coveo Search in Salesforce B2C Storefront Reference Architecture (SFRA)
Use Coveo Search in Salesforce B2C Storefront Reference Architecture (SFRA)
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.
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 |
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 |
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 |
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 |
Update the file as required for your storefront.