THIS IS ARCHIVED DOCUMENTATION

Overriding Coveo for Sitecore Hive Initialization Options

This is for:

Developer System Administrator

Coveo for Sitecore Hive components and their underlying Coveo JavaScript Search Framework components have many available options.

These options are often configurable in Sitecore on the data source items associated to the UI components. However, you might want to add an option which is available in the Coveo JavaScript Search Framework, but not yet in Coveo for Sitecore Hive. You might also want to add the option programmatically based on certain conditions.

Creating a Custom Component

Overriding the initialization option requires to add custom code to an existing component, hence we strongly recommend that you 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

  1. From the file system, copy the .cshtml file of an existing Coveo for Sitecore Hive view rendering from /Views/Coveo Hive to another folder.
  2. From the Sitecore Content Editor, duplicate the view rendering item from /Layouts/Renderings/Coveo Hive to another folder.
  3. From the Sitecore Content Editor, select the view rendering item and set its Path field 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.