Issue with CMS filter

Hey I’m facing the issue with my CMS Filter, I recorded a video for you Video
Preview link
Live link

hey @sepels41! The live page is now drafted, can you republish it so I can take a look?

@Support-Luis sure here

Thank you! So this basically happens because you are essentially loading the list already filtered by having the Amazon radio checked on load by setting this attribute.

My suggestion is to change the filter from being a radio in a dropdown to a select and add a default option to show all the items on the list.

I added this button for testing purposes and you can see the whole list is rendered as it should on the page :slight_smile:

But I don’t need to see all options, I just need to see only amazon on initial load, but now on the initial load I see google and amazon together for some reason. and when I click on google after, it starts working perfectly, I had the same logic on another page and it works perfectly, here the page, instead of websites I’m using numbers.

I see now, thanks for the clarification. I am not sure why this would be happening for only one page.

I see the component is custom-made with div blocks and some extra code instead of a native dropdown or select. My suggestion of using a Select for the filter UI still stands here, but if you want me to, I can debug it as is.

Let me know what you think

I’m surprised the this is not working with this component, since I have the same logic on another page… and I don’t want. to create a different logic, since it’s not only on one page. If you can help me with existing component would be amazing, appreciate it !

@Support-Luis is it still doable? let me know please, thank you!

hey @sepels41! I am afraid I can not find anything causing the behavior not to work on the Amazon Proxy page even with the same structure and code.

One thing we could try, that applies to both setups, is adding something like $('.pricing-section-filter_item').first().click();

I’ve been trying this snippet, same as before but wrapped in the CMS Filter API instead of the DOMContetLoaded, and it seems to work decently.

 <script>
      // Dropdown Functionality

      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsfilter',
        (filterInstances) => {
          console.log('cmsfilter Successfully loaded!');
          $('.pricing-section-filter_item').first().click(); // this clicks the first option

          //Finsweet Filter Interaction
          $('.pricing-section-filter_item').on('click', function () {
            $(this).find('.dropdown_toggle-text').addClass('is-active_count');
            $(this)
              .siblings('.pricing-section-filter_item')
              .find('.dropdown_toggle-text')
              .removeClass('is-active_count');
          });

          $('.filter_pricing_period').on('click', function () {
            $(this).find('.filter_period_txt').addClass('is-active_period');
            $(this)
              .siblings('.filter_pricing_period')
              .find('.filter_period_txt')
              .removeClass('is-active_period');
          });

          // DROPDOWN CODE
          // Open and Close of the Dropdown
          $('.filter_dropdown_wrap').on('mouseenter', function () {
            $(this).addClass('open-dropdown');
          });
          $('.filter_dropdown_wrap').on('mouseleave', function () {
            $(this).removeClass('open-dropdown');
          });
          $('.pricing-section-filter_item').on('click', function () {
            $(this).closest('.filter_dropdown_wrap').removeClass('open-dropdown');
          });
          $('.dropdown_toggle').on('click', function () {
            if ($(this).closest('.filter_dropdown_wrap').hasClass('open-dropdown')) {
              $(this).closest('.filter_dropdown_wrap').removeClass('open-dropdown');
            } else {
              $(this).closest('.filter_dropdown_wrap').addClass('open-dropdown');
            }
          });
          // Changing of active link
          $('.pricing-section-filter_item').on('click', function () {
            $(this).siblings('.pricing-section-filter_item.selected').removeClass('selected');
            $(this).addClass('selected');

            // get content of title
            let dropdownLinkText = $(this).find('.filter-count_txt').text();
            $(this)
              .closest('.filter_dropdown_wrap')
              .find('.filter-count_txt')
              .first()
              .text(dropdownLinkText);
            let dropdownSmallText = $(this).find('.filter-count_txt_small').text();
            $(this)
              .closest('.filter_dropdown_wrap')
              .find('.filter-count_txt_small')
              .first()
              .text(dropdownSmallText);
          });
        },
      ]);
    </script>

Let me know what you think or if you’d like to fo another route