Gravatar for raju.gattu@gmail.com

Question by raju goud, May 4, 2016 6:28 AM

Search Filter UI customization

Hi, currently we are using coveo search standard filters in the sitecore. Now we want to customize UI(search filters). so i have modified code in the coveoJsSearch.js file. But the changes were not reflecting in the result.

Kindly help me on this below code.

  • Current : selected item(value) + Cross image(Clear)
  • Prospose: Cross image(Clear) +selected Item(value)

Code:

FacetRange.prototype.buildBreadcrumbFacetSlider = function () {
    var _this = this;
    var elem = Coveo.$('<div/>').addClass('coveo-facet-breadcrumb');
    Coveo.$('<span/>').addClass('coveo-title').text(this.options.title + ':').appendTo(elem);
    var values = Coveo.$('<span/>').addClass('coveo-values').appendTo(elem);
    var value = Coveo.$("<span class='coveo-value'>" + this.slider.getCaption() + "</span>").appendTo(values);
    var clear = Coveo.$("<span class='coveo-clear'></span>").appendTo(value);
    value.fastClick(function () {
        _this.reset();
        _this.triggerNewQuery(function () { return _this.usageAnalytics.logSearchEvent(Ui.AnalyticsActionCauseList.facetClearAll, {
            facetId: _this.options.uniqueId,
            facetTitle: _this.options.title
        }); });
    });
    return elem;
};
1 Reply
Gravatar for jflheureux@coveo.com

Answer by Jean-François L'Heureux, May 4, 2016 9:52 AM

Hi,

Modifying the Coveo JavaScript Search Framework inner methods directly like you do is not recommended as the original methods can change at your next upgrade.

There's one easy way to have the clear image completely on the left side of facet values with CSS to have: (Clear image) (checkbox) (icon) (value) (count)

The trick is to override the CSS style of the clear icon to set it to float to the left instead of the right like this:

.coveo-facet-value-exclude {
  float: left;
}

Would it solve your issue?

Gravatar for raju.gattu@gmail.com

Comment by raju goud, May 9, 2016 4:33 AM

Hi, thanks for your reply, but unfortunately the overriding css is not resolved my problem.

The below HTML is my selected facet Item.

<div class="coveo-facet-breadcrumb item">
  <span class="coveo-title">By Technology:</span>
  <span class="coveo-values">
    <span class="coveo-value coveo-selected" title="My Selected Item">
      <span class="coveo-caption">My Selected  Item</span>
      <span class="coveo-clear">[X]</span>
    </span>
  </span>
</div>

From above just I have to swap <span class="coveo-clear">[X]</span> before <span class="coveo-caption">My Selected Item</span>

Thanks in advance. Waiting for you reply.

Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, May 9, 2016 10:33 AM

Oh, you want to change the display of the breadcrumbs. I thought you wanted to change the display of facet values inside the facet component itself.

For the breadcrumbs, you can achieve your goal with:

.coveo-facet-breadcrumb .coveo-values .coveo-value .coveo-clear {
  float: left;
}
Gravatar for raju.gattu@gmail.com

Comment by raju goud, May 12, 2016 11:06 AM

Thanks Franc, Its working fine now. But continuation to this I want to add static text(Selected Filters) in the breadcrumbs. and how to insert new clear all button in the bottom of the breadcrumbs filters

Please see example:

<div class="coveo-facet-breadcrumb item">
  -------------------------------------------
  Selected Filters:
  --------------------------------------------
  <span class="coveo-title">By Technology:</span>
  <span class="coveo-values">
    <span class="coveo-value coveo-selected" title="My Selected Item">
      <span class="coveo-caption">My Selected  Item</span>
      <span class="coveo-clear">[X]</span>
    </span>
    ----------------------------------------------------------
    <div class="coveo-clear-all" title="Clear All Filters"><div class="coveo-icon"></div></div>
    ------------------------------------------------------------
  </span>
</div>
Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, May 12, 2016 4:51 PM

For the "Selected Filters:" text, it is very easy. You just have to set it between the opening and closing tags of your CoveoBreadcrumb element like this:

<div class="CoveoBreadcrumb">Selected Filters:</div>

Unfortunately I don't think you cannot add HTML to style the text but you may be able to style it using CSS.

For the clear button, I'm not sure of your requirement. There's already a global clear button in the breadcrumb component. Do you want to:

  1. Move the global clear button at the bottom of all the selected facet items?
  2. Add an additional clear button for each facet that have selected items?
Gravatar for raju.gattu@gmail.com

Comment by raju goud, May 13, 2016 4:06 AM

Thanks Again quick reply.

Selected Filters:

before i asked you this question i have already tried this solution but it was displaying outside of breadcrump component. can you send me any alternate solution for this.

My requirement for clear button is 1st : Move the global clear button at the bottom of all selected facet items. currently global clear button was showing as 'Your Selections + [Clear]". Now, i dont want to display separate global clear button and wants to display bottom of all selected facet items.

Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, May 13, 2016 10:08 AM

For the "Selected Filters:" text, I thought you wanted to display this text only once for all the facets. If you want to repeat the text for each and every facet that have selected items, you can do it with:

.coveo-facet-breadcrumb .coveo-title:before {
  content: 'Selected Filters: ';
}

For the clear button, I found a CSS hack you can apply. Try different values for the margins and positions until the end result is achieved:

.CoveoBreadcrumb {
  position: relative;
  margin-bottom: 40px;
}
.CoveoBreadcrumb .coveo-clear-all {
  float: none;
  position: absolute;
  bottom: -32px;
  left: 0px;
}
Ask a question