feat(search): ES-1192 fixed the replace helper to expand and collapse the product filters #1689
Conversation
|
Autotagging @bigcommerce/storefront-team @davidchin |
| @@ -3,7 +3,7 @@ | |||
| <div | |||
| class="accordion-navigation toggleLink {{#unless ../start_collapsed }} is-open {{/unless}}" | |||
| role="button" | |||
| data-collapsible="#facetedSearch-content--{{#replace '&' (hyphenate facet) }}{{/replace}}"> | |||
| data-collapsible="#facetedSearch-content--{{#replace '&' (concat '&' (hyphenate facet)) }}{{/replace}}"> | |||
There was a problem hiding this comment.
Sorry I am not sure I understand what is going on here and what are we trying to do. Can you please an explanation to the description as to why were they broken in the first place. Also I am not sure I understand why we need to add concat '&'. Can you please explain using this example Custom & Filter. If I am reading correctly it will look something like this;
Custom & Filter -> hyphenate Custom-&-Filter -> concat &Custom-&-Filter -> replace Custom-Filter
Please correct me if I am wrong.
There was a problem hiding this comment.
@junedkazi replace helper, returns empty string if it doesn't find any & in it. Thus all the standard filters are returned as empty string. So, we fixed it by concatenating & to all the input facets and replace them later.
Since custom filters are part of this loop, we ended up adding and removing the & to it.
There was a problem hiding this comment.
Open to suggestions here but what happens is if replace doesn't find the replacement character, it returns an empty string. So what happens is Custom Filter becomes: 'Custom Filter' -> hyphenate 'Custom-Filter' -> replace ''. The concat forces there to be at least one replacement token, so it always exists.
There was a problem hiding this comment.
It feels so hacky and for input's like this Custom & Filter it will generate output with double dashCustom--Filter.
There was a problem hiding this comment.
I agree, but the whole way the expand/collapse system works using css selectors also feels just as hacky to me. I'm open to suggestions here, once again.
There was a problem hiding this comment.
I think it should no longer return empty string based on https://github.com/bigcommerce/paper-handlebars/pull/92/files
There was a problem hiding this comment.
OK, I figured out what the disconnect was here. We needed to use {{replace}} with {{else}}, which is beyond confusing. 😕
… the product filters
bc-krishsenthilraj
force-pushed
the
ES-1192
branch
from
bffc516
to
6b06975
Compare
|
Executed steps above for search, filter by category, filter by brand. Looks good 💚 |
What?
Product filters are not expanded or collapsed in category listing, brand listing & search results page when product filters for SF are turned on.
Why
Currently, we are not able to expand/collapse the filters since,
replacehelper returns empty string when the input does not have the special character&in it. Thus collapsible divs are having same id and thus its broken this feature in the product filters.In the below image, both the
data-collapsiblein the html source is same for bothCatrgory&Brandfilters.Tickets / Documentation
Screenshots (if appropriate)
Steps:
Cornerstone-4.6.1_fix_ES-1192.zip) uploaded in the above issuecustom fieldwith special character&in it. Ex:Custom & Filterand save the product.Images:
Other & Custom filter expanded
Other collapsed and Custom expanded
Both Other & Custom filters collapsed
Other Expanded again & Custom filter collapsed
Both Other & Custom expanded again
All the filters collapsed
