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 โจ
- Changing the button CSS to
flex-wrap: wrap
prevents overflowing the page, but results in a wrapped button ๐ฑ - 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.
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 ๐