Is it possible to create a "Tyre Search" function in Webflow that uses three dropdown boxes to select filters and displays the filtered results from the "Tyres" CMS collection on a separate page?
Published on
September 22, 2023
Yes, it is possible to create a "Tyre Search" function in Webflow that uses three dropdown boxes to select filters and displays the filtered results from the "Tyres" CMS collection on a separate page. Here's how you can accomplish this:
- Set up your "Tyres" CMS collection:
- In your Webflow project, go to the CMS tab and create a new collection called "Tyres".
- Add relevant fields to your collection, such as "Brand", "Size", and "Type". Make sure to add sample data to these fields for testing purposes.
- Create a new page for the "Tyre Search" function:
- In the Pages tab, create a new page called "Tyre Search" or any name you prefer.
- Design the layout of this page as per your requirements, including the three dropdown boxes.
- Add dropdown fields:
- In the Elements panel, drag and drop three Dropdown elements onto the page.
- Double-click each dropdown element to edit its options. For example, you can set the first dropdown to display the "Brand" options from the "Tyres" collection. Repeat this step for the other two dropdowns, selecting "Size" and "Type" options accordingly.
- Set up filtering and display:
- Select the page element where you want to display the filtered results. This can be a Collection List, a Grid, or any other element.
- In the settings panel for this element, choose your "Tyres" CMS collection as the data source.
- Set the filters to match the selected options from the dropdowns. For example, you can add a filter for "Brand" that equals the value of the first dropdown, and similarly for "Size" and "Type" filters.
- Preview the page and test the dropdowns to see if the filtered results are displayed correctly.
- Add interactions (optional):
- If you want to enhance the user experience, you can add interactions to the dropdowns, so that the filtered results update dynamically as the user selects different options.
- In the Interactions panel, create a new interaction for each dropdown. Set a "Change" trigger and add an action that filters the results based on the selected option. Make sure to target the element displaying the filtered results.
- Set up navigation:
- To display the filtered results on a separate page, you can create a link or button on the "Tyre Search" page that leads to another page where the filtered results are displayed.
- In the Navigator panel, select the link or button you created and go to the Link settings. Choose the destination page where you want to display the filtered results.
By following these steps, you can create a "Tyre Search" function in Webflow using three dropdown boxes to select filters and displaying the filtered results from the "Tyres" CMS collection on a separate page.
Additional Questions:
- How can I create dropdown menus in Webflow?
- Can I use interactions to filter CMS collections in Webflow?
- Is it possible to design custom search functions in Webflow?