Coveo-Powered Search Page Fails to Load After Upgrade
Coveo-Powered Search Page Fails to Load After Upgrade
Symptoms
After upgrading from the Coveo for Salesforce package 2.24 or prior to the 2.25 or later package, you might encounter one of the following problems:
-
The Coveo-Powered Search Page seems to be loading forever, with the following error in the browser console.
["ERROR", "Assert", "Assertion Failed!", "Value should not be null or undefined"]
-
You’re unable to add facets to your search page, with the following JavaScript error appearing.
Value should not be null or undefined
-
You’re unable to add a tab, as the Interface Editor prevents you from dropping the component.
Cause
This issue arises when you don’t have a coveo-tab-section
in your search page. With the new Coveo JavaScript Search Framework of the 2.25 package, the responsive facets need a coveo-tab-section
to load. In its absence, the Coveo-Powered Search Page is unable to load properly.
Resolution
There are two ways to fix this issue.
When You Intend to Add Tabs
You need to add a coveo-tab-section
in the code of your Interface Editor.
-
Open the Interface Editor.
With Coveo for Salesforce v3.25+ With Coveo for Salesforce V3 With Coveo for Salesforce V2 Click the Edit button in the upper-right corner of the component.
In the upper-left corner of the component, click the Edit button.
In the lower-right corner of the component, click the arrow button to expand the box; then, click Edit.
-
At the top of the page, select the Code View tab.
-
Add the following code in the space where you want to add the tab section. We recommend that you put it at the beginning of the
<div class="coveo-search-section">
section.<div class="coveo-tab-section"> </div>
-
Switch back to the UI View by clicking its tab at the top of the page.
-
You can now add your desired tabs.
When You Do Not Intend to Add Tabs
You need to disable the automatic responsive mode.
-
Open the Interface Editor.
With Coveo for Salesforce v3.25+ With Coveo for Salesforce V3 With Coveo for Salesforce V2 Click the Edit button in the upper-right corner of the component.
In the upper-left corner of the component, click the Edit button.
In the lower-right corner of the component, click the arrow button to expand the box; then, click Edit.
-
At the top of the page, select the Code View tab.
-
Within the
<div id="search" class="CoveoSearchInterface" data-enable-history="true" data-design="new">
, add the following parameter:data-enable-automatic-responsive-mode="false"
Your
div
should now look like this:<div id="search" class="CoveoSearchInterface" data-enable-history="true" data-design="new" data-enable-automatic-responsive-mode="false">
-
Save the page.