MixItUp 3 sorting (not name, but price values) ? šŸ˜­

I build out a custom ecommerce store, which is exported as an theme for shopify! Love it :raised_hands:

Everything MIXITUP 3 wise, 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 solution, Iā€™m a little late on my deadline and guess that this is some small issue. Please help me out! :sob:

The sorting works, but it doesnā€™t sort price values, instead it sorts itā€™s nameā€¦

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>

I tried out many things, but canā€™t figure it out, here are my guesses:
First try:
// 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 sortPrice.value = ā€˜priceā€™;
});

Second try:
// 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);
sortElem.closest(ā€œ.mixā€).setValue(ā€˜priceā€™);
});

Third try:
// 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 priceValue = sortElem.innerText || sortElem.innerContent;
sortElem.closest(ā€œ.mixā€).setValue(ā€˜priceā€™, priceValue);
});

Fourth try:
// 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);
if (ā€˜data-priceā€™) {
// Make a value to the atribute
const dataPrice = document.getElementById(ā€˜data-priceā€™);
switch (ā€˜data-priceā€™) {
dataPrice.value = ā€˜priceā€™;
});

Fifth try:
// 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);
if (ā€˜data-priceā€™) {
// Make a value to the atribute
const dataPrice = document.getElementById(ā€˜data-priceā€™);
switch (ā€˜data-priceā€™) {
dataPrice.value = ā€˜priceā€™;
});

var order = selectSort.value; is this relevant?

Solved! :+1: You can close this one!