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…
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
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
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);
})
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?
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);
})
