How to Add a Slider Search to Drupal
One of our customers was setting up a Drupal Commerce site and wanted to add a slider search.
Here’s an example of a slider search in action:
There are a lot of steps involved in this process, but it’s worth the effort. This tutorial will use the default search, without relying on Apache Solr or alternatives.
Step #1: Set up your data
Before you start setting up your search, you need to populate your site with data.
You need to decide which field your slider will operate on. In this example, I’m going to search on an Integer field called “Movie length”. This will allow people to find movies of a certain length.
Step #2. Install the modules
In addition to common Drupal modules such as Views and CTools, you will need to install and enable these four search modules.
Step #3. Tell Drupal what data will be searched
Now we’re going to tell Drupal what content we want indexed for this search.
- Go Configuration > Search API
- Click on the “Add server” link.
- Server name: Choose a name for your server
- Service class: Database service
- Click “Create Server” when you’re done.
- Go to Configuration > Search API
- Click on the “Add index” link
- Index name: Choose a name for your index.
- Item type: Node
- Bundles: Pick the content types you want in your filter
- Server: Choose the server you created in the previous step.
- Click “Create index” when you’re finished.
- Choose the fields you want to make available for this search. In this example, I choose Title and Movie Length.
- Click the “Save changes” button.
- Click the “View” tab in the top-right corner of the screen.
- Click the “Index now” button.
We’ve now completed a important step. We’ve now told Drupal exactly what content we want to search, and we’ve run the index so that the content is now searchable.
Step #4. Use Views to create a search results page
We need Views in order to create the main page with our search results.
- Go to Structure > Views > Add new view.
- View name: Enter a name
- Show: Choose the index you created in Step 3
- Display format: Unformatted list of Rendered entity
- Click the “Continue & edit” button.
- Click “Add” next to Filter Criteria.
- Choose the fields you want to allow people to search on. Here I choose “Fulltext search” and of course, the “Movie length”.
- For both of those filter criteria, check the box “Expose this filter to visitors, to allow them to change it”.
- Save your view.
- Go to the front of your site to visit your view.
- Test the search boxes. Hopefully the search works and you can see that your text was successfully indexed.
Step #5. Create the slider search
Now we’re ready for the final step – creating the slider search.
- Go to Configuration > Search API.
- Click “Facets” in the dropdown menu next to your index.
- Check the box next to the field you want to use for the slider.
- Click “Save configuration”
- Go to Structure > Blocks and publish the Facet API block:
- Go to the search page that you created with Views in Step 4. It’s important to remember that this block will only appear on search pages.
- Click “Configure facet display” from the cog on your new search block:
- Display widget: Slider
At this point I found an error message, “The widget does not support the term query type”. This is a bug in the Facet Slider module. I managed to solve this bug by using this patch. If you’re unsure how to add patches, I recommend the Patch Manager module.
If that patch has been successfully applied, you should be able to save your block and your slider search will be working!
This tutorial relies partly on the work of WebWash, so thanks to them.
