Mixitup filter not working in Internet Explorer

Design help Custom code
1

Hello Webflowers

I’m using the mixitup javascript for filtering webflow cms list. The filter works in all browsers but not in Internet Explorer. Here ist the website you can try it out: www.now-together.ch

And here is the code I used:

<!--- // 1) Connecting MixItUp JS library using public CDN link --->

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

<script>

// 2) 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();
  };

// 3) Creating dynamic elements classes from its categories for filtering:
  var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
  catArray.forEach( function(elem) {
    var text = elem.innerText || elem.innerContent;
    var className = conv(text);
    elem.parentElement.parentElement.parentElement.parentElement.classList.add(className);
  });

// 4) Creating custom data-date attributes from blog dates:
  var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
  sortArray.forEach( function(sortElem) {
    var sortText = sortElem.innerText || sortElem.innerContent;
    sortElem.parentElement.parentElement.setAttribute('data-date', sortText);
  });

// 5) Set the reference to the container. Use the class-name of your Collection List or ID of the Collection List
  var containerEl = document.querySelector('.collection-list');

// 6) Call the MixitUp plugin
  mixitup(containerEl);

</script>

Any thoughts how to fix this issue for IE?

2

Any thoughts how to make the MixItUp Javascript compatible with Internet Explorer. Need your help! Here is the site on which I used the script: https://www.now-together.ch/

Read-only-link: https://preview.webflow.com/preview/now-together?utm_medium=preview_link&utm_source=designer&utm_content=now-together&preview=30b0bdd1f17c5f680b9fd0ea0be83b12&mode=preview

3

I’ve found a solution. IE doesn’t support property “forEach” and I had to polyfill “forEach” for HTMLCollection by adding the following directly after the tag and before the first js function:

var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
    var ctor = ctors[n];
    if (ctor && ctor.prototype && !ctor.prototype.forEach) {
        // (Yes, there's really no need for `Object.defineProperty` when doing the `forEach`)
        ctor.prototype.forEach = Array.prototype.forEach;
        if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
            Object.defineProperty(ctor.prototype, Symbol.iterator, {
                value: Array.prototype[Symbol.itereator],
                writable: true,
                configurable: true
            });
        }
    }
}