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. At first, the filters weren’t functioning on the home page, which I assumed is due to the absence of CMS items. However, I added the same collection on the home page too but kept them hidden by setting the display to None and now only the filters are working but nothing happens when I click on submit. Essentially, I want users to filter, submit, and see results on the Properties page. I know this would require custom code and I would really appreciate some help here.
Thank you!
Here is a Link to my Read Only Site: Link
Hey @sitegrowteam! Quick question. I see you have two forms on a slider. will both of the achieve the same result?
I can prepare the code for you, I just need to know the specifics regarding both forms.
You can also go ahead and remove the CMS Collection from the homepage, the Attributes setup is not needed as we will only generate the query params for the properties URL and CMS Filter will load the poperties page pre-filtered.
Hey Luis,
thanks for getting back to me! I’ve decided to move away from using sliders for the forms. Instead, I’ll integrate the form directly onto the header image or video on the homepage. So, if you could, please focus on preparing the code for just one form. Afterwards, I’ll have the flexibility to position it wherever I prefer within the header section of the homepage. Additionally, regarding the collection list on the homepage, I actually have two. I’ll be keeping the featured section, but the other one, which is currently hidden, will be removed.
Thanks a lot for your help. I really appreciate it!
Edit: You will see that I have already made that change. I have already removed the sliders and now, I just have a header image with one form on it.
Also, you’ll notice that aside from the properties page, I have three other pages: “For Sale,” “For Rent,” and “Off Plan.” I’m interested in integrating these pages as options in the filter form. Each of these pages already have the same filters (I didn’t add few of those filters on the home page form, and thats fine). However, I’d like to enhance the user experience by incorporating links to these pages within the form. For instance, when a user selects “For Sale” and then proceeds to select additional filters such as type and location, I want the user to be directed to the “For Sale Page” with the previously selected filters already applied and the corresponding results displayed. This feature is quite important to me, and I would be truly grateful if you could assist me in implementing it.
Similar to this:
Thank you.
Hey @sitegrowteam! This can be doable, depending on the tab we can change the URL that redirect the user.
For now, can we test this script?
This goes in the home page →
<script>
window.onload = () => {
const form = document.getElementById('filter-form');
const cityField = document.getElementById('city');
const typeField = document.getElementById('type');
const input = document.getElementById('search');
form.addEventListener('submit', (e) => {
const cityValue = cityField.value;
const cityValueParam = cityValue ? cityValue.replaceAll(' ', '+') : '';
const typeValueParam = typeField.value;
const inputValue = input.value;
const queryParam = inputValue ? inputValue.replaceAll(' ', '+') : '';
let url = '/properties';
if (cityValueParam || typeValueParam || queryParam) {
url += '?';
}
if (!cityValueParam && !typeValueParam && !queryParam) {
url = url;
} else {
if (cityValueParam) {
if (url.endsWith('?')) {
url += 'city=' + cityValueParam;
} else {
url += '&city=' + cityValueParam;
}
}
if (typeValueParam) {
if (url.endsWith('?')) {
url += 'propertytype=' + typeValueParam;
} else {
url += '&propertytype=' + typeValueParam;
}
}
if (inputValue) {
if (url.endsWith('?')) {
url += '*=' + inputValue;
} else {
url += '&*=' + inputValue;
}
}
}
// console.log(url); // For testing
window.location.href = url; // Uncomment this line to redirect to the constructed URL
});
};
</script>
And this goes on the properties page →
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
document
.querySelector('[fs-cmsfilter-field="*"]')
.dispatchEvent(new Event('input', { bubbles: true }));
},
]);
</script>
I believe there is an issue with the form being submitted please look into this, we can always bind the redirect to the “Submit” button directly.
Hello Luis,
There is great progress! Firstly, I must say, the functionality of the submit button is working brilliantly. However, there seems to be a minor issue that I’d like you to look into.
When using a single filter from the homepage, such as location, and clicking on the submit button, everything works perfectly. However, upon reaching the properties page and attempting to add more filters, especially using the “more filters” option, the applied filters start to appear multiple times. Similarly, from the homepage, when utilizing multiple filters, like location and type, upon clicking submit and arriving at the properties page, the applied filters also appear multiple times, causing some confusion and affecting the filtering process too.
I apologize if my explanation is a bit convoluted, as the bug here is a bit tricky to articulate clearly. If you have a moment to test it out yourself, I’ve hosted the website on a domain and provided a link below for your convenience.
Here are the links:
- Link 1
- Link 2 (Alternative)
- Start by using only one filter (e.g., location), then click submit. Upon reaching the properties page, try adding more filters, especially using the “more filters” option, and observe the behavior.
- Secondly, on the homepage, try utilizing all the filters, then click submit. Upon reaching the properties page, observe the behavior again.
Once we resolve this issue, let’s try implementing the additional filters for the “For Sale,” “For Rent,” and “Off Plan” pages, as previously discussed.
Thank you very much for your continued assistance.
I can see, can you please share a read-only link?
Hi Luis,
Sure! Here’s my Read-Only Link: Link
Thanks.
Edit:
Also, it seems that the form submit button isn’t functioning consistently across different devices and browsers.
Here are the specific observations I’ve made:
- On my mobile phone, the submit button doesn’t work at all, regardless of the browser used. I’ve tested it on other mobile devices, both Google Chrome and Safari, and the issue persists.
- Additionally, when attempting to open the link on other laptops using various browsers, the submit button doesn’t function at all.
This inconsistency is quite strange, and I’m not sure why it’s occurring. I kindly request that you have a look at this issue.
Here’s a link to my Read-Only: Link
Here are 2 links where the website is hosted so you can observe whats going on:
Thank you!
Hi @Support-Luis
Update: I was able to resolve the issue with the submit button. It now works reliably as expected. However, I’m still encountering the problem of repetitive display of applied filters on the properties page.
Here’s the current scenario: When a user adds a filter from the homepage and clicks on the submit button, redirecting them to the properties page, any additional filters they add get displayed in the Applied Filters section multiple times (specifically 10 times). Despite this, I’ve noticed that the multiple display of applied filters no longer affects the filtration process; everything still gets filtered perfectly.
To test this issue, start by using one or more filters (e.g., location) and click “search” on the homepage. Upon reaching the properties page, try adding more filters, especially using the “more filters” option, and observe the behavior. Please do have a look at my custom codes because I made some changes.
Furthermore, once we resolve this issue, I’d like to proceed with implementing additional filters for the “For Sale,” “For Rent,” and “Off Plan” pages, as previously discussed.
Here is a link to my Read-Only:
Here’s a link to where the website is hosted so you can observe whats going on:
Thank you very much for your continued assistance.
Hey @sitegrowteam! I finally found the bug 
We have a repeated fs-cmsfilter-element = 'list' in a hidden and nested collection list.
Can you please remove this attribute and test again?
1 Like
Hey @Finsweet Support - Luis ,
Indeed, that was the bug. It now works perfectly! Thank you so much!
Could we now proceed with integrating the “For Sale,” “For Rent,” and “Off Plan” pages as options in the homepage filter form? Each of these pages already has similar filters, and I’d like to incorporate links within the form to direct users accordingly. For instance, when a user selects “For Sale” and then proceeds to select additional filters such as type and location, I want the user to be directed to the “For Sale Page” with the previously selected filters already applied and the corresponding results displayed.
I’ll attach a screenshot of something similar to what we are trying to incorporate.
Thanks again!
hey @sitegrowteam! Of course! Can you please add the tab or structure you’ll use for users to select this field to your homepage?
1 Like
Hi Luis,
Sure! I have added the tabs: “All,” “For Sale,” “For Rent,” and “Off Plan.” The default tab is set to “All.” This means that when “All” is selected, the search button will lead to the properties page and apply the selected filters. Similarly, when “For Sale” is selected, the search button will lead to the for sale properties page and apply the filters, and so on for the rest.
I noticed that Webflow’s native tabs have something called “Tabs Content,” which is meant to contain the content for each tab and I have hidden it assuming we don’t need it. If it is required, please let me know and I’ll make it visible.
Here is the Read-Only Link: Link
Thank you!
The tab content is not needed, we can even skip the whole tab element and add radio buttons to indicate this selection.
We could use tabs in your properties page to avoid loading extra pages when a user changes these options.
Let me know if you wish to change these structures 
Hi @Support-Luis ,
I initially considered using radio buttons instead of tabs but encountered issues with the current state functionality using Finsweet Attributes, so I deleted them. I have actually used current state functionality using Finsweet Attributes somewhere on the website earlier but I just don’t know why it wasn’t working on the home page filter.
Since Webflow tabs have the current state functionality by default and are easier to style, I think we should proceed with using tabs unless you have a better suggestion.
Additionally, I considered making “For Sale,” “For Rent,” and “Off Plan” as tabs, but they are needed as separate pages. However, we can use tabs only on the properties page to filter while still keeping the other pages separate. So, on the home page filter, when “For Sale” is selected, it leads to the properties page and selects the For Sale tab and also apply any other filter that has been selected (i.e location or type).
Thank you!
Great then! I will work on the code for this setup. I’ll get back to you soon
1 Like
Great! I’ll be waiting for you.
By the way, just one question: Should I go ahead and make the changes to implement the above-mentioned structures, or should I wait for the code and your instructions to determine how everything will be done?
Hey @sitegrowteam! You can start with the structure defined above, this code will work with the current setup:
<script>
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('filter-form');
const cityField = document.getElementById('city');
const typeField = document.getElementById('type');
const input = document.getElementById('search');
const tabs = document.querySelectorAll('.w-tab-link');
form.addEventListener('submit', (e) => {
e.preventDefault(); // Prevent default form submission
const cityValue = cityField.value;
const cityValueParam = cityValue ? cityValue.replaceAll(' ', '+') : '';
const typeValueParam = typeField.value;
const inputValue = input.value;
const queryParam = inputValue ? inputValue.replaceAll(' ', '+') : '';
const currentTabIndex = Array.prototype.findIndex.call(tabs, (tab) =>
tab.classList.contains('w--current')
);
let url = '/properties';
function generateTabURL(index) {
const urls = [url, '/properties-for-sale', '/properties-for-rent', '/off-plan-properties'];
if (index >= 0 && index < urls.length) {
url = urls[index];
} else {
console.log('An error occurred');
}
}
if (currentTabIndex !== -1) {
generateTabURL(currentTabIndex);
}
if (cityValueParam || typeValueParam || queryParam) {
url += '?';
}
if (cityValueParam) {
url += (url.includes('?') ? '&' : '') + 'city=' + cityValueParam;
}
if (typeValueParam) {
url += (url.includes('?') ? '&' : '') + 'propertytype=' + typeValueParam;
}
if (inputValue) {
url += (url.includes('?') ? '&' : '') + '*=' + inputValue;
}
// console.log(url); // For testing
window.location.href = url; // Uncomment this line to redirect to the constructed URL
});
});
</script>
You will need to add this code to all the new available pages
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
document
.querySelector('[fs-cmsfilter-field="*"]')
.dispatchEvent(new Event('input', { bubbles: true }));
},
]);
</script>
Let me know how it goes!
1 Like
Hi @Support-Luis,
This works perfectly with the current setup and gives me exactly what I initially needed. Thank you so much! If I need to implement the above-mentioned structures later, I will let you know, but for now, I will stick with this.
Thanks again!
1 Like
Hi @Support-Luis,
There’s something else I would like to implement on all the search bars to make them more effective. For example, when the user starts typing, I want suggestions to pop up below, allowing them to select from the options.
I have created a new collection called “Locations” and referenced it to the “Properties” collection so I can always select one from the locations when creating a property. Basically, I want it so that when the user starts typing, suggestions similar to what they are typing appear below, and they can click on any to search. See the attached screenshot for an example.
Thank you!
