Using Search API Ranges Module In Drupal 7

/ By / 3 minutes of reading / 14 Comments

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.

Fig 1.1

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.

Getting Started

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

Setup Facet

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.

Fig 1.2

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”.

Fig 1.3

3. Click on the Facets tab in the top right corner and check the “Comment count” checkbox and click on “Save changes”.

Fig 1.4

4. Click on the Status tab in the top right corner and make sure all your content has been indexed.

Fig 1.5

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.

Fig 1.6

Configure Facet

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”.

Fig 1.7

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”.

Fig 1.8

Once you’re back on the search page the “Comment count” facet should display a slider.

Fig 1.9

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:

Fig 1.10

And here is what the “Ranges: Drop down list” facet looks like:

Fig 1.11

If you have any questions, please leave a comment.

About The Author

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

Related Posts

14 thoughts on “Using Search API Ranges Module In Drupal 7”

    1. ivan

      I have never had a need to change the label, but I would look at the two following options.

      1. Override the “text-range” form element in the “search_api_ranges_block_slider_view_form” function.

      http://drupalcode.org/project/search_api_ranges.git/blob/refs/heads/7.x-1.x:/search_api_ranges.module#l235


      $form['text-range'] = array(
      '#markup' => '

      '
      . t(
      '!field_name ranges from !prefix_' . $variables['range_field']
      . '@from!suffix_' . $variables['range_field'] . ' to !prefix_'
      . $variables['range_field'] . '@to!suffix_' . $variables['range_field'],
      array(
      '!field_name' => t($variables['name']),
      '@from' => number_format($variables['min'], 0),
      '@to' => number_format($variables['max'], 0),
      '!prefix_' . $variables['range_field'] => $variables['prefix'],
      '!suffix_' . $variables['range_field'] => $variables['suffix'],
      )
      ) . '

      ',
      );

      2. Or use String Overrides module (https://drupal.org/project/stringoverrides) to modify the string in the “text-range” form element.

      Reply
  3. Bruce

    I just stumbled in here by accident, and I totally need to configure a search function like this on an Ubercart installation!! Before I jump into it, will this work on an Ubercart site, do you know? Drupal 7 and Ubercart 3.x

    Thanks!

    Reply
    1. ivan

      I have never used this module to filter Ubercart products. That being said, this module is not tied to Drupal Commerce.

      The module allows you to filter entities using decimal or integer entity properties. As long as Ubercart exposes product price as an entity property, it should work.

      Try it out. 🙂

      Reply
  4. sen

    Once we slide from right to left, and the page refreshes, the search range lost its original maximum value, and the slider is unable to slide back to the original maximum value. Is there a way to fix this problem.
    for example, if we slide from 99 to 50, and the page refreshes, the maximum value for the slider become 50, rather than 99, so we are unable to slide to 99 again.

    Reply
  6. Alice

    Hi Ivan, I was wondering if this widget can also be used on node post date to filter the nodes between a range. Since Search API does not support date filter. Can you tell something about it?

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top