Help Needed with Implementing Filtered Navigation in Webflow

Design help Custom code
1

Hi there,

I’m currently developing a website and have been utilizing the Finsweet filtering system, which has proven very beneficial. However, I’m encountering an issue. It’s a real estate website with a “Properties” page. I’ve implemented filters for users to refine their search, but I’d like them to select filters on the home page, submit, and then be directed to the Properties page with the chosen filters already applied and displaying results. I have added the collection completely as a new collection along with all the necessary FS filter attributes to the collection. And now, the filters are actually working. The issue here is, nothing happens when i click on the “See Properties Button.” Essentially, I want users to filter, submit, and see results on the Properties page. I found something related to what i want and i am using the code template here: FS Add Ons

Here’s the code on the body of the Home page:

<!-- Add filter params to links that apply filters on page load - pt.1 -->
<script>
const filterURLDetails = [
 {
   filterBtnClass: '.Home-Submit-Button',  // The button to which we'll add the URL
   url: 'https://wcapital.webflow.io/properties',  // URL to the page which will be loaded already filtered
   filters: [
     'city', 'type', 'amenities', 'search', 'bedrooms', 'bathrooms' // The filters to be applied
   ]
 }
]

// Add URL to buttons
// For each button
for (const filterBtn of filterURLDetails) {
   const button = document.querySelector(filterBtn.filterBtnClass);

   // Define the URL and add to a variable
   let url = new URL(filterBtn.url);

   // For each filter
   for (const filter of filterBtn.filters) {
     let filterParams;
     
     // Assign the filter as a query param to the URL
     if (filterBtn.filters.indexOf(filter) === 0) {
       filterParams = '?';
     } else {
       filterParams = '&';
     }
     filterParams += filter + '=' + encodeURIComponent(document.getElementById(filter).value);
     url = url + filterParams;
   }
   // Add the final URL to the button
   button.href = url;
}
</script>

Here’s the code on the body of the Properties page:

<!-- Add filter params to links that apply filters on page load - pt. 2-->
<script>
const filterTriggers = [
 {
   wrapperClass: '.filters-wrapper', // Wrapper of filter buttons
   buttonsClass: '.filter-button' // Class of the filter buttons within the wrapper
 }
]

// Get params from the URL
var getParamsArray = function (url) {
var params = {};
var parser = document.createElement('a');
parser.href = url;
var query = parser.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
params[pair[0]] = decodeURIComponent(pair[1]);
}

 const valuesArray = Object.values(params);
return valuesArray;
};
const filterArrays = getParamsArray(window.location.href);// If there are filter params

if(filterArrays) {
// For each filterArray item
 for (const filterParam of filterArrays) {
   // For each defined trigger
   for (const singleTrigger of filterTriggers) {
      const elems = document.querySelector(singleTrigger.wrapperClass);
      buttons = elems.querySelectorAll(singleTrigger.buttonsClass);
     // If button exists get the button
     filterButton = Array.from(buttons).find(v => v.innerText.toLowerCase().replace(/\s/g,'') === filterParam.toLowerCase().replace(/\s/g,''));
     // If the button exists, click it
     if (filterButton) { filterButton.click(); }
   }
}
}
</script>

Here is a link to my read only webflow site: Link