Problem with Range Filter and QueryParams CMS FILTERS

[juanpablofmx]

Hello Finsweet team,

I’ve been grappling with an issue for several weeks now that I’ve tried to solve in various ways but persists. My client requested a website with dynamic filters for their CMS items, which I successfully implemented using Finsweet’s filters, and everything initially worked perfectly.

However, a new requirement arose to add a price range filter with an upper limit that could extend to cover items priced up to $3,000,000 and beyond (e.g., items costing $10,000,000 should also be included in the filter without setting $10,000,000 as the maximum). I managed this by adding a select input for the numbers, displaying $3,000,000 as the maximum but actually setting the real value to $1,000,000,000 in the system. Up to this point, everything functioned flawlessly.

The issue emerged when I attempted to add query parameters in the URL so that the same filters could appear on another page to which the user is redirected for viewing more items. I applied the ShowQuery attributes, and they worked well except for the price range filter using the select input. When the page is refreshed or when redirected to another page with these active price range filters, the select input elements appear completely blank and fail to filter the prices, forcing the user to re-enter them, which is not in line with what the client wanted.

I suspect the problem might be with the select input and the query parameters not working well together, but I’m at a loss for a solution as I’m not a coding specialist.

After refreshing or redirecting

Could you please help or suggest any creative solutions? I’ve attached photos of the error and my preview link.

https://preview.com/preview/blue-palm?utm_medium=preview_link&utm_source=designer&utm_content=blue-palm&preview=6de1cf75027ec3c2b9eb2aa0fb894457&pageId=661ea378d71579671f54945b&locale=en&workflow=preview

Thank you very much for your assistance!

[Support-Luis]

Hey @juanpablofmx! The link seems to be broken. Can you please share a new one?

[juanpablofmx]

Here is the link https://preview.webflow.com/preview/blue-palm?utm_medium=preview_link&utm_source=designer&utm_content=blue-palm&preview=2ca12764fa0c2dd091f1be043c064cd9&workflow=preview and the problem occurs in the ‘‘LISTING’’ page

[Support-Luis]

Hey @juanpablofmx! The issue comes from your custom code for extracting the query parameter values. These return null therefore the value is empty.

You should not need any extra code as CMS Filter is smart enough to populate the filter UI with the values on the Query Params

You can check this example, you can see the price slider is automatically set after the page loads.

CMS Filter Example | Attributes by Finsweet

[juanpablofmx]

Thanks for your answer @Support-Luis !

But still not working, I remember adding the custom code after the problem started to try to fix it.
Now it’s removed, but it still doesn’t work.

I don’t know what it could be, I tried changing the range filter to a range slider and it works but it is not what my client asked for so they’re pushing me to make it work with the selector

[Support-Luis]

Hey @juanpablofmx! Can we try removing the commas from the option values?

I think the issue was a combination of the previous snippet and the format of the values. I’ve tested on my end and seems to work without any extra code

[juanpablofmx]

It works!!! I can’t believe I struggled for many days with this and it was as simple as the commas

Thank you so much @Support-Luis !!

Quick question: Is there any practical way to implement a currency exchanger? I know a way to do the CMS, but I’m not sure how I can play with the range filter to change all the values to another currency.
I know maybe this is not support but if you have any idea is welcome!

Thanks again.

[juanpablofmx]

Updates:

I added a script that converts currency values and formats them based on user selection. It works perfectly with the initial items and price range filtering. But now the formatting does not apply to newly loaded items with CMS Load.

Could you please let me know the correct event name to listen for when new items are loaded?
I think the problem comes because I’m not calling the right event, but I’m not too much into code so I don’t really know

Here’s the code I’m using:

// Example exchange rate
const exchangeRate = 20; // 1 USD = 20 MXN

// Function to format numbers with currency symbol and name
function formatNumber(value, currency) {
  if (currency === 'MXN') {
    return `$${value.toLocaleString('es-MX', { minimumFractionDigits: 2 })} MXN`;
  } else {
    return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2 })} USD`;
  }
}

// Function to convert prices
function convertPrices(currency) {
  const prices = document.querySelectorAll('.property-price'); // Class of price elements
  prices.forEach(price => {
    let value = parseFloat(price.dataset.usd); // Assuming data-usd contains the price in USD
    if (isNaN(value)) {
      console.error('Invalid price value:', price.dataset.usd);
      return;
    }
    if (currency === 'MXN') {
      value *= exchangeRate;
    }
    price.textContent = formatNumber(value, currency);
  });
}

// Event listener for currency select input
document.getElementById('currency-select').addEventListener('change', function() {
  convertPrices(this.value);
});

// Initial conversion based on default value
document.addEventListener('DOMContentLoaded', function() {
  const defaultCurrency = document.getElementById('currency-select').value;
  convertPrices(defaultCurrency);
});

// Reapply conversion on Finsweet CMS load events
document.addEventListener('fs-cmsload', function() {
  const currentCurrency = document.getElementById('currency-select').value;
  convertPrices(currentCurrency);
});
```Preformatted text

[Support-Luis]

Hey @juanpablofmx! You can use the CMS Load callback to run code each time new items are rendered on the page

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

      const [listInstance] = listInstances;

      //Code here runs on page load

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        //Code here runs each time new items are rendered on the page
      });
    },
  ]);
</script>

Or you can use the CMS Filter callback in case you need to interact with the filters

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

      const [filterInstance] = filterInstances;
      //Code here runs on page load

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        //Code here runs each time new items are rendered on the page or
        // each time a filter is applied
      });
    },
  ]);
</script>

[juanpablofmx]

Awesome! It works perfectly, now the users can change currency and still works with CMS Load and CMS filters.

Thank you so much again @Support-Luis !!!

Love Finsweet