Gravatar for mark.angus@sitesystems.ca

Question by mark, Mar 31, 2015 11:29 AM

Multiple independent Coveo Breadcrumbs

Hi, is there a way to have multiple breadcrumb components work independently on a page while being assigned to different facets?

I need to have one breadcrumb component per facet, not one breadcrumb containing all facet selected items.

Thanks in advance.

2 Replies
Gravatar for mlaporte@coveo.com

Answer by Martin Laporte, Mar 31, 2015 11:43 AM

Hmm I don't think it's possible using the OOTB component. The way it works is it fires an event that facets etc. listen for, so there is no room for binding a facet to one breadcrumb.

But you can easily replicate this with some custom JS I think.

Gravatar for mark.angus@sitesystems.ca

Comment by mark, Mar 31, 2015 11:45 AM

Oh ok, thanks. Is there any sample javascript code?

Thanks.

Gravatar for mlaporte@coveo.com

Comment by Martin Laporte, Mar 31, 2015 11:49 AM

Nothing that does this exactly. Essentially you want to monitor the state (https://developers.coveo.com/display/JsSearch/State) through events, and update some custom HTML of yours based on it's content whenever it changes. Then you throw in some click events that change back the state to clear values, etc. and execute a new query afterwards.

Gravatar for mark.angus@sitesystems.ca

Answer by mark, Mar 31, 2015 3:25 PM

Hi, I had to override some of your js component code. I am not sure if there is an easier way but if anyone else is interested.

Thanks,

function clearBreadcrumbs() {
    var _this = this;
    var args = { data: [] };
    var id = Coveo.$(this.element).attr("data-id");
    args.data.push(id);
    Coveo.$(this.root).trigger(Coveo.Events.BreadcrumbEvents.clearBreadcrumb, args);
    this.logger.debug('Clearing breadcrumbs');
    this.queryController.deferExecuteQuery({ beforeExecuteQuery: function () {
        return _this.usageAnalytics.logSearchEvent(Coveo.Ui.AnalyticsActionCauseList.breadcrumbResetAll, {});
    }
    });
};
Coveo.Ui.Breadcrumb.prototype.clearBreadcrumbs = clearBreadcrumbs;

function _handlePopulateBreadcrumb(e, args) {
    var _this = this;
    Coveo.Assert.exists(args);
    if ((this.componentStateId == 'f:obligation_facet') && (args.data[0] == 'custom1_breadcrumb')) {
        if (this.values.hasSelectedOrExcludedValues()) {
            var element = new Coveo.Ui.BreadcrumbValueList(this, this.values.getSelected().concat(this.values.getExcluded()), Coveo.Ui.BreadcrumbValueElement).build();
            args.breadcrumbs.push({
                element: element.get(0)
            });
        }
    }
    if ((this.componentStateId == 'f:country_facet') && (args.data[0] == 'custom2_breadcrumb')) {
        if (this.values.hasSelectedOrExcludedValues()) {
            var element = new Coveo.Ui.BreadcrumbValueList(this, this.values.getSelected().concat(this.values.getExcluded()), Coveo.Ui.BreadcrumbValueElement).build();
            args.breadcrumbs.push({
                element: element.get(0)
            });
        }
    }
};
Coveo.Ui.Facet.prototype._handlePopulateBreadcrumb = _handlePopulateBreadcrumb;

function _handleClearBreadcrumb(e, args) {
    Coveo.Assert.exists(args);
    if ((this.componentStateId == 'f:obligation_facet') && (args.data[0] == 'custom1_breadcrumb')) {
        this.reset();
    }
    if ((this.componentStateId == 'f:country_facet') && (args.data[0] == 'custom2_breadcrumb')) {
        this.reset();
    }
};
Coveo.Ui.Facet.prototype._handleClearBreadcrumb = _handleClearBreadcrumb;

function _getBreadcrumbs() {
    var id = Coveo.$(this.element).attr("data-id");
    var args = { breadcrumbs: [], data: [] };
    args.data.push(id);
    Coveo.$(this.root).trigger(Coveo.Events.BreadcrumbEvents.populateBreadcrumb, args);
    this.logger.debug('Retrieved breadcrumbs', args.breadcrumbs);

    return args.breadcrumbs;
};
Coveo.Ui.Breadcrumb.prototype.getBreadcrumbs = _getBreadcrumbs;
Gravatar for mlaporte@coveo.com

Comment by Martin Laporte, Apr 1, 2015 6:41 AM

Well that's not exactly what I had in mind. I can't recommend patching our lib code like this, as it's pretty likely it'll break on a future upgrade…

Gravatar for mark.angus@sitesystems.ca

Comment by mark, Apr 1, 2015 8:31 AM

Yes, Its not the best approach but I needed to get it working. If there is a better way then let me know.

Thanks in advance.

Ask a question