Filtering and Ranking Rules Using JavaScript

Filtering rules

To use JavaScript for filtering, insert a CoveoForSitecoreFilterExpression component with a custom expression in a rendering, and add the 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 components. 
    2. The partial view will render the component’s 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 component.

    <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.

  6. Make the component available in the Search Interface.
    1. Add the component in the required placeholder of the search interface. In this example, the Placeholder Extender component is used to add the rendering in the Header section of the Modular Frame.

  7. Add the component to the Search Interface.
    1. Open your search page with the Experience Editor and add the component. In this example, the component is available in the Header Section.

Ranking rules

To use JavaScript for ranking, insert a CoveoForSitecoreRankingExpression component with a custom expression in a rendering, and add it 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 components. 
    2. The partial view will render the component’s 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 component 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 FieldToBoost by 500 points.

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var expressionBuilder = new Coveo.ExpressionBuilder();
            var fieldName = CoveoForSitecore.Context.fields.toCoveo('@@FieldToBoost');
            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.

  6. Make the component available in the Search Interface.
    1. Add the component in the required placeholder of the Search Interface. In this example, the Placeholder Extender component is used to add the rendering in the Header section of the Modular Frame.

  7. Add the component to the Search Interface.
    1. Open the Search Page with the Experience Editor and add the component. In this example, the component is available in the Header Section.