CMS Filter + Select Attribute Modification

[nathancovey]

I’m using the Finsweet CMS Filter + Select Attribute for one of my projects, but I need it to do something a little different and was seeing if anyone could help.

The project is for an organization that has several different locations but a similar equestrian therapy program. Each location has some differences for their program including cost, address, and some add-ons.

Here is the page for the therapy program: Girls Experience

At the top, I want someone to be able to select a location from the dropdown, and then certain information on the rest of the page will dynamically adjust for that selected location (pulling from my “Locations” CMS collection).

There are two problems I’m running into:

1. The default state before a location is selected shows all the information for every location. I don’t want anything to show up until a location is selected:
   
   
2. I must’ve set something up incorrectly with the CMS Filter + Select attribute because I can’t even get any information to show up once a location is selected:
   
   
   
   
   

Hopefully this makes sense. Would appreciate anyone’s help on this

[Support-Luis]

Hey @nathancovey! The first issue can be addressed by this option available for CMS Filter.

The list is disappearing whenever you select a location because there is no fs-cmsfilter-field attribute in your items. Please add this and test once again

[nathancovey]

It worked! Thank you so much!

[nathancovey]

@Support-Luis Can I set two different div blocks to have an initial state? Or can I only apply it to one at a time

[Support-Luis]

Hey @nathancovey! It should be one empty state per instance. But let me know your use case and we might be able to add some custom code to your site

[nathancovey]

@Support-Luis Sweet!

So I would love to be able to have 3 different div blocks as initial states on this page: Girls Experience

1. This
   

   

2. This
   

   

3. This
   

   

Let me know if this would be possible. Thanks!

[Support-Luis]

hey @nathancovey!

Can you please add this code to your </body>?

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

      const [filterInstance] = filterInstances;

      const intialSateElements = document.querySelectorAll("[fs-cmsfilter-element='initial']");

      const mutationCallback = (targetElement, mutationsList, observer) => {
        for (const mutation of mutationsList) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            const computedStyle = window.getComputedStyle(targetElement);
            const display = computedStyle.getPropertyValue('display');

            if (display === 'none') {
              hideOtherElements(targetElement);
            } else {
              showOtherElements(targetElement);
            }
          }
        }
      };

      function hideOtherElements(triggeringElement) {
        // Loop through the initial state elements and hide them except the triggering element
        for (const element of intialSateElements) {
          if (element !== triggeringElement) {
            element.style.display = 'none';
          }
        }
      }

      function showOtherElements(triggeringElement) {
        // Loop through the initial state elements and show them except the triggering element
        for (const element of intialSateElements) {
          if (element !== triggeringElement) {
            element.style.display = ''; // This restores the default display property
          }
        }
      }

      intialSateElements.forEach((element) => {
        const observer = new MutationObserver((mutationsList) =>
          mutationCallback(element, mutationsList, observer)
        );

        // Start observing the current element for attribute changes
        observer.observe(element, { attributes: true });
      });
    },
  ]);
</script>

[nathancovey]

@Support-Luis It worked like a charm! Thank you! You guys are the best!

[Support-Luis]

You are welcome!