- Configuring a New Result Template
- Creating a Simple Listing Page
- Inserting and Configuring a Global Search Box
- Inserting and Customizing a Distance Resources Component
- Inserting Custom Components in an Existing Search Interface
- Integrate the Search Interface in an Existing Page
- Translating Fields to the Coveo Format
- Overriding Coveo for Sitecore Hive Initialization Options
- Creating a Custom Hive Component - Multi-Sort Tutorial
Overriding Coveo for Sitecore Hive Initialization Options
Creating a Custom Component
Overriding the initialization option requires to add custom code to an existing component, hence it is strongly recommended to duplicate an existing component instead of adding code to an out of the box component. The out of the box components are overwritten when upgrading, complexifying your upgrade process.
To create a new component
- From the file system, copy the .cshtml file of an existing Coveo for Sitecore Hive view rendering from
/Views/Coveo Hiveto another folder.
- From the Sitecore Content Editor, duplicate the view rendering item from
/Layouts/Renderings/Coveo Hiveto another folder.
- From the Sitecore Content Editor, select the view rendering item and set its
Pathfield value to the path of the .cshtml file created in step 1.
Once the custom component is created, you can add it to the search interface by using a placeholder section or extending an existing placeholder, see Inserting Custom Components in an Existing Search Interface.
Overriding the Initialization Options
In the .cshtml file of your component, add the following script after the HTML element of the component:
<script> // First select your component. @@Model.Id will render the component DOM Unique Id field value from the data source item. var myComponent = document.getElementById("@Model.Id") // Change optionToModify to the name of the option you want to override and valueForTheOption to the value for the option. myComponent.dataset.optionToModify = "valueForTheOption" </script>
Feel free to add any conditions or additional logic if needed. If you need to use Sitecore fields in your code, remember that you can use field translation directly in Coveo for Sitecore Hive (see translating-fields-to-the-coveo-format-in-coveo-for-sitecore-hive-framework).
Save the file. You should see the new attribute among the rest of the options when inspecting your page:
<div id="myFacet" class="CoveoFacet" data-available-sorts="alphaascending,alphadescending,occurrences,score" data-prebind-field="fieldTranslator" data-field="@myfield" data-option-to-modify="valueForTheOption">
This script will run before the initialization of the component since the Coveo
init happens during the
DOMContentLoaded event (see Events).
For a hands on advanced tutorial on this subject, see Creating a Custom Coveo for Sitecore Hive Component - Multi-Sort Tutorial.