I set up a group of ajax filters for a query loop.
I placed them on a sidebar on the desktop version and the filters apply on input. So far it works as espected.
For mobile I have duplicated the same group of filters and placed them inside an offcanvas. In this case it should apply on submit.
The issue I’m facing is the filters are not “in sync”, so when I select one value in desktop it’s blank in mobile. Selecting the same filter in mobile just adds the same filter on top of the desktop one and breaks the query (and the filters stay active but you can’t see them). I understand this is happening because they are two different groups of filters with different IDs.
I thought that if both sets of filters share the same URL parameter for each duplicated field it will override the desktop behavior on mobile and viceversa, but it didn’t. It just adds an extra parameter to the url, which is not ideal
sounds like that the behaviour is quite normal, since you have two separate UI elements triggering a request.
This is not because of different IDs (an element ID is always unique and can’t be used twice), it’s just because these are two separate elements triggering two separate requests.
Just for the record – what is the reason for not using one element with different stylings for desktop & mobile?
Yes I understand, two separate elements, two requests.
The main reason is the Input/submit behavior.
Another reason is that it’s quite a long list of filters. It’s not endless but long enough. The query will have a lot of items eventually, so makes sense to put the filters in the offcanvas to clean things up a little.
My first attempt was to place the sidebar filters inside an accordion or something like that, so the user can close it when mobile… it feels weird.
There is a way that pleases everyone for sure, didn’t found it yet, but I still think input desktop/submit mobile is how it should work, cause we’re used to it and makes sense.
on mobile, style the element so that it is usable as open/close overlay containing the filter options (w/ fixed or absolute position).
But why should they be synchronized at all?
If a user activates the filter on a desktop device and then switches to a mobile device the saved filter settings would be lost regardless (which isn’t a realistic scenario anyway).
Im not sure if I get what you are suggesting here but… Just one element could be offcanvas+submit for all devices and the trigger can be sticky/fixed. Done. Is that what you meant?
About synchro, you’re absolutely right. No need technically. I was trying to cover as much scenarios as possible…Including users (like me) who like to play with the browser window size on desktop devices . In this specific case is when the issue occurs. Regardless of that, it works great with two separate elements.
No, i’ve meant to be the whole filter element to be responsive and reacting to the screen size changes.
So if you want to cover the scenario for keeping the selected filter options while changing screen size: 1 element for your filter with different, responsive stylings is surely the best way to achieve your goal.
