CMS filter + Number ranges with select field

Attributes
1

Hey everyone,

I’m working on a client project and using the CMS Filter - I’m hoping to achieve the image attached. I would like to let visitors filter yachts by features like the number of guests they can accommodate and price range but using a dropdown instead of the range slider. Right now, it’s working for picking specific numbers, but I’d like to make it even better by letting people choose ranges instead.

For example, I want to have dropdown options like “8 guests” and have the filter show yachts that fit within those ranges (yachts that fit 8 guests and above). Same thing for prices.

Is it possible to achieve this at all?

Thank you!!

Screen Shot 2024-02-21 at 7.42.55 AM
Screen Shot 2024-02-21 at 7.42.55 AM1394×1330 147 KB

2

Hey @anasilveira! We could do this with some clever Attributes setup (using Mirror Input Values - Mirror a user input to another input) or some custom code.

If you want to always show “yachts that fit x guests and above” we can mirror the value from that dropdown to a range filter with the max set to whatever value you like but the lowest value will be the one selected from the dropdown.

Same for the price filter.

Let me know if you need any help setting this up! You can always share a read-only link for us to go over the setup :slight_smile:

3

GENIUS!!! This worked beautifully. Thank you so much!

1 Like
4

Hi @Support-Luis ! Unfortunately while the filter worked perfectly with the guest range, I’m having difficulty with the price range. Could I trouble you to take a look?

Here’s my read-only link: Webflow - Sail Play Dine

5

Hey @anasilveira! Easy fix here! You have fs-cmsfilter-range="from-2" and fs-cmsfilter-range="to-2", these filter fields do no need instances. Simply remove the -2 and test again!

Let me know how it goes! :muscle:

6

Thank you @Support-Luis ! I think we are almost there! Now it is filtering, but only according to the min value, not max as well. Is there a way to filter with both? Like when I select $10k - $20k it is still showing up Tres Suenos with is $25k/week

7

Hey @anasilveira! This should do the trick

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      let priceFromRange = document.getElementById('field');
      let priceToRange = document.getElementById('Max-Value-Filter-2');

      priceFromRange.addEventListener('change', () => {
        let selectedOption = priceFromRange.options[priceFromRange.selectedIndex];

        if (selectedOption.value !== '' && selectedOption.innerText.includes('-')) {
          let rangeBounds = selectedOption.innerText.split('-');
          let upperBound = parseInt(rangeBounds[1].replace('$', '').replace(',', ''));
          priceToRange.value = upperBound;
          priceToRange.dispatchEvent(new Event('input', { bubbles: true }));
        }
      });
    },
  ]);
</script>

You can leave it inside the CMS Filter callback or wrap it like this. Both should work the same

window.onload = () => {
  let priceFromRange = document.getElementById('field');
  let priceToRange = document.getElementById('Max-Value-Filter-2');

  priceFromRange.addEventListener('change', () => {
    let selectedOption = priceFromRange.options[priceFromRange.selectedIndex];

    if (selectedOption.value !== '' && selectedOption.innerText.includes('-')) {
      let rangeBounds = selectedOption.innerText.split('-');
      let upperBound = parseInt(rangeBounds[1].replace('$', '').replace(',', ''));
      priceToRange.value = upperBound;
      priceToRange.dispatchEvent(new Event('input', { bubbles: true }));
    }
  });
};
8

It worked!!! Thank you so much @Support-Luis ! :grinning:

1 Like