Enhancing User Experience with Filtered Results

Hey @sitegrowteam! We currently have the Combobox solution with Attributes → Combo Box for Webflow

However, it is not CMS Compatible yet. There is an open feature request for this, so we may be able to add this functionality for the V2 release

1 Like

Hi @Support-Luis,

Great! I will look into using the Combobox solution. If it’s made CMS compatible in the V2 release, I can switch to that.

Thanks!

1 Like

Hi @Support-Luis,

I’ve encountered an issue that I need your support with. The custom code within a collection item is not running after pagination. Initially, for each property’s price and square feet, I set the fields in the collection to text fields so I could manually add commas to separate the numerical values. Now, I’ve changed the fields to number fields and used custom code to separate the values (price and square feet) with commas, which works fine on the first page.

However, when I paginate to the next page, the custom code doesn’t get applied anymore. From the second page onwards, the prices and square footage don’t get separated with commas. I’m not entirely sure, but I read somewhere that someone had a similar issue, and it seems like it might be because I’m using Finsweet’s CMS Load pagination.

Could you please look into this? So far, I’ve been testing this only on the “Properties” page, so to examine this issue, including the code, please focus on that page. Once this issue is resolved, I would like to implement the same solution on the “For Sale”, “For Rent”, and “Off Plan” pages.

Here’s my Read-Only: Link

Thank you!

Hey @sitegrowteam! We can use the CMS Filter callback to run your comma snippet each time items are rendered, for example when we filter the list or paginate the list.

Here is the updated code :wink:

<!-- Comma Separated Values -->
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      function addCommas() {
        var numBlocks = document.querySelectorAll('#comma');
        for (var i = 0; i < numBlocks.length; i++) {
          var num = parseFloat(numBlocks[i].textContent.replace(/,/g, ''));
          if (!isNaN(num)) {
            numBlocks[i].textContent = num.toLocaleString();
          }
        }
      }

      const [filterInstance] = filterInstances;

      addCommas();

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

Hey @Support-Luis,

This works perfectly. Thanks a lot! Additionally, you’ll see on the published site that each property item has an animation where the image scales slightly when hovered over. However, on the properties page, when you paginate to the next page, the images do not scale from the second page onwards. Could you please take a look at this issue?

Thanks again.

Hey @sitegrowteam! We can use this option to reset Webflow’s interaction engine on each rendering.

Just be sure that initial states are not used as they will break the animations.

1 Like

Hi Luis,

I will test this out and let you know how it goes.

Meanwhile, I have another issue I’d like you to look at. I’m facing a problem with the Finsweet active state. As shown in the screenshot, the text doesn’t turn white for the Amenities, Bedrooms, and Bathrooms filters in the active state. I made sure to specify that the typography should be white and the background black. When you click on each one, it takes the black background color from the active state div but not the white typography. This is very strange, and I’ve tried multiple ways to fix it. Please see the attached screenshots for reference.

Here’s my Read-Only: Link

Here is the hosted site: Link 2
Note: You can click on “More Filters” to open the Advanced filters window. To open the window in the designer, you will have to set More-Filters-Pop-Up to display: Flex

Thank you.

Hey @Support-Luis,

Update: the fs-cmsload-resetix attribute works perfectly and all of the animations/interactions are working after pagination.

Thank you!

1 Like

Great to hear! Are you still facing issues with the active state?

1 Like

Hi @Support-Luis,

Yes, I am still facing issues with the active state. Still unable to get the typography to be white.

Thanks

Hey @sitegrowteam! I’m not sure if the variables could be causing an issue here… Can we try without using the variables for the colors?

Here is a very nice tutorial on how to add the active class →

1 Like

Hi @Support-Luis,

This is actually the exact tutorial I watched while implementing this, and I followed the steps in the video. Regarding the variables, I disconnected all of them from the color variables as suggested, but unfortunately, the problem persists.

Thank you.

Thank you for testing the variables! I will take another look

1 Like

Hey @Support-Luis,

Sure! Thank you! By the way, the amenities filters are now working properly. However, the bedrooms and bathrooms filters are still not getting the white text, and I still cannot figure out why. Please have a look.

Here’s my Read-Only: Link

Here is the hosted site: Link 2
Note: You can click on “More Filters” to open the Advanced filters window. To open the window in the designer, you will have to set More-Filters-Pop-Up to display: Flex

Thank you.

Hey @sitegrowteam

We seem to have several issues here, one is that this label class is preventing the text color from changing once the active class is set. You can simply remove it :slight_smile:

Another issue is that for whatever reason, the bedroom-checkbox class does not behave like the amenity-checkbox. If I replace the class name for the bedrooms and baths filter then these checkboxes work as expected.

Here is a quick video on what I found

1 Like

Hey @Support-Luis,

This works perfectly! Tthank you so much!

I do have another issue to bring to your attention regarding the results count. It seems that due to pagination, the results count isn’t working properly. For example, on the properties page, I have 20 properties. When the page first loads, the results count shows “Showing 20 results of 9.” This indicates that while the count of the results being shown is accurate, the total count (“of 9”) is incorrect. I believe this is due to the pagination, as 9 refers to the number of items shown on the first page of the pagination. Please have a look at this.

See attached screenshot:

Here’s my Read-Only: Link

Here is the hosted site: Link 2

Thank you.

Hey @sitegrowteam! The correct attribute to use there is fs-cmsfilter-element="items-count".

Seems that you’ve mixed up some solutions :wink:

Hey @Support-Luis,

Actually, "items-count" is what I initially had as the value when I first tried it but I faced the same issue then. Either way, on the properties page, I just changed it back to "items-count" and the issue still persists.

Thank you.

Hey @sitegrowteam! The element has been removed. Have you decided not to use this anymore?

Hey @Support-Luis,

Apologies for the confusion. I temporarily hid it for some reason, but it’s back now, and you can take a look. On the properties page, even after changing it back to “items-count,” the issue still persists, and it doesn’t work properly.

Here’s my Read-Only: Link

Here is the hosted site: Link 2

Thank you.