Custom checkboxes with MixitUp plugin

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!

Here is my site Read-Only: https://preview.webflow.com/preview/wine-shop?utm_medium=preview_link&utm_source=designer&utm_content=wine-shop&preview=a7829e9607ab2df0f878ea53fefc17f3&pageId=5f72d802008cdae5f7506a0b&mode=preview

Here is my site Published link: https://wine-shop.webflow.io/wine

Hi, @Polly!

You will need to add more custom code to handle this situation (unfortunately)

Image 2020-09-30 at 2.07.36 PM

Image 2020-09-30 at 2.09.49 PM

The snippet you need to add:

    callbacks: {
      onMixStart: function(state, futureState) {
        for (i = 0; i < checkboxes.length; i++) {
          checkbox = checkboxes[i];
          if (checkbox.checked == true) {
            checkbox.previousElementSibling.classList.add('w--redirected-checked');
          } else {
            checkbox.previousElementSibling.classList.remove("w--redirected-checked") 
          }
        } 
      }
    }

Cheers,
Anna

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).

It seems you still have standard checkboxes as well and it creates some conflicts. Are you planning to use standard AND custom checkboxes?

Anna, you’re truly a lifesaver!! Thank you soo much, you can’t imagine, how I appreciate your help. I owe you one😂

1 Like

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.

Maybe you could help?

Here is my site Read-Only: Webflow - Living places
Published site: Living places

Thank you in advance!

Hi, @annienoa !

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.

I actually managed to fix it just a minute ago :sweat_smile:

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.

Thanks!

1 Like

Hi @sabanna ,

Too bad you are such a helpful person… Then we all keep coming to you with our troubles… :laughing: (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

Thank you so much for your time…! :pray:

1 Like

Hi, @Pataka !

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:

  1. 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

  2. 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.

Hi @sabanna ,
Thank you… Helpful as ever…! :grinning: :pray:

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… :sweat_smile:

Very grateful for any hint!

Hey, @Pataka !

What if you will NOT apply “start checked” property on this checkbox?
Shared with CloudApp

I suspect that in your case the code snippet works in “opposite direction”.

Could you please try and see if it changes anything?

Hi @sabanna :smile: I just tried that. Alas… No change whatsoever, it seems… :pensive:

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… :open_mouth: Why is that??

Thank you again for your time…

And it seems to สล็อต 888 me that it cannot handle it because Webflow apparently never sets any of the input elements with the current state