Sometimes clients want sets of cards made alphabetical–this could be used on a “meet the team” page to alphabetize people by last or first names, or by the name of the branch, or whatever. We are unable to alphabetize the branches within the ATM Locator Banno Component’s table, but if they are content areas, that’s what we can work with.
Alphabetize by first letter in phrase
Bootstrap 5
This also works with things that need to be organized by date! The things under “news” are organized by date, and the things under “locations” are organized alphabetically.
HTML
Within your layout, make sure that your row (or the div above it) has a unique class. Below, the examples are .news__container and .locations__container. You’ll also need to make sure that the cards themselves have a class, which in this case is .textCard__card. Lastly, your date needs a class (.date), or if you’re alphabetizing things, you’ll need a class on that area (in this case, it’s simply .content, but you can change it to whatever it needs to be.)
Script.js
Place this code within the DOMContentLoaded section (“Scripts when the DOM is fully propagated”)
const newsCardsContainer = document.querySelectorAll('.news__container .row');
const locationsCardsContainer = document.querySelectorAll('.locations__container .row');
if(newsCardsContainer.length>0) {
newsCardsContainer.forEach((cardRow)=> {
let newsCards = cardRow.querySelectorAll('.textCard__card');
sortAndPlaceCards(cardRow, newsCards, "date");
});
}
if(locationsCardsContainer.length>0) {
locationsCardsContainer.forEach((cardRow)=> {
let locationCards = cardRow.querySelectorAll('.textCard__card');
sortAndPlaceCards(cardRow, locationCards, "alpha");
});
}
function sortAndPlaceCards(cardContainer, cardContent, method) {
if(!inCms) {
let sortCards = [];
cardContent.forEach(function(card, index) {
if(method==="date") {
if(card.querySelector('.date')) {
let dateMatch = card.querySelector('.date').textContent.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
let date = dateMatch ? dateMatch : ['9/'+index+'/1900', '9', index, '1900'];
sortCards[index] = [new Date(date[3], date[1]-1, date[2]), card];
}
} else {
let stringMatch = card.querySelector('.content').textContent.trim().replace(/[\t\n]/g, "").split(' ')[0];
sortCards[index] = [stringMatch, card];
}
});
if(sortCards.length>0) {
let sortedCards = [];
if(method==="date") {
sortedCards = sortCards.slice().sort((a, b) => b[0] - a[0]);
} else {
sortedCards = sortCards.slice().sort();
}
cardContainer.innerHTML = "";
sortedCards.forEach((card)=>{ cardContainer.appendChild(card[1]); });
}
cardContainer.classList.add("sorted");
} else {
return;
}
}
Example Sites
- BankFirst: Alphabetical branch locations & Most recent date first
Bootstrap 3 / 4
There are two methods to do this that have been used across various sites. If one doesn’t work, try the other!
Method One
Script - banno-functions.js
Place this script anywhere in your banno-functions.js (as long as it’s not inside of another function, of course).
// Alphabetize Branch names
function nameSorting(a, b) {
var name1 = $.trim($(a).find('.locationName').text().toUpperCase());
var name2 = $.trim($(b).find('.locationName').text().toUpperCase());
return name1 > name2 ? 1 : -1;
}
Script - scripts.js
Place this script inside the ELSE of the scripts.js file, so that it only runs on the published page.
// Alphabetized by Branch Name
$('.branch-location-wrapper .branch-col').sort(nameSorting).appendTo('.branch-location-wrapper');
Example Sites
- Limestone Bank (“Banking Center Locations” section, alphabetized by branch name)
- Capital Credit Union remake (“Explore our locations” cards. Includes conditional to make it work only on specific pages.)
Method Two
- Place the following in the general script in the non-CMS section. I guess you could do it in the CMS, but it might jack up things? Hey, go nuts with it.
- Put all sortable items in a row within a flex box.
Script
// Re-order cards by date
function sortLocations(a, b) {
return $(a).text().trim() < $(b).text().trim() ? -1 : 1;
};
$('.card-class').sort(sortLocations).appendTo('.container-class');
HTML
<div class="container-class d-md-flex flex-md-wrap mt-4 text-center remove-blank">
<div class="card-class mx-auto mx-md-1 mb-2 p-4 remove-blank">
<div class="content" data-content-block="location1" data-content="content" data-editable="editable">
{{#page.location1}}
{{& content}}
{{/page.location1}}
<!-- @if NODE_ENV!='production' -->
<div><strong>Din Djarin CU Austin, TX</strong> (1)</div>
<div> </div>
<p>6411 N Lamar Blvd<br />Austin, TX 78752<br />Phone: (512) 458-2558<br />Toll Free: (800) 749-9732</p>
<div> </div>
<p><a href="/">View hours & more info.</a></p>
<!-- @endif -->
</div>
</div>
</div>
Example Sites
Alphabetize by last name
This does have caveats - it may not work perfectly if the person’s last name is multiple words. “Zeke Anderson” will be correctly placed under “A”, but “Edward Van Halen” will be put under “H”, instead of “V”. In order to perfectly alphabetize, you’d need to write a new function with two content areas, one for the first name and one for the last name.
Script
To alphabetize by last name, place this script inside the ELSE of the scripts.js file, so that it only runs on the published page.
// Alphabetized by Last Name
function nameSorting(a, b) {
var name1 = $.trim($(a).find('.teams__profiles-name').text().toUpperCase());
var name1Last = name1.split(" ").pop();
var name2 = $.trim($(b).find('.teams__profiles-name').text().toUpperCase());
var name2Last = name2.split(" ").pop();
return name1Last > name2Last ? 1 : -1;
}
$('.teams__profiles .teams__profiles-block').sort(nameSorting).appendTo('.teams__profiles > .row');
Example Sites
- Yellowstone Bank (Alphabetized by person’s last name)
Tags: bs3, bs4, cards, filter, alphabetical, script, js, javascript, jquery