I am looking to create an alphabetically ordered index of items (names) in my CMS collection so that it looks something like that:
A
Anderson, Mary
Abbott, John
Ackroyd, Bill
B
Bacon, Francis
Baker, Frank
Barker, Jane
Etc…
Each item in the CMS collection would contain fields like Name, Surname, Information about the person, links to their website and similar, and I need to create an alphabetically sorted index of names that would serve as links to each individual person’s page and split them into 26 groups (from A to Z). Well, 29, since I work with a Scandinavian language.
I first thought I would have 26 filtered items referring to the same CMS-collection, each filtered after the first letter in the Surname-field, but it seems like there is a limit of 20 collections per page.
I am also not sure how to filter the items unless I actually add a new field to my CMS-collection where the user selects the letter (A, B, C, etc) under which the item (person) will be listed. This adds more work to the user, so I would prefer to avoid that.
The workaround is to use Javascript to assemble the groups.
If they’re just headings, you can just scan your sorted list, identify the changepoints and create your headings with JS.
I prefer a “slot” layout approach where I have the containers created in one collection list, and the data created in other collection lists, and then the JS moves the DOM elements into the correct groups.
Thanks Michael! I am quite a noob when it comes to custom-made JS, so I fear your advice flies right over my head (but is hopefully helpful for someone else in the future). I was hoping a pre-made solution in the spirit of Webflow already exists, but I can understand that there might not be one (yet?) :)
Could you perhaps kindly point me in the direction of how one can identify changepoints (and what they are ) and what a slot layout approach would look like in that case?
I’m referring to the points where your group changes. So if you have an alphabetic list of US states, the group would change between Connecticut and Delaware.
The code has to be written specifically for your page design- you might try ChatGPT and see if you can form some code that works for your specific page setup.
I have a layout tool that gets you close, but you’d need to name each of your containers, e.g. A, B, C, and then for each item you have to tag it with that container name.
As you noted, that’s not ideal since it means an extra CMS field and tagging step.
If you wanted to make it more automatic, where it can identify the group based on an algorithm like “uppercase the first letter of the grouping key”, then the matching and placement would be automatic.
I’m actually preparing for another round of features on that lib if you wanted to sponsor a feature there.
Thanks again!
So, I have asked Chat GPT, and here is what it is suggesting:
Chat GPT's solution
Step 1: Structure Your CMS Collection
Ensure your CMS collection has the following fields:
Name (e.g., Mary)
Surname (e.g., Anderson)
Information (e.g., about the person)
Website (e.g., link to their website)
Full Name (a combined field for sorting, e.g., Mary Anderson)
Step 2: Create the HTML Structure in Webflow
Add a Collection List to your Webflow page.
Within the Collection List, add a Text Block to display the full name.
Add an HTML Embed element inside the Collection List to include a custom attribute that holds the first letter of the surname. This will help with grouping.
Step 3: Add Custom JavaScript
You will need to add custom JavaScript to sort and group the items. You can do this by adding an Embed Code element in the page settings or inside an HTML Embed block.
<script>
document.addEventListener('DOMContentLoaded', function() {
// Step 1: Get all collection items
const collectionItems = [...document.querySelectorAll('.collection-item')];
// Step 2: Create an object to store items by the first letter of the surname
const groupedItems = {};
collectionItems.forEach(item => {
// Get the surname from the element (assuming it has a class .surname)
const surname = item.querySelector('.surname').innerText.trim();
const firstLetter = surname.charAt(0).toUpperCase();
if (!groupedItems[firstLetter]) {
groupedItems[firstLetter] = [];
}
groupedItems[firstLetter].push(item);
});
// Step 3: Create a sorted list of keys (letters)
const sortedKeys = Object.keys(groupedItems).sort();
// Step 4: Generate the HTML for the alphabetically ordered index
const container = document.createElement('div');
sortedKeys.forEach(letter => {
const letterHeader = document.createElement('h2');
letterHeader.innerText = letter;
container.appendChild(letterHeader);
const itemsContainer = document.createElement('div');
groupedItems[letter].forEach(item => {
itemsContainer.appendChild(item);
});
container.appendChild(itemsContainer);
});
// Step 5: Insert the generated HTML into the page
const targetElement = document.querySelector('.your-target-element-class');
targetElement.innerHTML = '';
targetElement.appendChild(container);
});
</script>
Step 4: Adjust Your Collection List
Ensure each collection item has a surname class element containing the surname.
Replace .collection-item and .your-target-element-class with the actual class names used in your Webflow project.
Explanation of the Script:
Getting Collection Items: The script collects all items in the collection list.
Grouping by Surname Initial: It creates an object to store items grouped by the first letter of the surname.
Sorting Keys: It sorts the keys (letters) alphabetically.
Generating HTML: It generates HTML for the alphabetically ordered index.
Inserting HTML: It inserts the generated HTML back into the page.
My big questions is: Is it hallucinating or is it worth trying it out?
I have made a quick test here, with a CMS collection and basic HTML, but I am stuck on the JS bit and how everything is meant to connect: Webflow - testing
) and what a slot layout approach would look like in that case?