Header inside the templates is not working for refinement list

Open Q&A
#1 
search.addWidget(
			instantsearch.widgets.refinementList({
				container: '#refinement-list',
				attribute: 'categories.category',
				operator: 'or',
				templates: {
					header: '<div class="text-dark d-block" >Filter By Category</div>',
					item: '<label class="item-wrap">{{label}} <span class="text-muted hide-{{count}}">({{count}})</span></label>'
				}
			})
		);

Filter by category is not displaying on frontend.

I updated to instantsearch v4 and after that it stopped working

#2

Hello! I was not able to reproduce this issue locally, would you be able to upload your code into a Code Sandbox or another reproducible medium so that we can take a look and try to debug further? Thanks!

#3

Hi @michael.king

Showing Header before: https://www.spastore.com.au/?nview=kee-main
Not Showing Header after update : https://www.spastore.com.au/?nview=kee-develop

please open the link in the different browsers to compare.

For the refinement list I am using the exact same code which I have mentioned above but its not showing header any more

image
image1885×981 107 KB

image
image1885×981 111 KB

#4

@michael.king can you please provide me the solution for the above problem. Please check the previous comment

#5

@karan Do you get any errors in the browser console?

I don’t see this issue on my PC, do you possibly have a browser extension that is causing a conflict?

image
image1818×1518 150 KB

#6

@michael.king I am sorry I hardcoded that, thing, can you please check now ??

#7

Ah I see, that makes sense then! I see the issue now. Looking into the source, it looks like the refinement list header is missing:

image
image2414×536 151 KB

Looking through the rest of the source code, the templates used to render the refinementList are different between the two versions, which seems to be the issue:

image
image4222×712 362 KB

It looks like if you correct the difference between the templates it should resolve the issue. Let me know how this works for you, thanks!

Note: You can click on the images above to make them larger - they may be hard to read at the non-zoomed size.

#8

hi @michael.king thanks, but can you open the develop link in incognito mode, I have updated it but it’s not working, I am sorry you looked at the cached version,

Screen Shot 2022-08-04 at 11.40.08 AM
Screen Shot 2022-08-04 at 11.40.08 AM1920×1080 129 KB

#9

No problem!

headers does not seem to be a valid template that is available according to the documentation. I also tried that template key locally and it didn’t seem to work. Did you see this used somewhere else, on an older version perhaps?

Looking at the old example a bit closer, it was inserting the header ‘Filter By Category’ into every item but then rendering only the first one visible.

image
image2540×984 438 KB

I don’t believe there is a way to insert a header in this area using the templates, however, it’s still possible to achieve another way.

  1. Use a custom rendering function to render the refinementList - this way you control all the rendering/templates and could render it as you see fit. You can find an example of this here.
  2. Manually add the header before the #refinement-list div and do not rely on InstantSearch to render this.
1 Like