A space to discuss online store customization, theme development, and Liquid templating.
Hi,
I would like to have the filters auto-close after making a selection in Dawn.
The filters cover the products and having made a selection I then want to be able to see the products not have the filter fully expanded until clicking out of the filter.
How can I make it such that the filter collapses again after selecting one of the options. For example below after choosing 'Black' I would now like to be able to see the bags.
Thanks
Online_Seller
Solved! Go to the solution
This is an accepted solution.
I solved it.
replaced the following function in assets/facets.js
onSubmitForm(searchParams, event) {
FacetFiltersForm.renderPage(searchParams, event);
}
onSubmitForm(searchParams, event) {
FacetFiltersForm.renderPage(searchParams, event);
const isMobile = event.target.closest('form').id === 'FacetFiltersFormMobile';
if (!isMobile) {
const openDetailsElement = event.target.closest('details[open]');
if (!openDetailsElement) return;
const summaryElement = openDetailsElement.querySelector('summary');
openDetailsElement.removeAttribute('open');
summaryElement.setAttribute('aria-expanded', false);
summaryElement.focus();
}
}
Regards,
Online_Seller
This is an accepted solution.
I solved it.
replaced the following function in assets/facets.js
onSubmitForm(searchParams, event) {
FacetFiltersForm.renderPage(searchParams, event);
}
onSubmitForm(searchParams, event) {
FacetFiltersForm.renderPage(searchParams, event);
const isMobile = event.target.closest('form').id === 'FacetFiltersFormMobile';
if (!isMobile) {
const openDetailsElement = event.target.closest('details[open]');
if (!openDetailsElement) return;
const summaryElement = openDetailsElement.querySelector('summary');
openDetailsElement.removeAttribute('open');
summaryElement.setAttribute('aria-expanded', false);
summaryElement.focus();
}
}
Regards,
Online_Seller