Filters working / not working randomly

Attributes
,
1

Hi Finsweet fam,

I’m using Attributes v2 CMS filter for the first time. Everything seems set up correctly, sometimes the filters work perfectly, but other times they stop working when the page loads until I refresh. Could anyone let me know if I’ve missed something, or share suggestions for making sure the filter works consistently?

Sandbox Link

3

Hey @Farhan the filter script could be running before the CMS items are fully loaded

Try adding this just after the cdn

<script>
window.Webflow ||= \\\[\\\];
window.Webflow.push(() => {
   if (window.fsAttributes && window.fsAttributes.cmsfilter) {
      window.fsAttributes.cmsfilter.init(); // Attributes re-initialized after Webflow load
   }
});
</script>
4

hi @jesse.muiruri thanks for your reply :slight_smile: I’ve implemented the script and I still see the filters not working. Below are the examples:

When it works, it gives me facet count and I when I click on the categories it works

image
image1920×1023 154 KB

When it doesn’t It shows the static values I have set in webflow and I have to refresh the page to make it working again sometimes 2-3 times.

image
image1920×1032 151 KB

5

Sorry @Farhan

Earlier code had typos

Please try this one

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

    const [listInstance] = listInstances;
    console.log(listInstance);

  },
]);

The team is looking into this, will keep you posted

Thanks

1 Like
6

I have updated the code, will be testing this out today. Thanks @jesse.muiruri

7

Hi @jesse.muiruri updating here after a day of testing although I see it reduced by a lot i still see that it doesn’t work sometimes. I’m wondering what might be the issue. And do you know if this is normal and happens often?

image
image645×1123 97.8 KB

8

Hey @Farhan so sorry for the delay

Just realized the issue might be the filter script executing before the page is ready

So that’s why it works reliably on reload

I would recommend changing the async attribute to defer, which will wait till page is ready before the filter script does its thing

Replace the cdn with this

<script defer type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
fs-inject
></script>

Let me know

Thanks

9

Hey @Farhan

I see you implemented the solution

Have tested on my end & it seems to work reliably

Let me know if it works :100: on ur end

Thanks