Hi, guys! Would appreciate any help here, cause I’m stuck.
I’m using mixitUp plugin and native webflow custom checkboxes. When there’s no multifilter the checkboxes work fine, but when I add multifilter, the :checked pseudoclass won’t appear anymore. As you can see from the links below, multifilter works just fine (thanks to @sabanna and her amazing tutorials), but the state of the custom checkboxes won’t change if you click on them. At the same time, default checkboxes work just fine. Is there a workaround, cause default checkboxes won’t go with the design?
Thanks in advance!
Hey, Anna!
Thank you for the fast response!
Can you tell me, should I add different classes instead of ‘w–redirected-checked’, cause it still doesn’t work and give me “TypeError: Cannot read property ‘classList’ of null” error, which means there’s no such class as I recall (not 100% sure).
Hi @sabanna!
I also have an issue with checkboxes and the provided code doesnt seem to help, nor does it show any issues in the web inspector.
The problem is that the checkbox filters are supposed to show at least one item, but they hide everything. It’s multi filter.
I wasn’t able to reproduce the “wrong” behavior. Could you, please, give me an example of a filter combination that suppose to show something but doesn’t?
Feel free to DM me here.
But I also wanted to ask if you maybe tried “scale” filtering with mixitup (I mean the type of thing you’d use for adjusting pricing) or have a project showcasing that? I’ve seen it somewhere on their website, but have not seen any showcases for it online.
Too bad you are such a helpful person… Then we all keep coming to you with our troubles… (Yes, I can only join: Thanks a million for all your priceless tutorials and support!!)
I, too, have got to the point where turning the standard checkboxes into custom ones has knocked off the Mixitup plugin. But since my structure of the controls is a little different, modified to work with dynamic tags, the snippet you provided earlier doesn’t seem to work for me… Would it be too much to ask for some hint to make it work, please?
Here is my site Read-Only: Heron_designer (I hope this takes you to the Categories Template)
And the published site: Heron_live
I highly appreciate all the nice words and feedback I am getting and happy to help knowing it matters!
In your case, checkboxes doesn’t work because they don’t have a value or data-value) attribute applied to them.
You have couple choices:
You ca use an embed HTML and add html for the checkbox right there (simply copy-paste from the browser, with all the structure and classes). This way you will be able to add a data-value (or even value) attributes and set it equal to the field from the CMS
You would need an additional code snippet in the script to “read” the text from the “keyword” text element, then apply it to the checkbox as a value attribute.
In my opinion, 1st option is easier. The snippet that I provided earlier in this thread should still work.
You were totally right, I forgot to adjust assigning the value to the right element with the change to custom checkboxes… I managed to fix that, but am still struggling to make it all work.
I have continued with your option 2 as it was what I had originally started with. Technically, the filters now do work with Mixitup; but visually, they don’t – the checkmarks get all messed up and they do not correspond with the current state of the checkbox.
Also, what puzzles me that for some reason, Webflow doesn’t change the CSS state ‘checked’ – whichever checkbox is selected, only the ‘All’ checkbox has the state ‘checked’… Is this an expected behaviour? And is it related to my problem?
I am sorry… This definitely goes beyond my limited capacity to write a few lines of a simple code…
Hi @sabanna I just tried that. Alas… No change whatsoever, it seems…
So, I removed the snippet from the definition of the variable ‘mixer’. Now (it is the currently published version) all checkmarks work fine - except that the ‘Part #2’ of your good&great code doesn’t handle the proper function of the ‘All’ switch.
And it seems to me that it cannot handle it because Webflow apparently never sets any of the input elements with the current state… Why is that??