algolia/instantsearch

CurrentRefinements v3 - add back templates option

Closed this issue ยท 3 comments

Is your feature request related to a problem? Please describe ๐Ÿ™
The current default template for the currentRefinements widget (v3) results in the button overflowing the page when either the refinements selected are lengthy (e.g. formal business names) or have multiple selections per category (see screenshot).

It appears the root cause is the default templates from v2 to v3 changed from individual buttons per refinement to single buttons per refinement category.

Describe the solution you'd like ๐Ÿค”
Would love to see the templates option return to v3 of the currentRefinements widget. Don't really need all the older templates options (e.g. header, clearAll, footer), just the item template to save some boilerplate.

Describe alternatives you've considered โœจ

  1. Changing the button CSS to flex-wrap: wrap prevents overflowing the page, but results in a wrapped button ๐Ÿ˜ฑ
  2. Problem can obviously be solved by way of the connector, but results in a bunch of extra boilerplate.

Additional context
Arguing against myself, I suppose an argument could be made that, particularly on mobile, listing multiple refinements in addition to the selections in the refinementList is duplicative and messy. A better mobile UX might be to rely primarily on the refinement list for selection details (e.g. in a slide-out nav), and include an aggregate refinements count on the page itself (e.g. how eBay does it on mobile).

FYI - the v3 widget showcase uses the older style template whereas the Storybook showcase on Netlify uses the newer version.

Screenshots
v3 currentRefinements (example of problem)
Screen Shot 2019-06-19 at 8 32 09 AM

Alternative
Screen Shot 2019-06-19 at 9 02 31 AM

v2 of currentRefinements (as shown on widget showcase)
Screen Shot 2019-06-19 at 8 34 34 AM

Hello Chad,
Thanks for reaching us and for putting your effort for this detailed issue.

With the limitation of Hogan, we cannot provide a function to remove refinement to the template.
So, it would become complicated if we provide templates and also bypass the limitation of Hogan.
I'm sorry I cannot give you at the moment what you wish.
For now, using the connector seems to be the only option even if it adds unnecessary code into your project.
Of course you may already know how to do so, but I've come up with an example here.
It's almost copy&paste from the documentation.

I'm closing this issue, but feel free to open and let me know if you need further help.

That makes perfect sense. I appreciate the explanation and follow-up.

I noticed the currentRefinements widget was one of the few "Refinements" widgets where the template option did not make the upgrade from v2 to v3, so was half hoping it would be a simple addition from a feature request standpoint.

But like you said, the connector gets the job done ๐Ÿ™Œ

Thanks for understanding. I hope you get your job done easily ๐Ÿ˜„