[TUTORIAL] MixItUp3 - Filtering, Sorting and PAGINATION

Community resources Webflow Tips
45

Hello @sabanna ,

love your tutorial!! Helped me build out a custom ecommerce store, which is exported as an theme for shopify! Love it :raised_hands:

Everything works fine only one issue left:
Sorting isn’t working properly and I’m really strugling to figure it out … I tried out diffferent things, but can’t find a sollution, I’m a little late on my deadline and guees that this is some small issue. Please help me out! :scream:

The sorting works, but it doesn’t sort price values, instead it sorts it’s name…

My website: Razvajanja

Read only: Read Only Razvajanja

MY CODE:

<script>

$(".input").on("keyup", function() {
 var v = $(this).val();
 $(".results").removeClass("results");
 $(".noresults").removeClass("noresults");
 $(".mix").each(function() {
  if (v != "" && $(this).text().search(new RegExp(v, 'gi')) != -1) {
   $(this).addClass("results");
  } else if (v != "" && $(this).text().search(v) !=1) {
   $(this).addClass ("noresults");
  }
 });
});

  // 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');
  catArray.forEach( function(elem) {
    var text = elem.innerText || elem.innerContent;
    var className = conv(text);
    if (!isNaN(parseInt(className.charAt(0), 10))) {
            className = ("_" + className);
          }
    elem.closest(".mix").classList.add(className);
  });
  

  // Creating a custom data-order attributes from blog titles:
  var sortArray = document.querySelectorAll('.prices');
  sortArray.forEach( function(sortElem) {
    var sortPrice = sortElem.innerText || sortElem.innerContent;
    sortElem.closest(".mix").setAttribute('data-price', sortPrice); 
  });
  
  
  var filterGroups = document.querySelectorAll('.filter-group');
  filterGroups.forEach( function(group) {
        group.setAttribute('data-filter-group','');
  });
  var textInputWrappeer = document.querySelector('.text-input-wrapper');
  var containerEl = document.querySelector('.container');
  var selectFilter = document.querySelector('.filter_select');
  var selectSort = document.querySelector('.sort_select');
  var mixer = mixitup(containerEl, {
    multifilter: {
         enable: true                 
    }
});

// In this example, we must bind 'change' event handlers to
  // our <select> elements, then interact with the mixer via
  // its .filter() and .sort() API methods.

  selectFilter.addEventListener('change', function() {
    var selector = selectFilter.value;
    mixer.filter(selector);
  });
  
  selectSort.addEventListener('change', function() {
    var order = selectSort.value;
    mixer.sort(order);
  });
</script>