Streaming live at 10am (PST)

Mixitup Filter Issue with Checkboxes and CMS Reference Categories

Hi all,

@sabanna I’ve combined an earlier tutorial of your for Mixitup from 2016 that uses the HTML embed feature so you can use checkboxes with the CMS. The reason I’ve used this way is that it works in IE11.

When I’ve tried following the latest Mixitup tutorial creating the filters using the custom attributes it means Mixitup doesn’t work in IE11. When you check a checkboxes nothing happens.

Here’s my issue, with the older 2016 option I’m using reference categories in the CMS. When a company has more than 2 categories selected Mixitup won’t see the company and it doesn’t pull it into view when you check either of those 2 categories. It does work if the company only has 1 category selected. Seems strange to me. I’m hoping there is a simple tweak to the code needed.

Please see link to read only code and live link to the older HTML checkbox embed option.

https://preview.webflow.com/preview/jersey-funds-association?utm_medium=preview_link&utm_source=designer&utm_content=jersey-funds-association&preview=93365f34ce97821b4bf396179b3ffd46&pageId=5d93054015962a3645d32248&mode=preview

Any help will be greatly appreciated.

Many thanks

Matt

Hi, @Meteorites!

I heard before from another user that new filters doesn’t work on IE11. But it is due to modern JavaScript functions that has been used for the snippets.

Here is an example if the code that he provided with different functions, that IE11 will “understand”


// JavaScript source code

var catArray = document.querySelectorAll('.w-dyn-item .categ');

for (var i = 0; i < catArray.length; i++) {
   var elem = catArray[i];
   var text = elem.innerText || elem.innerContent;
   if (!text) {
      text = 'empty';
   }
   var conv = text.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
   var className = conv.replace(/ /g, "-").toLowerCase().trim();

   if (!isNaN(parseInt(className.charAt(0), 10))) {
      className = ("_" + className);
   }   
   elem.parentElement.parentElement.parentElement.classList.add(className);
}


// Creating a custom data-order attributes from blog titles:

var sortArray = document.querySelectorAll('.w-dyn-item .title');
for (var i = 0; i < sortArray.length; i++) {
   var sortElem = catArray[i];
   var sortText = sortElem.innerText || sortElem.innerContent;
   sortElem.parentElement.setAttribute('data-order', sortText);
}

// Set the reference to the container
var containerEl = document.querySelector('.container');

// Call the MixitUp plugin
mixitup(containerEl);

Hi, @sabanna!

Thanks for getting back to me with code, it’s very much appreciated.

I’ve now added your code to the Mixitup page I have created using the more up-to-date filters. It’s working in Chrome but in IE11 only the ‘All’ checkbox is working. When I check any of the actual categories all the boxes with the company information disappear, so IE11 is now recognising when a checkbox is being activated but there still seems to be an issue with the way I have set up my filters. Each category I have assigned using an ‘Option’ filter in the CMS and then added a data-filter class in the custom attributes. I think I had to change from data-value to data-filter from your original tutorial for it to work for me. I have just tried data-value but no dice.

Published link:
https://jersey-funds-association.webflow.io/find-a-service-provider-8

Read only link:
https://preview.webflow.com/preview/jersey-funds-association?utm_medium=preview_link&utm_source=designer&utm_content=jersey-funds-association&preview=93365f34ce97821b4bf396179b3ffd46&pageId=5d8f0560791ce089cbf39aea&mode=preview

If you could get back again that would be awesome, it’s getting closer!!

Many thanks

Matt

Hey, Matt!

Now you have a bunch of code snippets that partly “overlapping” in the functionality. It causes different types of problems.

May I ask if you are familiar with JavaScript?

Hi @sabanna,

Only bits and pieces I’ve picked up from tutorials. I thought that could be an issue. I’m combining the CMS and the checkboxes now to get what is needed.

Thanks

Matt

Hi @sabanna,

Just thinking. I’ve tried numerous versions of that page. It’s possible you’re looking at an earlier version? I’m on the bus home now (still saving up for the Bentley) but I thought I took out the irrelevant code connected with the alternative way of working the checkboxes.

Many thanks

Matt

Ok, there are several places that create the problem.

  1. I provided you with different code, that means that you will need to replace some things
  2. you are using the “search input” that is trying to connect to the older version of the plugin, which is completely different file that you are not connecting to the project

Let’s start by removing all the code and adding it step-by-step.

The full code snippet for the Checkboxes+CMS with the IE11 support will look like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>

<script>
  // Reusable function to convert any string/text to css-friendly format
  var conv = function (str) {
    if (!str) {
        str = 'empty';
        }
    return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
              .replace(/ /g, "-")
              .toLowerCase()
              .trim();
  }; 
 
  // Creating dynamic elements classes from its categories:
var catArray = document.querySelectorAll('.w-dyn-item .categ');
for (var i = 0; i < catArray.length; i++) {
   var elem = catArray[i];
   var text = elem.innerText || elem.innerContent;
   var className = conv(text);
   if (!isNaN(parseInt(className.charAt(0), 10))) {
      className = ("_" + className);
     }   
   elem.parentElement.parentElement.parentElement.classList.add(className);
}

  
  var containerEl = document.querySelector('.container');
  var checkboxGroup = document.querySelector('.filter_wrap');
  var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < checkboxes.length; i++) {
      var dataValue = elem.getAttribute("data-value");
      elem.setAttribute('value', dataValue);
  }
 
  var allCheckbox = checkboxGroup.querySelector('input[value="all"]');
  var mixer = mixitup(containerEl);

  checkboxGroup.addEventListener('change', function(e) {
    var selectors = [];
    var checkbox;
    var i;
    if (e.target === allCheckbox && e.target.checked) {
      for (i = 0; i < checkboxes.length; i++) {
        checkbox = checkboxes[i];
          if (checkbox !== allCheckbox) checkbox.checked = false;
      }
    } else {
          allCheckbox.checked = false;
      }
    for (i = 0; i < checkboxes.length; i++) {
      checkbox = checkboxes[i];
        if (checkbox.checked) selectors.push(checkbox.value);
    }
    var selectorString = selectors.length > 0 ?
    selectors.join(',') :  'all';
    mixer.filter(selectorString);
  });
   
</script>


This part is without the input-search. Unfortunately, I don’t have time to provide a code for the text-search right now. You would need to ask someone on the forum if it is urgent, or wait until I will get a free time window.

Also, the “ALL” checkbox needs to have an “all” value.

Hi @sabanna

Thanks a million, I’ll give the new code a try this evening! I need to improve my Javascript abilities, it would be a very useful skill to develop. I’ve been down a couple of rabbit holes with getting this to work.

I’ve got a meeting next week to present ideas and where I’m at with the site. I would like to get the text search working as well. :grin:

Right, got to scoot.

Thanks again

Matt

Hi @sabanna,

I’d be very grateful if you have any more time to spare. I’ve added in your new code but when I check any of the boxes all the company name disappear. I think you might have looked at a different page? The ‘All’ checkbox already had a ‘all’ filter on it. I’ve now moved the relevant page to the top of pages under the homepage. Apologies for any confusion. Do I need to add this class ‘.w-dyn-item’ to a dynamic container?

https://jersey-funds-association.webflow.io/find-a-service-provider-8

https://preview.webflow.com/preview/jersey-funds-association?utm_medium=preview_link&utm_source=designer&utm_content=jersey-funds-association&preview=93365f34ce97821b4bf396179b3ffd46&pageId=5d8f0560791ce089cbf39aea&mode=preview

Many thanks

Matt

Hi @sabanna,

Thanks for the help. I have tried your suggestion but unfortunately I couldn’t get it to work. If I remove from line 47: ’ var mixer = mixitup(container, { ’ it breaks as line 45: ‘var keyupTimeout;’ goes straight into line 48: ‘animation: {’.

I have tried numerous way of structuring the code but to no avail. Is there anything obvious you can see that might be causing an issue? The checkboxes are still working but the text search is not.

https://jersey-funds-association.webflow.io/find-a-service-provider-8

Many thanks

Matt

Here you are pointing that the inputSearchvariable is the element that has data-ref attribute equal to “input-search”. But your input element doesn’t have that attribute.
Either apply that attribute to the input or change the parameter to '.input search'(it will point to the classname then)

Hi @sabanna,

I’ve made that tweak to the code and it’s working, I’m totally stoked! Mixitup + CMS + Checkboxes + Text Search, and just checked, it’s all working in IE11 which is a must. Got there in the end! I might just tweak the time so when you’re typing there’s no delay in the search.

37

https://jersey-funds-association.webflow.io/find-a-service-provider-8

Many thanks!!

Matt