Streaming live at 10am (PST)

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