Coveo Global Searchbox
Like the Coveo Searchbox, the Coveo Global Searchbox rendering implements the Coveo JavaScript Search Framework Omnibox component. The Coveo Global Searchbox rendering also provides data source options to configure it as a global searchbox.
The Coveo Global Searchbox rendering triggers search and query suggestion calls to the Search API through the REST endpoint proxy.
Usage Notes
-
Ensure you set the
Override search hubdata source value properly (see About the Search Hub). -
When used solely in article pages, the Coveo Global Searchbox is initialized as a standalone search box which redirects to the search page specified in the
Search page URIdata source field (see Scenario 1: Different Search Boxes in and out of the Search Results Page). -
When used in both your article and search results page header, insert the Coveo Global Searchbox rendering in an External Components Section. This links the Coveo Global Searchbox to the Coveo Search Interface specified in the External Components Section data source and ensures the Coveo Global Searchbox behaves as if it were inserted within that Coveo Search Interface (see Scenario 2: Same Search Box in and out of the Search Results Page).
Insertion Location
When adding the Coveo Global Searchbox solely to your article headers, insert the Coveo Global Searchbox rendering as illustrated in the video below.
When linking the Coveo Global Searchbox to a search interface, the External Components Section rendering adds a Global Searchbox placeholder. Insert your Coveo Global Searchbox rendering in this Global Searchbox placeholder.
Example insertion sequence for the Coveo Global Searchbox rendering. A placeholder whose Placeholder Key value is ArticleHeaderPlaceholder was created and its Allowed Controls were edited to include the Coveo Search Resources (a mandatory rendering), Coveo Global Searchbox, and Coveo Page View Analytics renderings. The ArticleHeaderPlaceholder was inserted in an article layout .cshtml file. This insertion sequence applies to scenario 1 in Insert and Configure a Global Search Box in which the Coveo Global Searchbox is added solely to your article headers.
When adding the Coveo Global Searchbox solely to your article headers, insert the Coveo Global Searchbox rendering in the partial design header Sitecore placeholder.
When linking the Coveo Global Searchbox to a search interface, the External Components Section SXA rendering adds a coveouiexternalcomponentssxa placeholder. Insert your Coveo Global Searchbox rendering in this coveouiexternalcomponentssxa placeholder.
Example insertion sequence for the Coveo Global Searchbox rendering. This insertion sequence applies to scenario 1 in Insert and Configure a Global Search Box in which the Coveo Global Searchbox is added solely to your article headers.
Data Source Options
| Option name | Description |
|---|---|
| Placeholder text | See placeholder component option |
| Height | See height component option |
| Search page URI | The search page on which to redirect when there's a query (see initSearchbox component option). |
| Enable partial match | See enablePartialMatch component option |
| Partial match minimum number of keywords | See partialMatchKeywords component option |
| Partial match threshold | See partialMatchThreshold component option |
| Enable wildcards | See enableWildcards component option |
| Enable question marks | See enableQuestionMarks component option |
| Enable lowercase operators | See enableLowercaseOperators component option |
| Enable query syntax | See enableQuerySyntax component option |
| Query suggest character threshold | See querySuggestCharacterThreshold component option |
| Clear filters on new query | See clearFiltersOnNewQuery component option |
| Enable Coveo Machine Learning query suggestions | See enableQuerySuggestAddon component option |
| Enable field suggestions after typing @ in searchbox | See enableFieldAddon component option |
| Enable field suggestions in searchbox | See enableFieldAddon component option |
| Enable suggestions of query extensions | See enableQueryExtensionAddon component option |
| Query pipeline | See pipeline component option |
| Maximum age | See maximumAge component option |
| Override search hub | Used to specify a search hub to override the search hub used for query suggestions in the Search page URI (see About the Search Hub). |
| Initialization file name | Specifies the cshtml file to use to initialize the search box (see Use Custom Initialization Scripts). |
| DOM unique Id | Randomly generated HTML element id. |
|
Additional data attributes |
Allows use of the Coveo JavaScript Search Framework Omnibox component options that aren’t directly available in the data source. |
Sample Generated HTML and Corresponding Rendering Behavior
In the following example, the Coveo Global Searchbox rendering is inserted directly in an article page header (i.e., not in an External Components Section). The data source is set with the following values:
-
Search page URI:Content/Site4/CoveoSearch -
Override search hub:ArticleHeaderSearchHub
Generated HTML:
<!-- Beginning of the "<SITECORE_INSTANCE_ROOT>\Website\Views\Coveo Hive\Initialization\Initialize Searchbox.cshtml"
or custom searchbox .cshtml initialization file -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var searchboxElement = document.getElementById("_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9");
searchboxElement.addEventListener("CoveoComponentInitialized", function() {
CoveoForSitecore.initSearchboxIfStandalone(searchboxElement, "/Site4/CoveoSearch");
});
})
</script>
<!-- End of the "<SITECORE_INSTANCE_ROOT>\Website\Views\Coveo Hive\Initialization\Initialize Searchbox.cshtml"
or custom searchbox .cshtml initialization file -->
<div id="_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9_container" class="coveo-for-sitecore-search-box-container"
data-prebind-maximum-age='currentMaximumAge'>
<div id="_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9" class="CoveoSearchbox" data-enable-omnibox='true'
data-prebind-maximum-age='currentMaximumAge' data-clear-filters-on-new-query='false'>
<!-- Beginning of Validate Resources Are Included.cshtml view file -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var componentId = "_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9";
var componentElement = document.getElementById(componentId);
function showError(error) {
console.error(error);
}
function areCoveoResourcesIncluded() {
return typeof (Coveo) !== "undefined";
}
if (areCoveoResourcesIncluded()) {
var event = document.createEvent("CustomEvent");
event.initEvent("CoveoComponentInitialized", false, true);
setTimeout(function() {
componentElement.dispatchEvent(event);
}, 0);
} else {
componentElement.classList.add("invalid");
showError("The Coveo Resources component must be included in this page.");
}
});
</script>
<!-- End of Validate Resources Are Included.cshtml view file -->
<div class="CoveoForSitecoreBindWithUserContext"></div>
<div class="CoveoForSitecoreExpressions"></div>
<div class="CoveoForSitecoreConfigureSearchHub" data-sc-search-hub="ArticleHeaderSearchHub"></div>
</div>
<div>Global Searchbox behavior:
