Dynamically linking Coveo Search box to Search results page - Coveo for Sitecore 5

As you know, Coveo for sitecore 5.0 and Hive is very different from earier versions. Everything is component based. This makes it easier to build your own search page where you can include components that you require.

In the screnshot below you will notice that, as was in Coveo for Sitecore 4.1 where we had to specify the target Search page in one of the fields of rendering Search box component, here in coveo for sitecore 5.0, since every component needs to have a datasource, the datasource item for search box component, has this field "Search Page URI" to specify the target Search page. So, like in coveo for sitecre 4.1, you can specify any value here but following steps will show you how to resolve this dynamically based on the context site.

Following are the steps:

1- In the location "C:\inetpub\wwwroot\xp0.sc\Views\Coveo Hive\Initialization\", create a copy of existing file "Initialize Searchbox.cshtml" and name it as your "[Custom] Initialize Searchbox.cshtml".

2- Open this custom file and replace the content with the following:

@model Coveo.UI.Components.Models.SearchBoxes.ISearchboxModel  
  
@{  
    string \_searchPath = Sitecore.Context.Site.RootPath + Sitecore.Context.Site.StartItem + "/search";  
    Sitecore.Data.Items.Item \_searchItem = Sitecore.Context.Database.GetItem(\_searchPath);  
    \_searchPath = Sitecore.Links.LinkManager.GetItemUrl(\_searchItem);  
  
}  

<script>  
    document.addEventListener("DOMContentLoaded", function() {  
        var searchboxElement = document.getElementById("@Model.Id");  
        searchboxElement.addEventListener("CoveoComponentInitialized", function() {  
            @\*CoveoForSitecore.initSearchboxIfStandalone(searchboxElement, "@Model.Properties.SearchPageUri");\*@  
            CoveoForSitecore.initSearchboxIfStandalone(searchboxElement, "@\_searchPath");  
        });  
    })  
</script>  

If you compare this file with the original file (Initialize Searchbox.cshtml), you will notice that I commented out the following line to add my own target search page ("/search") on the context site.
CoveoForSitecore.initSearchboxIfStandalone(searchboxElement, "@Model.Properties.SearchPageUri");

3- Make sure to save this file in the same location "C:\inetpub\wwwroot\xp0.sc\Views\Coveo Hive\Initialization\" as coveo strictly looks only at this location.

4- Next, you will need to add code to the coveo search box so that it uses the above initialization code. Again, you can make a copy of default search box code "C:\inetpub\wwwroot\xp0.sc\Views\Coveo Hive\Search Boxes\Coveo Searchbox.cshtml" and name it as "C:\inetpub\wwwroot\xp0.sc\Views\Coveo Hive\Search Boxes\[Custom] Coveo Searchbox.cshtml".

5- Open this file and comment out this the following line

@Html.Coveo().InitializationPartial(Initializers.SEARCHBOX, Model)

and add the following:

@Html.Coveo().InitializationPartial("\[Custom\] Initialize Searchbox", Model).

Note that the name is what you provided in step 1 and also that we just give the name and no file extension or path. This is because coveo looks for this initialization code in the default path "C:\inetpub\wwwroot\xp0.sc\Views\Coveo Hive\Initialization\".

6- The code for this custom search box code ([Custom] Coveo Searchbox.cshtml) would look like:

@using System  
@using Coveo.UI.Components  
@using Coveo.UI.Components.Extensions  
@using Coveo.UI.Core.ErrorReports  
@using Sitecore.Mvc  
@model Coveo.UI.Components.Models.SearchBoxes.ISearchboxModel  

@{  
    IErrorReport errorReport = Model.ValidateModel();  

}  
@Html.Coveo().RenderErrorSummary(errorReport)  
@Html.Partial(Partials.COMPONENT\_ERROR, errorReport)  

@\*@Html.Coveo().InitializationPartial(Initializers.SEARCHBOX, Model)\*@  
@Html.Coveo().InitializationPartial("ISI Initialize Searchbox", Model)  


@if (Model.IsConfigured)  
{  
    <div id="@(Model.Id)\_container"  
         @foreach (var property in @Model.Properties.SearchInterfaceSubModel.RawProperties) { @: data-@(property.Key)='@(property.Value)'  
         }>  
        @if (@Model.Properties.SearchInterfaceSubModel.RawProperties.Count > 0)  
        {  
            @Html.Partial(Partials.DEBUG\_INFORMATION, Model.Properties.SearchInterfaceSubModel)  
        }  
        <div id="@Model.Id"  
             class="CoveoSearchbox"  
             @foreach (var property in @Model.RawProperties) { @: data-@(property.Key)='@(property.Value)'  
             }>  
            @Html.Partial(Partials.DEBUG\_INFORMATION, Model)  
            @Html.Coveo().ValidationPartial(Validators.RESOURCES\_ARE\_INCLUDED, Model)  
            <div class="CoveoForSitecoreExpressions"></div>  
            <div class="CoveoForSitecoreConfigureSearchHub" data-sc-search-hub="@Model.Properties.SearchHub"></div>  
        </div>  
        @Html.Sitecore().CoveoDynamicPlaceholder("coveo-ui-searchbox-components")  
    </div>  
}  

7- You can make a copy of item "Coveo Global Search Box" and modify the "path" to point to the custom search box code ([Custom] Coveo Searchbox.cshtml) as created in step 6 above.

8- That is it, just like in coveo for sitecore 4.1, you can rest assured that anytime the search box triggers the search page, it will redirecting to your context search page (in my example, child item of home item of site called "Search").

View more blogs and tutorials about Coveo

To view information about Sitecore, please visit

here for blogs and tutorials or
visit here to view our Sitecore work