Want to learn more about search in Drupal 7? Then check out our online video course called “Build Powerful Search Pages with Views and Search API in Drupal 7“.
The Search API ranges module allows you to easily create a search API page with a range facet. For example, you could create a search page where users can filter products based on price, by simply selecting a price range from a facet.
The Commerce Kickstart distribution uses this module for price filtering on their product search page. If you want to see the facet in action go to the Commerce Kickstart demo site and you should see the Price facet in the left sidebar.
In this tutorial we’ll setup a range facet (slider) for the “Comment count” property on content. This will allow users to filter content by the number of comments.
For this tutorial I’ll assume you have a basic search page already setup using Search API. If you have never used Search API before please read “Intro To Search API (Part 1) – How To Create Search Pages” and “Intro To Search API (Part 2) – Faceted Search” before you begin.
First, download and install Search API ranges.
If you use Drush, run the following command:
$ drush dl search_api_ranges $ drush en search_api_ranges
In this section, we’ll use the “Ranges: Min/Max UI Slider” facet on the “Comment count” property. This allows users to filter by the amount of comments on a piece of content.
First, we’ll have to add the “Comment count” property to our index. If this property is not indexed, then the facet will not appear.
1. Go to Configuration -> “Search API” and click on the index edit link, then fields.
In this example I’m using the standard “Default node index” index that Search API creates when you install the module.
2. Scroll down on the fields page and check the “Comment count” property checkbox, then click on “Save changes”.
3. Click on the Facets tab in the top right corner and check the “Comment count” checkbox and click on “Save changes”.
4. Click on the Status tab in the top right corner and make sure all your content has been indexed.
All we have done is add the “Comment count” property to our index and enabled the corresponding facet for that property.
5. Finally, go to Structure -> Blocks and assign “Facet API: Search service: Default node index : Comment count” to a region.
At this point you should have a search page with content and the facet should appear in a region. By default our facet is using the Links display widget, however we need to change the display widget to “Ranges: Min/Max UI Slider”.
1. Hover over the facet and click on the cogwheel then click on “Configure facet display”.
The cogwheel will only appear if you have the core Contextual links module installed. If you installed Drupal using the standard installation profile, then this module will be installed.
2. Select “Ranges: Min/Max UI Slider” from the “Display widget” drop-down and click on “Save and go back to search page”.
Once you’re back on the search page the “Comment count” facet should display a slider.
Search API ranges also offers two other facet widgets: “Ranges: Text links” and “Ranges: Drop down list”. If you want to use any those widgets instead, simply edit the facet and select one of them.
Here is what the “Ranges: Text links” facet looks like:
And here is what the “Ranges: Drop down list” facet looks like:
If you have any questions, please leave a comment.