MixitUp Class Tags

by smombartz

HTML

<div>
  <div role="listitem" class="mix w-dyn-item">
    <div class="category filter-category">Religion, Spirituality</div>
  </div>
</div>

JavaScript

// 1) Connecting MixItUp JS library using public CDN link
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/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.toLowerCase().split(", ")
  	};

// 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.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('.posts-collection-list');

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

</script>