The default impementation of the Coveo Hive facet component simply inserts a caret ▲ or ▼ when there are more facets available. Most clients wish to modify this to say “show more” or “show less”. Initially, this seemed like a simple task of overwriting the .cshtml for the facet component. However, it quickly became evident that this html element is not defined in the view, but rather inserted dynamically with code. Out of the box, the component looks like this:

So, how do we provide this ability without completely replacing the native code? Well, it turns out, it’s pretty simple. It’s a matter of using your own “init” file, and a little javascript magic.

Start by making a copy of the init.cshtml file located in the /Civeo/Hive/Init folder, and call it whatever you want, such as custom-init.cshtml. You must keep your file in the same folder.

You can leave all the content in this file. We’re simply going to get our translations, and insert them in the proper place.

Begin by inserting a code block to get your translations. You may get these in whichever way works for your project. For the sake of this example, we’re going to simply get them from the Sitecore dictionary. 

@using Sitecore.Mvc
@using Coveo.UI.Components
@using Coveo.UI.Components.Extensions
@using Coveo.UI.Core.ErrorReports
@model Coveo.UI.Components.Models.SearchInterfaces.ISearchInterfaceModel

@{
    var showMoreLabel = Sitecore.Globalization.Translate.Text("SearchPage-ShowMore", "See More");
    var showLessLabel = Sitecore.Globalization.Translate.Text("SearchPage-ShowLess", "See Less");
}

Now that you have your translation variables, let’s insert them in the right place. Below is the final code, but note that the top portion is simply the boiler plate code. Follow the comments in the code for the changes.

@using Sitecore.Mvc
@using Coveo.UI.Components
@using Coveo.UI.Components.Extensions
@using Coveo.UI.Core.ErrorReports
@model Coveo.UI.Components.Models.SearchInterfaces.ISearchInterfaceModel

@ {
    var showMoreLabel = Sitecore.Globalization.Translate.Text("Feature-Resources-Pages-SearchPage-ShowMore", "See More");
    var showLessLabel = Sitecore.Globalization.Translate.Text("Feature-Resources-Pages-SearchPage-ShowLess", "See Less");
} 
<script type = "text/javascript" >
    document.addEventListener("CoveoSearchEndpointInitialized", function() {
        @ *
            setTimeout(function() {}, 0) defers the initialization just enough to execute other DOMContentLoaded or CoveoSearchEndpointInitialized events in the page.
        This is required by some components to allow them to register before initialization.*@
        setTimeout(function() {
            var searchInterface = document.getElementById("@Model.Id");
            @if(Html.Coveo().IsEditingInPageEditor()) {
                @: if (typeof(CoveoForSitecore) !== "undefined" && typeof(Sitecore) !== "undefined") {
                    @: CoveoForSitecore.initializeSearchInterfaceForExperienceEditor(searchInterface);
                    @:
                }
            }
            else {
                @: if (typeof(CoveoForSitecore) !== "undefined") {
                    @: CoveoForSitecore.initSearchInterface(searchInterface);
                    @:
                }
            }
            //enable translation of show more
            var root = Coveo.$$(document).find(".CoveoSearchInterface");
            Coveo.$$(root).on("querySuccess", function(e, args) {
                var showMoreButtons = $(".coveo-facet-more");
                var showLessButtons = $(".coveo-facet-less");

                if (showMoreButtons && showMoreButtons.length > 0) {
                    var showMoreLink = $("<span class='coveo-facet-more-label'></span>").text('@showMoreLabel');
                    showMoreButtons.each(function() {
                        var existingMoreButton = $(this).find(".coveo-facet-more-label");
                        if (existingMoreButton.length === 0) {
                            $(this).prepend(showMoreLink);
                        }

                    });
                }

                if (showLessButtons && showLessButtons.length > 0) {
                    var showLessLink = $("<span class='coveo-facet-less-label'></span>").text('@showLessLabel');
                    showLessButtons.each(function() {
                        var existingLessButton = $(this).find(".coveo-facet-less-label");
                        if (existingLessButton.length === 0) {
                            $(this).prepend(showLessLink);
                        }
                    });

                }
            });

        }, 0);
    }); 
</script>

Essentially, what is happening above is that we’re tapping into the querySuccess pipeline of Coveo, then inserting a new <span> right before the caret with our translation.

The final result is a label that can be translated:

Last thing to do is to go to your Coveo Search Interface Datasource Item. In the initialization file filed, enter the name of your new cshtml file WITHOUT the “.cshtml”. For example, if you named your file “custom-init.cshtml”, simply add custom-init as the field value.