I have a filter form on a product showcase page to filter out cars, all the filters on this page work fine, for the filters I am using FinSweet CMS filter.
The problem I am having is I have the same filter form on the home page, so that customers can filter from the home page and once they hit the submit button they should then be redirected to the showcase page with all the relevant filters applied to that page.
I have 3 Select Elements which include the filter options; Transmission, Engine Size, and Price Range. The Transmission and Engine Size filters are working fine after being redirected from the home page to the product showcase page, but for some reason the Price Range filter still isn’t doing anything.
I used Javascript on the home page to make the filter for redirect work (Code below). I am hoping someone can help me with any fixes or extra code which I need to get the Price Range filter working.
The showcase page is named ‘Buy’ on the navigation. (I have added a Read-Only link below)
Here is the Javascript I am using:
<script>
document.querySelector('#form-button').addEventListener('click', function(event) {
event.preventDefault();
var transmission = document.querySelector('#Transmission-2').value;
var engineSize = document.querySelector('#engine').value;
var priceRange = document.querySelector('#price-range').value;
console.log('Transmission:', transmission);
console.log('Engine Size:', engineSize);
console.log('Price Range:', priceRange);
var params = [];
if (transmission) {
params.push(`transmission=${encodeURIComponent(transmission)}`);
}
if (engineSize) {
params.push(`engine_size=${encodeURIComponent(engineSize)}`);
}
if (priceRange) {
params.push(`price=${encodeURIComponent(priceRange)}`);
}
var queryString = params.length > 0 ? '?' + params.join('&') : '';
window.location.href = '/showroom' + queryString;
});
</script>
Here is my site Read-Only: (Webflow - Copy of Apex Automotive)