MixItUp 3 sorting (not name, but price values) ? 😭

[thewallmaher (Tine Maher)]

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

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!

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’;
});

[thewallmaher (Tine Maher)]

var order = selectSort.value; is this relevant?

[thewallmaher (Tine Maher)]

Solved! You can close this one!