CMS Sort, e-com prices, and random

Attributes
1

I have a Webflow e-com project where the client wants two sorting options that I’m not certain how to best implement-

  • Pricing asc and desc. Since it’s an e-com site, the Price field is currently a string like $ 230 USD.
  • Random, where each time it’s selected items will be auto randomized

Note the client is using CMS Load and CMS Filter in conjunction with CMS Sort.

Thanks!

2

Hey @memetican! For the price, the number option should be able to filter as you are looking for:

Screen Shot 2024-03-21 at 13.38.15
Screen Shot 2024-03-21 at 13.38.152394×964 216 KB

It should work even with the $ sign in place, if not you might need to separate the fields into two elements.

For the Random sorting, I am afraid we do not currently have an option for this. Custom code is the way to go here.

3

Thanks heaps Luis,

HA! It does, I didn’t expect that it would parse the ECom currency strings properly as numbers. Excellent.

I thought I was going to need code to parse this in the FS API callbacks.

Since we’re using FS Load, I don’t have all of the data on the page to randomize it. What’s the process for manipulating FS Filter / FS Sort data as it’s being created? I can setup an empty sort field, and initialize the FS Sort data as it’s being loaded with random numbers- that should work perfectly.

4

Great to hear it works out of the box with no issues haha!

For the sorting, since you are using CMS Load, you can access the items on the whole collection within the API and sorte them as needed. You might need to re-render the list with the renderItems()

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;
      const { items } = listInstance;

      console.log(items);

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
      });
    },
  ]);
</script>

Give it a go and let me know hoe it goes!

5

Thanks Luis, got it-

Yes listInstance.renderItems() needs to be called to apply the revised sort.

I have the basic version prototyped ok, but a few questions to tighten up my implementation;

  • Does the ‘cmsload’ event fire only after all of the data has been loaded? Such that in large data sets, there might be a significant delay before the event fires?
  • If so, is there an event that fires during the loading process as each page is loaded?
  • On this project, sorting can happen again after the load. I’m storing listInstance on window, so that I can re-retrieve it for the re-sort. Is there a way to access the listInstances and filter data directly through window.fsAttributes, or is it only possible through the callbacks? Just thought I might be able to save a var.

Thanks again!

6

Hey @memetican!

The ‘cmsload’ event will fire once the script is loaded and running on the page. It should have all the data available instantly as normally the rendering of the element is what takes more time.

We do have the renderitems event that will fire each time a new page is rendered

listInstance.on('renderitems', (renderedItems) => {
  console.log('The following items have been rendered on the Collection List: ', renderedItems);
});

And the switchpage event that fires each time the user has navigated to another page, valid for all load modes but render-all.

listInstance.on('switchpage', (targetPage) => {
  console.log('The user has navigated to the page number ', targetPage);
});

Finally, I’m afraid the data is available only within the callback.

Hope this helps! :raised_hands: