Hi, I’m using a static to collection list. How can I make it display in alphabetical order?

Attributes
1

Hi, I’m using a static to collection list. How can I make it display in alphabetical order?

2

Hey @julian.vankan!

To display your static-to-collection list in alphabetical order, you’ll need to use our List solution and some custom code.

First, make sure your static list is structured correctly:

  1. Add the script to your page <head>:
<!-- Finsweet Attributes -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>
  1. Structure your list with these attributes:
  • fs-list-element="list" on your main container
  • fs-list-element="item" on each item container
  • fs-list-field="name" on the text elements you want to sort by

For automatic alphabetical sorting when the page loads, add this code before your closing </body> tag:

<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      const [listInstance] = listInstances;
      listInstance.sorting.value.fieldKey = 'name'; // Use your field identifier
      listInstance.sorting.value.direction = 'asc'; // 'asc' for A-Z
    },
  ]);
</script>

Your HTML structure should look like this:

<div fs-list-element="list">
  <div fs-list-element="item">
    <h3 fs-list-field="name">Apple</h3>
  </div>
  <div fs-list-element="item">
    <h3 fs-list-field="name">Banana</h3>
  </div>
</div>

Could you share your Webflow staging URL or current structure so we can provide more specific guidance? @Support-Luis or @Support-Pedro can also help with any custom code solutions if needed.

1 Like