Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Autoclose Dawn Filter after selection

Solved

Autoclose Dawn Filter after selection

Online_Seller
Shopify Partner
51 1 103

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.

 

 

dawn_filter.png

 

Thanks

 

Online_Seller

 

Accepted Solution (1)

Online_Seller
Shopify Partner
51 1 103

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

View solution in original post

Reply 1 (1)

Online_Seller
Shopify Partner
51 1 103

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