Filters disappearing after the page is loaded

I have a complex CMS list that uses filters, nest, page load, custom form select, and list select. I’m updating my client’s site from attributes v1 to v2, so there may be a few things missed, especially with list select and form select, since there are no video tutorials for it.

All solutions seem to be working, except the filter. When the page loads, the filters UI flashes on the page for a fraction of a second, then disappears, but the RESET button remains. I’m wondering if it has to do with my instance attribute as well—perhaps I did that incorrectly?

I’m stumped and not sure why the filters are disappearing, and thus I can’t test the filters. Any help is greatly appreciated thank you!

Live page
Read only

Hey @Drcontempo! I am not sure what is going on here..

If you inspect the published page, the Form element is removed, which shouldn’t be happening :thinking:

Would you happen to have any additional code or script that could interfere? Could we test a simple checkbox filter setup?

Hm ok..what was interesting was, when I removed the data attribute on the filters form wrapper, the filter UI was visible. Only when I added the attribute back in, did the filters get removed! I’ll see if I can build another one on another page.

There are no other scripts on this page specifically.

The only other global custom head code is:

<!-- Please keep this css code to improve the font quality-->
<style>
  * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  
  .line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
</style>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-11077308790"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-11077308790');
</script>

<!-- Google Tag Manager  -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MKW4PST');</script>

<!--Clarity tracking code-->
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "hqnit5al46");
</script>
<!--End Clarity tracking code-->

<!-- Hotjar Tracking Code -->
<!--
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:3644018,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
-->
<!-- End Hotjar Tracking Code -->

<!-- apollo tracking code -->
<script>function initApollo(){var n=Math.random().toString(36).substring(7),o=document.createElement("script");
o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,o.async=!0,o.defer=!0,
o.onload=function(){window.trackingFunctions.onLoad({appId:"661823d170ad3c01af7417a1"})},
document.head.appendChild(o)}initApollo();</script>

<!-- Ahrefs tracking code -->
<script src="https://analytics.ahrefs.com/analytics.js" data-key="44CgT9e0MusR/npJbjgWMA" async></script>


<!-- Set up canonicals for paginations -->
<script>
  setTimeout(function () {
    const url = new URL(window.location.href);
    const path = window.location.pathname;

    const canonicalMap = {
      "/portfolio": {
        param: "5fda646f_page",
        canonical: "https://levitatemedia.com/portfolio"
      },
      "/learn": {
        param: "83521626_page",
        canonical: "https://levitatemedia.com/learn"
      },
      "/orphans": {
        param: "94b7a4f1_page",
        canonical: "https://levitatemedia.com/orphans"
      },
      "/category/production": {
        param: "b586e34b_page",
        canonical: "https://levitatemedia.com/category/production"
      },
      "/category/marketing-c": {
        param: "b586e34b_page",
        canonical: "https://levitatemedia.com/category/marketing-c"
      },
      "/category/company-news-0": {
        param: "b586e34b_page",
        canonical: "https://levitatemedia.com/category/company-news-0"
      },
      "/category/video-advice": {
        param: "b586e34b_page",
        canonical: "https://levitatemedia.com/category/video-advice"
      }
    };

    if (canonicalMap[path] && url.searchParams.has(canonicalMap[path].param)) {
      const existingCanonical = document.querySelector('link[rel="canonical"]');
      if (existingCanonical) {
        existingCanonical.remove();
      }

      const canonicalTag = document.createElement('link');
      canonicalTag.setAttribute('rel', 'canonical');
      canonicalTag.setAttribute('href', canonicalMap[path].canonical);
      document.head.appendChild(canonicalTag);
    }
  }, 100); // Delay to ensure DOM is ready and canonical tag exists
</script>

<!-- Writesonic -->
<script src="https://seo-fixer.writesonic.com/site-audit/fixer-script/index.js" id="wsAiSeoMb"></script>
<script id="wsAiSeoInitScript">
  wsSEOfixer.configure({
    hostURL: 'https://seo-fixer.writesonic.com',
    siteID: '67bf7095596e2ace457ab751'
  });
</script>
<!-- End Writesonic -->

<!-- Finsweet Attributes v2 -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
fs-selectcustom
></script>
<!-- Finsweet Attributes v2 -->

And footer code:

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/21193617.js"></script>

<!--Form reset-->
<script>
Webflow.push(function() {
  $(document).on('submit', 'form', function() {
    setTimeout(function() { location.reload(true); }, 4000);
  });
});
</script>

<!--LinkedIn tracking code-->
<script type="text/javascript"> _linkedin_partner_id = "4881306"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script><script type="text/javascript"> (function(l) { if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; window.lintrk.q=[]} var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript";b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s);})(window.lintrk);</script>

<noscript> <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=4881306&fmt=gif"/></noscript>
<!--End LinkedIn tracking code-->

<!-- Beehiiv attribution -->
<script type="text/javascript" async src="https://embeds.beehiiv.com/attribution.js"></script>

<!-- Dynamic Copyright Year -->
<script>
// get current year
const year = new Date().getFullYear();
// set .year's text to current year
$('.year').text(year);
</script>

UPDATE: I found out that it is the tag template that is causing the filters to disappear. At first I didn’t have the 4 required elements to make it work, but even still, after adding the tag elements and adding the correct attributes, it still didn’t work. Here is my video explanation ← click

Hey @Drcontempo! Could you add a wrapping div to the tag element? Seems that the parent element is removed from the HTML and then re-added once the filters become active.

I’ve done this in an override and the tags are working as expected.

Yes that seemed to have done it thank you! I do see the tag flash on screen for a fraction of a second though, before disappearing. Is this normal behavior?

Yes, this happens as the element is only hidden after the script loads.

Some simple JS or page load interactions can help hide the element to prevent flashing

Ok got it thank you! I do have one more thing I noticed, while the next list is being loaded after an infinite load, the lightbox of the newly loaded items seems to get ignored. Have you seen this behavior before? @Support-Luis

Any insight into why the lightbox isn’t working on subsequent paginated pages while using the infinite load solution @Support-Luis?

Hey @Drcontempo! This happens because the native Lightbox module is only loaded on page load, and not when we render new items with the infinite loading.

This can be solved by adding this snippet to the page.

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

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

      listInstance.addHook('render', (items) => {
        window.Webflow && window.Webflow.destroy();
        window.Webflow && window.Webflow.ready();
        window.Webflow && window.Webflow.require('ix2').init();
        document.dispatchEvent(new Event('readystatechange'));
      });
    },
  ]);
</script>

Ok hm, still not working…it doesn’t look like there anything I need to do to update that code right? No IDs or classes to update.

The solution was given by @Support-Pedro from this thread!!

Thank you both!

2 Likes