Filter and Boost Using JavaScript in Custom Renderings

This is for:

Developer System Administrator
Warning
Legacy feature

This article pertains to achieving relevance with the Coveo Hive framework. Coveo Hive is now in maintenance mode.

See Achieve relevance for guidance on leveraging Coveo Platform relevance features with the Coveo Atomic library.

Creating custom renderings based off Coveo for Sitecore filtering or boosting renderings lets you leverage the Coveo JavaScript Search Framework in your rendering view file code. You can subsequently add these custom renderings to your search interface(s).

Creating a Custom Filtering Rendering

The following instructions create a CoveoForSitecoreFilterExpression rendering with a custom expression and add this rendering to the search interface.

  1. Create a .cshtml file.

    1. Create a folder for custom view files (example: /Views/Project/CoveoForSitecoreHive).

    2. In the folder, create a new .cshtml file (example: JS Query Filter.cshtml).

  2. Add the dependencies.

    1. The first two dependencies are required by custom renderings.

    2. The partial view will render the rendering name on the search page in the Experience Editor.

       @using Coveo.UI.Components
 @using Coveo.UI.Components.Extensions
 @Html.Partial(Partials.EDIT_TITLE, Html.Coveo().GetViewName())

  3. Add the CoveoForSitecoreFilterExpression rendering.

     <div id="JSFilterExpression" class="CoveoForSitecoreFilterExpression"></div>

  4. Insert the JavaScript code required to create the filtering rule in the file. The following code will exclude two items (the search page and the Home page) from the search results.

     <script>
     document.addEventListener('DOMContentLoaded', function() {
         var expressionBuilder = new Coveo.ExpressionBuilder();
         var fieldName = CoveoForSitecore.Context.fields.toCoveo('@@_id');
         var homePageID = 'A5551D45FCE245718E4066F82E67D646';
         var searchPageID = 'A03A727F95E04CF7BB31D196F9756BEE';
         var contentPathValues = [homePageID, searchPageID];

         expressionBuilder.addFieldNotEqualExpression(fieldName, contentPathValues);
         document.getElementById('JSFilterExpression').dataset.scAdvancedFilter = expressionBuilder.build();
     });
 </script>

  5. Create a custom rendering in Sitecore.

    1. Copy the Query Filter rendering, located under /Renderings/Coveo Hive/Scopes to a custom rendering folder (example: /Renderings/Project/CoveoForSitecoreHive).

    2. Change the path to match it with the new .cshtml file.

      38699318

  6. Make the rendering available in the search interface.

    1. Add the rendering in the required placeholder of the search interface. In this example, the Placeholder Extender rendering is used to add the custom rendering to the Header Section placeholder allowed controls in the Modular Frame.

      38699317

  7. Add the rendering to the search interface.

    1. Open your search page with the Experience Editor and add the rendering. In this example, the rendering is available in the Header Section placeholder.

      38699316

Creating a Custom Ranking Rendering

The following instructions create a CoveoForSitecoreRankingExpression rendering with a custom expression and add this rendering to the search interface.

  1. Create a .cshtml file.

    1. Create a folder for custom view files (example: /Views/Project/CoveoForSitecoreHive).

    2. In the folder, create a new .cshtml file (example: JS Query Ranking.cshtml).

  2. Add the dependencies in the file.

    1. The first two dependencies are required by custom renderings.

    2. The partial view will render the rendering name on the search page in the Experience Editor.

       @using Coveo.UI.Components
 @using Coveo.UI.Components.Extensions
 @Html.Partial(Partials.EDIT_TITLE, Html.Coveo().GetViewName())

  3. Add the CoveoForSitecoreRankingExpression rendering in the file.

     <div id="JSRankingExpression" class="CoveoForSitecoreRankingExpression"></div>

  4. Insert the JavaScript code required to create the ranking rule in the file. The following code will boost the items having the value <VALUE_TO_BOOST> in the field <FIELD_TO_BOOST> by 500 points.

     <script>
     document.addEventListener('DOMContentLoaded', function() {
         var expressionBuilder = new Coveo.ExpressionBuilder();
         var fieldName = CoveoForSitecore.Context.fields.toCoveo('@@<FIELD_TO_BOOST>');
         var fieldValue = '<VALUE_TO_BOOST>';

         expressionBuilder.addFieldExpression(fieldName, '==', [fieldValue]);
         document.getElementById('JSRankingExpression').dataset.scRankingExpression = "$qre(expression: '" + expressionBuilder.build() + "', modifier: '500')";
     });
 </script>

  5. Create a custom rendering in Sitecore.

    1. Copy the Query Ranking rendering, located under /Renderings/Coveo Hive/Scopes to a custom rendering folder (example: /Renderings/Project/CoveoForSitecoreHive)

    2. Rename it JS Query Ranking.

    3. Change the path to match it with the new .cshtml file.

      38699319

  6. Make the rendering available in the search interface.

    1. Add the rendering in the required placeholder of the search interface. In this example, the Placeholder Extender rendering is used to add the custom rendering to the Header Section placeholder allowed controls in the Modular Frame.

      38699317

  7. Add the rendering to the search interface.

    1. Open the search page with the Experience Editor and add the rendering. In this example, the rendering is available in the Header Section placeholder.

      38699316