MixItUp – Multiple Sort Field Instances On a Single Page

Situation: I have a div block of filter and sort controls on a page twice:
1 set that is only visible on desktop + tablet
1 set that is only visible on mobile landscape + portrait and is placed in a drop down menu.

Other than the mobile set being in a drop down the filter and sort parameters are exactly the same.

There is a filter select input and a set of filter toggle buttons that work s grouped/combined filtering

Problem: Filters, both the select field and the toggles, work on all break points. However the sort select input field does not work on mobile landscape or portrait

I’m wondering if its not possible to have multiple sort fields? However I recall this working on mobile a while ago…

Read-Only:
https://preview.webflow.com/preview/new-venture-3?utm_medium=preview_link&utm_source=designer&utm_content=new-venture-3&preview=9216761bb107c0079c5f2802c53048cc&pageId=5d40429ca2938fc8adb26bde&mode=preview

CC: @sabanna

Add live url.

Filter by `select menu’ (Not button) - needs extra code.
Example:
https://codepen.io/patrickkunka/pen/btCim

$filterSelect.on('change', function(){
    $container.mixItUp('filter', this.value);
  });

https://new-venture-3.webflow.io/jewellery-direct-static

First, this is not related to mobile VS desktop (Device bug or something).

Your mistake is wrong selector :

  var selectSort = document.getElementById('sort_select');

Id = one and only one element.

Use class selector to select both dropdowns.

The best idea is to put both dropdown1 and two on desktop. Debug - and than move dropdown2 to mobile.

Can’t use class because" Easy dropdown" plugin is used on the page and replaces the class name for the sort_select element

I’ve tried implementing the sort select within a code embed like I did for the filters and it didn’t work — can’t remember why since it was a while ago but I tried enough times to know that’s not an option

Maybe use attribute selector:

Select the dropdown by data attribute.
https://api.jquery.com/attribute-equals-selector/

Like this:
image

$("[data-sort-menu=data-sort-menu]")

How to add custom attributes:

Or use stupid solution --> (use 2 ids and 2 functions).

2 functions as in put all of this:

 var filterGroups = document.querySelectorAll('.filter-group');
  filterGroups.forEach( function(group) {
        group.setAttribute('data-filter-group','');
  });

  var containerEl = document.querySelector('.containe');
  var selectFilter = document.querySelector('.filter_select');
  var selectSort = document.getElementById('sort_select');
  
 var noItemsFoundMessage = document.getElementById("noItemsFoundMessage");
	noItemsFoundMessage.style.display = "none";

  var mixer = mixitup(containerEl, {
  multifilter: {
         enable: true },
          // ## 2 - callbacks onMixEnd 
       
    "animation": {
        "duration": 300,
        "nudge": true,
        "reverseOut": false,
        "effects": "fade translateY(0)",
    },
         callbacks:{    
         onMixEnd: function(state){

           // ## 3 - hasFailed true? show alert
           if(state.hasFailed){  
              noItemsFoundMessage.style.display = "block";
           }
           // ## 3 - hasFailed false? hide alert
           else{
              noItemsFoundMessage.style.display = "none";
           }
           
         },

      
      }, //end of callback
    });
  // 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);
   }) 

Again but with
var selectSort = document.getElementById('NEW ID NAME');

Sorry not a developer so just want to make sure im understanding you correctly

Also not sure how the attribute selector method is to be implemented specifically:
Assuming
“Name:data-sort-menu
Value: data-sort-menu” would be on what is now Id= sort_select

Not sure where $("[data-sort-menu=data-sort-menu]") would go

Also is one method better than the other?

Like this (select the mobile dropdown + add extra function)

var filterGroups = document.querySelectorAll('.filter-group');
  filterGroups.forEach( function(group) {
        group.setAttribute('data-filter-group','');
  });

  var containerEl = document.querySelector('.containe');
  var selectFilter = document.querySelector('.filter_select');
  var selectSort = document.getElementById('sort_select');
  /*extra selector set the id on webflow */
   var selectSort = document.getElementById('selectSortMobile');

 var noItemsFoundMessage = document.getElementById("noItemsFoundMessage");
	noItemsFoundMessage.style.display = "none";

  var mixer = mixitup(containerEl, {
  multifilter: {
         enable: true },
          // ## 2 - callbacks onMixEnd 
       
    "animation": {
        "duration": 300,
        "nudge": true,
        "reverseOut": false,
        "effects": "fade translateY(0)",
    },
         callbacks:{    
         onMixEnd: function(state){

           // ## 3 - hasFailed true? show alert
           if(state.hasFailed){  
              noItemsFoundMessage.style.display = "block";
           }
           // ## 3 - hasFailed false? hide alert
           else{
              noItemsFoundMessage.style.display = "none";
           }
           
         },

      
      }, //end of callback
    });
  // 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);
   }) 
    /*extra function match to extra selector */

  selectSortMobile.addEventListener('change', function() {
     var order = selectSort.value;
     mixer.sort(order);
   }) 

Not DRY - but will work fine.

-or- use Select attribute like this (Add attributes first):

  var selectSort = $("[data-sort-menu=data-sort-menu]");
  //  function
 selectSort.addEventListener('change', function() {
     var order = selectSort.value;
     mixer.sort(order);
   }) 

1 Like

Thank you so much! I added the extra function its working now :slight_smile:

Question what do you mean when you say its “not DRY” ?

Upon further inspection sort select field has stopped working on desktop and tablet ( where the field has the id sort_select). I tried implementing the attribute method but it didn’t work to clarify it would go here?

DRY (don’t repeat yourself).

Example of selecting 30 similar images - Not DRY:

var image1 = $(".image1");
var image2 = $(".image2");
var image3 = $(".image3");
....
var image25 = $(".image25");

Instead of using one selector for all images (same class and so on) - and loop throw all images.

For the first method I think I got it ! I changed
var selectSort = document.getElementById('selectSortMobile');
to var selectSort2 = document.getElementById('selectSortMobile');

and

         var order = selectSort.value;
         mixer.sort(order);
       })

to

selectSortMobile.addEventListener('change', function() {
     var order = selectSort2.value;
     mixer.sort(order);
   })