Combine then sort and load swiper?

Attributes
1

Hello everyone.

I’m combining different CMS post-types in the homepage and then initializing swiperJS (since they should appear in slider).

I’m using this code currently, which seem to work:

window.FinsweetAttributes ||= ;
window.FinsweetAttributes.push([
‘list’,
(listInstances) => {
// Swiper init code
},
]);

Is this the right approach?

More importantly, the items need to be sorted by date. How do I best approach this?

2

Hey @ala.alshaibani! That is indeed the correct approach!

Since you’re using the List attributes, you can also sort the items inside the callback function. You’ll need an element with the attribute fs-list-element="sort-trigger", which can be a simple button (it can even be hidden using display: none).

Here’s a snippet that handles the sorting as soon as the list loads, before Swiper initializes:

<script>
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      console.log('List successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.sorting.value.fieldKey = 'date';
      listInstance.sorting.value.direction = 'asc';

      // Swiper init code here
    },
  ]);
</script>

Let me know if you need any help!

2 Likes