Coveo Breadcrumb - How do you customize the Text?

Question

I am using vanilla Coveo Hive components on my Sitecore website. I have created and configured a search page. This page uses the Coveo Breadcrumbs component, and everything is hooked up and working.

Whenever a facet is selected, this component renders the text Clear. How do you control and customize this text? It appears that this rendering does not have a datasource or rendering parameters, and I can't find any documentation regarding dictionary keys.

For clarification, this is the text element I am attempting to change: http://prntscr.com/oysgr3

I know I can do it within CSS, but I'd prefer to avoid hardcoding this.

Answer 1

I don't think there is an option for this out of the box, The Breadcrumb component displays a summary of the currently active query filters and created using Coveo's Search UI framework. In Coveo Search UI, drawBreadcrumb is responsible to create the breadcrumb and clear button.

https://coveo.github.io/search-ui/components/breadcrumb.html#drawbreadcrumb

If you want to control the text from the Sitecore I would suggest you, to create a custom breadcrumb control to read the clear text from Sitecore and override the drawbreadcrumb method for adding text on UI. Below is how in OOTB breadcrumb control manage the clear text and icon using Search UI-

Breadcrumb.prototype.drawBreadcrumb = function (breadcrumbs) {
    ...
    ...
    ...

    var clearIcon = Dom_1.$$('div', {
        className: 'coveo-icon coveo-breadcrumb-clear-all-icon'
    }, SVGIcons_1.SVGIcons.icons.checkboxHookExclusionMore).el;
    SVGDom_1.SVGDom.addClassToSVGInContainer(clearIcon, 'coveo-breadcrumb-clear-all-svg');
    clear.appendChild(clearIcon);
    //Manage the Clear Text
    var clearText = Dom_1.$$('div', undefined, Strings_1.l('Clear', '')).el;
    clear.appendChild(clearText);
    this.element.appendChild(clear);
};