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