Use Custom Initialization Scripts

Coveo for Sitecore components are initialized, based on the related data source options you specify, once the search page has been completely loaded. The Coveo Search Interface component launches the initialization of the interface and its embedded components.

Search Interface Initialization Script

Coveo for Sitecore 5 (February 2019)

In the past, the search interface initialization script was hard-coded in the Coveo Search Interface.cshtml view file. So, to alter the initialization of a particular search page or to leverage Coveo JavaScript Search Framework options not fronted in the Coveo Search Interface data source, while not impacting other search pages, you had to duplicate the Coveo Search Interface rendering item and view file, and make the new rendering available in the Coveo UI placeholder.

The February 2019 version of Coveo for Sitecore 5 greatly simplifies the customization of the Coveo Search Interface initialization script and, consequently, the use of additional Coveo JavaScript Search Framework options and methods (see Coveo JavaScript Search Framework - Reference Documentation).

Coveo for Sitecore packages contain the following changes:

  • A new Initialization File Name field, whose default value is init, has been added in the Coveo Search Interface data source template item.
  • The initialization script has been removed from the Coveo Search Interface.cshtml view file and replaced by a @Html.Partial line which references the InitializationFileName model property.
  • A new init.cshtml file, which contains the default search interface initialization script, has been added in the <SITECORE_INSTANCE_ROOT>\Website\Coveo\Hive\init folder.

Hence, to customize your search interface initialization, you now only need to create an initialization .cshtml view file and reference it in the Coveo Search Interface component data source.

You have a search page which contains a few facets. You would like to have the first facet collapsed at page load using the facet collapse method (see Coveo Facet Component - Collapse).

To collapse the first facet in your search interface

  1. In your file explorer, open the <SITECORE_INSTANCE_ROOT>\Website\Coveo\Hive\init folder (or the <SITECORE_INSTANCE_ROOT>\Coveo\Hive\init folder, in a Sitecore 9 or 10 instance).
  2. Create a copy of the init.cshtml file in the same folder. Name the new file collapseFirstFacet.cshtml.
  3. Open collapseFirstFacet.cshtml in a text editor.
  4. Add the following code inside the setTimeout (function() curly braces:

    searchInterface.addEventListener(Coveo.InitializationEvents.afterComponentsInitialization, function() {
        var myFacetElement = Coveo.get(document.getElementsByClassName("CoveoFacet")[0]);
        myFacetElement.collapse();
    });
    

    Your collapseFirstFacet.cshtml code should now read as follows:

    @using Sitecore.Mvc
    @using Coveo.UI.Components
    @using Coveo.UI.Components.Extensions
    @using Coveo.UI.Core.ErrorReports
    @model Coveo.UI.Components.Models.SearchInterfaces.ISearchInterfaceModel
    <script type="text/javascript">
        /*The event below was originally "DOMContentLoaded". It was replaced with the
        "CoveoSearchEndpointInitialized" event in the October 30, 2020 release of Coveo for Sitecore.*/
        document.addEventListener("CoveoSearchEndpointInitialized", function() {
            @*
                setTimeout(function() { }, 0) defers the initialization just enough to execute other CoveoSearchEndpointInitialized events in the page.
                This is required by some components to allow them to register before initialization.
            *@
            setTimeout(function() {
                var searchInterface = document.getElementById("@Model.Id");
                @if (Html.Coveo().IsEditingInPageEditor()) {
                    @: if (typeof(CoveoForSitecore) !== "undefined" && typeof(Sitecore) !== "undefined") {
                        @: CoveoForSitecore.initializeSearchInterfaceForExperienceEditor(searchInterface);
                    @: }
                } else {
                    @: if (typeof(CoveoForSitecore) !== "undefined") {
                        @: CoveoForSitecore.initSearchInterface(searchInterface);
                    @: }
                }
                searchInterface.addEventListener(Coveo.InitializationEvents.afterComponentsInitialization, function() {
                    var myFacetElement = Coveo.get(document.getElementsByClassName("CoveoFacet")[0]);
                    myFacetElement.collapse();
                });
            }, 0);
         });
    </script>
    
  5. Save your changes.
  6. In the Sitecore Experience Editor, select the Coveo Search Interface component.
  7. In the floating toolbar, select Edit the rendering’s data source. It should be the leftmost option in the toolbar.
  8. In the Initialization section, set the Initialization File Name value to the base name part of your .cshtml filename.

  9. Click OK.

Searchbox Initialization Script

Coveo for Sitecore 5 (March 2019)

In the March 2019 release of Coveo for Sitecore 5, an Initialization File Name field was added to the Coveo Searchbox and Coveo Global Searchbox components data sources. Hence, you can now create a custom searchbox initialization .cshtml view file and reference that file in a searchbox component data source, very much the same way you can reference an initialization script file in a Coveo Search Interface component data source (see Search Interface Initialization Script).

Using a custom searchbox initialization script is ideal if, for example, you need to link a Coveo Global Searchbox to a given search interface programmatically at runtime.

To associate a custom initialization script to a searchbox component

  1. In your file explorer, open the <SITECORE_INSTANCE_ROOT>\Website\Coveo\Hive\search box init folder (or the <SITECORE_INSTANCE_ROOT>\Coveo\Hive\search box init folder, in a Sitecore 9 or 10 instance).
  2. Create a copy of the init.cshtml file in the same folder. Name the new file customInit.cshtml.
  3. Open customInit.cshtml in a text editor.
  4. Edit the code.
  5. Save your changes.
  6. In the Sitecore Experience Editor, select your searchbox component.
  7. In the floating toolbar, select the Edit the rendering’s data source option. It should be the leftmost option in the toolbar.
  8. In the Initialization section, set the Initialization File Name value to customInit.
  9. Click OK.

The searchbox initialization Initialize Searchbox.cshtml file has been renamed init.cshtml and moved to the new \Coveo\Hive\search box init folder.

What's Next for Me?