Based on our design requirement there are few modifications i need to do in render() function of component-search-result-filer.js which is used by checklist filter of Sitecore SXA.

I want to override the function in another js file so that it doesn't gets overwritten on SXA upgrade. The remaining functionality should work as it is.

I tried few options after googling but doesn't work. There always be a syntax problem, not getting it right.

Can someone please provide a sample code to do so.


There are a couple of options to do that:

Clone the Search Theme

Probably the easiest thing to do would be to make a copy of all the base SearchTheme script files. These are in the Media Library here: /sitecore/media library/Base Themes/SearchTheme - add those files to your own theme and customize the contents as you need too. You would then need to remove the SearchTheme from your own sites base themes:

enter image description here

Override the whole object

To access the object, you can use XA.component.search.facet.resultFilter - that will return you the object as registered with the XA framework. So at that point you can reassign a function.

But - the problem you have is that you want to override the .render() function, and that is not a function of the resultFilter object directly. If you look at the JavaScript file, it is using a FacetResultsFilterView object that extends the XA.component.search.baseView object. That is the part that contains the render method, so you would effectively have to replace the entire function with your custom version:

XA.component.search.facet.resultsfilter = (function ($, document) {
    // add your entire implementation here
} (jQuery, document));

Depending on how complex your change is, this might be easier. Both options have pros/cons, but I think that replacing the entire base theme with a custom will probably be more stable and easier to maintain than trying to override the function. Its also pretty quick to do and test.

  • Thank you for the reply :) May 16 '19 at 10:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.