Drupal 7 Custom Display Widget for Solr Search

Drupal 7 Custom Display Widget for Solr Search

Using Apache solr we can make a powerful search technology for websites. This can be done using faceted search.

Facet search allows us to make search blocks for author, category and other custom fields.

Let's assume that we need to add a select filter for width field.

Create custom (i.e example) module for the same

Add below code in info file:

files[] = plugins/facetapi/custom_widget.inc

Example code of example.module file

How to build your own facet widget?

To build our own custom facet widget, we will need to implement hook_facetapi_widgets. This will add "custom select" option in display widget option as show in screenshot.

Drupal 7 Custom Display Widget for Solr Search
<?php


/**
 * Implements hook_facetapi_widgets()
 */
function example_facetapi_widgets() {
  return array(
    'example_select' => array(
      'handler' => array(
        'label' => t('Custom Select'),
        'class' => 'CustomFacetapiWidgetSelect',
        'query types' => array('term', 'date'),
      ),
    ),
  );
}

Example code of custom_widget.inc ( plugins/facetapi/custom_widget.inc)

Here we have created custom class "CustomFacetapiWidgetSelect" which is binded from hook_facetapi_widgets function. Using this class we can fill fields value and define form which will be displayed using search block.

 

<?php


/**
 * Widget for range filtering.
 */
class CustomFacetapiWidgetSelect extends FacetapiWidget {


  /**
   * Overrides FacetapiWidget::__construct().
   *
   * Use facet machine name instead of the alias; @see FacetapiWidgetLinks.
   */
  public function __construct($id, array $realm, FacetapiFacet $facet, stdClass $settings) {
    parent::__construct($id, $realm, $facet, $settings);
    $this->key = $facet['name'];
  }


  /**
   * Renders the form.
   */
  public function execute() {


    $elements = &$this->build[$this->facet['field alias']];


    $elements = drupal_get_form('example_facetapi_widgets_select_form', $elements);
  }
}
?>

Now we will need to create custom form which will be displayed on search block.
We need to create form 'example_facetapi_widgets_select_form' as per below. Using below function we will able to display select search block as displayed in screenshot.

Here I have handled form submission through ajax callback function.

 

<?php 


/**
 * Generate form for facet.
 */
function example_facetapi_widgets_select_form($form, &$form_state, $elements) {


  // Build options from facet elements.
  $default_select_value = '';
  $options = array('' => t('- Select -'));


  foreach ($elements as $element) {


    $ele_key = serialize($element['#query']);
    if ($element['#active']) {
      $default_select_value = $ele_key;
    }
    $options[$ele_key] = $element['#markup'] . ' (' . $element['#count'] . ')';
  }


  $form['select'] = array(
    '#type' => 'select',
    '#options' => $options,
    '#attributes' => array('class' => array('custom-solr-filter-select')),
    '#default_value' => $default_select_value,
  );


  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Go'),
    '#attributes' => array('class' => array('custom-solr-filter-submit')),
    '#suffix' => '</div>',
  );


  //$form['#submit'][] = 'aq_solr_alter_facetapi_select_form_submit';


  $form['submit']['#ajax'] = array(
    'callback' => 'example_facetapi_widgets_select_form_callback',
  );


  return $form;
}


/**
 * Callback function for facetapi custom form
 * Redirect to the filtered page
 */
function example_facetapi_widgets_select_form_callback($form, $form_state) {


  //build new query
  $new_query = unserialize($form_state['values']['select']);


  //ajax redirection
  ctools_include('ajax');
  ctools_add_js('ajax-responder');
  $commands[] = ctools_ajax_command_redirect('search', 0, array('query' => $new_query));
  print ajax_render($commands); exit;
}


?>


After configuring search block to the needed page width fields filter options will be displayed as shown in the screenshot and also this will filter listing on selection particular value as shown in the screenshot.

Drupal 7 Custom Display Widget for Solr Search
Drupal 7 Custom Display Widget for Solr Search

Hope you had a better clarity with my explanation, feel free to share your feedback and keep tuned in for more blogs. Get in touch with us for any Drupal Web Development Services :)