Personalizar lista de Facet API

La búsqueda en Drupal utilizando Facet API potencia la usabilidad y reduce el tiempo que a un usuario le toma encontrar lo que busca... o entender que lo que busca no existe.

Como tantos otros desarrollos con Drupal, una vez más se trabaja con un subtheme de Bootstrap. Y como siempre, se busca la consistencia de los elementos que se utilizan en cada linea del sitio.

El objetivo esta vez es lograr que los blocks de Facet API se visualicen como muestra Bootstrap en la sección List Group. Si seguimos el artículo de List Group encontraremos otro componente llamado Badges.

En el código del archivo facetapi.theme.inc encontraremos las funciones que podrán ser implementadas en nuestro subtheme de Bootstrap.

• theme_facetapi_link_active
• theme_facetapi_link_inactive
• theme_facetapi_deactivate_widget

Antes de ir al código, echemos un vistazo al resultado final

En este caso, el nombre del theme es corporate (cada uno modifique por el que corresponda)

theme_facetapi_link_active

function corporate_facetapi_link_active($variables) {

  // Sanitizes the link text if necessary.
  $sanitize = empty($variables['options']['html']);
  $link_text = ($sanitize) ? check_plain($variables['text']) : $variables['text'];

  // Theme function variables fro accessible markup.
  // @see http://drupal.org/node/1316580
  $accessible_vars = array(
    'text' => $variables['text'], 
    'active' => TRUE,
  );
  
  $variables['text']  = '<span class="pull-right danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>';
  $variables['text'] .= $link_text;
  
  $variables['options']['html'] = TRUE;

  array_push($variables['options']['attributes']['class'], "list-group-item");

  return theme_link($variables);
}

theme_facetapi_link_inactive

function corporate_facetapi_link_inactive($variables) {
  // Builds accessible markup.
  // @see http://drupal.org/node/1316580
  $accessible_vars = array(
    'text' => $variables['text'], 
    'active' => FALSE,
  );
  $accessible_markup = theme('facetapi_accessible_markup', $accessible_vars);

  // Sanitizes the link text if necessary.
  $sanitize = empty($variables['options']['html']);
  $variables['text'] = ($sanitize) ? check_plain($variables['text']) : $variables['text'];

  // Adds count to link if one was passed.
  if (isset($variables['count'])) {
    $variables['text'] .= '<span class="badge">' . $variables['count'] . '</span>';
  }

  // Resets link text, sets to options to HTML since we already sanitized the
  // link text and are providing additional markup for accessibility.
  $variables['text'] .= $accessible_markup;
  $variables['options']['html'] = TRUE;

  array_push($variables['options']['attributes']['class'], "list-group-item");

  return theme_link($variables);
}

theme_facetapi_deactivate_widget

function corporate_facetapi_deactivate_widget($variables) {
  return '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
}

Por último queda solo agregar la class list-group al elemento ul. Cosa que en realidad, es mucho más simple de hacer con un poco de css:

.facetapi-facetapi-links {
  margin-bottom: 20px;
  padding-left: 0;
}