I need to arrange state abbreviations filters by two sorts, one by alpha and the other a switch field that would put BC (Canada) last: As you can see in the browser the filter shifts to only using alpha as the sort.
Find Your Nearest TOCA Football Center | Elevate Your Soccer Training
Steps to Reproduce
- View sort in Webflow
- Compare in browswer
…
Expected Behavior
BC (Canada) last in list
Actual Behavior
BC (Canada) first in list
Please note, I needed to push this page to production and I removed the second sort switch field “Sort Last” because it makes the filter first shows “BC (Canada)” last then jumps to first in the filter: Find Your Nearest TOCA Football Center | Elevate Your Soccer Training
Hey @Susan_MacPhee! I believe the best approach here would be to use a custom sorting script like the one below
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmssort',
(listInstances) => {
const listContainer = document.querySelector('[fs-cmssort-element="list"]');
const listItems = Array.from(listContainer.children);
let bcItem = null;
const otherItems = listItems.filter((item) => {
const label = item.querySelector('[fs-cmssort-field="name"]');
if (label && label.innerText.trim() === 'BC') {
bcItem = item;
return false;
}
return true;
});
otherItems.sort((a, b) => {
const aText = a.querySelector('[fs-cmssort-field="name"]').innerText.trim();
const bText = b.querySelector('[fs-cmssort-field="name"]').innerText.trim();
return aText.localeCompare(bText);
});
listContainer.innerHTML = '';
otherItems.forEach((item) => listContainer.appendChild(item));
if (bcItem) {
listContainer.appendChild(bcItem);
}
},
]);
</script>
This renders the CMS Sort attribute redundant so you can remove it if you wish, however, do let me know as some tweaks to the code would be needed if you remove the HTML attributes drom the elements.
Hopw this helps!
