• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 02.09.22, 13:53
  • Opened by: Agnieszka
  • Closed by: Anonymous Submitter
  • Closed on:
  • Reason: Not a bug

Ticket #23719 - Filter button on category page not working

Hello, I created custom category page. I used “Edit category products” widget and I want the filter button to show up. My issue is that when clicking the filter, nothing is showing up. Could you please help?

Comments

Agnieszka 02 Sep 2022, 15:43

I’m going to set the category page to the default again. When you would like to check the issue, feel free to switch to my custom template.

Fred 02 Sep 2022, 19:16

Hi, Agnieszka.
You have to add Filter widget - https://take.ms/v8eHX

Agnieszka 05 Sep 2022, 08:50

ummmmm….thank you very much Fred!!!

Agnieszka 05 Sep 2022, 10:20

Fred, it works perfectly on desktop but there is an issue on tablets and mobiles. Only titles are shown but they’re not clickable and additional “Products Filter” button is shown.

https://snipboard.io/KgTSMs.jpg

Fred 05 Sep 2022, 20:20

When I click Filter button I see all options expanded - https://take.ms/uzAwm

Did you configure it?

Agnieszka 06 Sep 2022, 09:25

This is so strange. Just checked it on different mobiles around all office haha. Everyone sees it like the screenshot I sent you: without expanded options

Fred 07 Sep 2022, 18:48

Ok, I see.
Try to add following CSS into Customer CSS section in the Theme Settings:

.module-title .svgic-updown > path:first-child,
.module-title .collapsed .svgic-updown > path:last-child {
  display: block
}
.module-title .svgic-updown > path:last-child,
.module-title .collapsed .svgic-updown > path:first-child {
  display: none
}
#search_filters .facet .collapse {
  display: block
}
#search_filters .facet .collapse.in {
  display: none
}
Agnieszka 08 Sep 2022, 09:21

Thank you Fred. This solves the issue but you changed the category page template to default native theme. I created my own and I don’t want to have the filters in the column, but above the products and make them visible only when filter button is clicked.

Fred 08 Sep 2022, 20:52

Sorry, my bad. I missed the template is remain switched to default.
Try this CSS 

@media (max-width:767px) {
    #search_filters_wrapper #search_filters .facet {
        width:100%;
        margin:0 0 20px 0;
        paddin:0
    }   
    #search_filters_wrapper #search_filters .facet > h4 {
        padding: 0 0 12px;
        margin-bottom: 20px
    }
}
Agnieszka 09 Sep 2022, 09:26

Thank you. It works on mobile but stopped working on desktop

Agnieszka 09 Sep 2022, 15:38

I think this css fixes this correctly

#search_filters .facet .collapse.in { 

display: block;

}
#search_filters .facet .collapse{display:block;}
h2.h6.active-filter-title{display:none;}

Fred 09 Sep 2022, 21:28

Thank you for sharing your solution, we will test it out

Agnieszka 12 Sep 2022, 14:39

Thank you for all your help Fred!

Fred 12 Sep 2022, 18:07

You are welcome!