Joodeo on Facebook Joodeo on Twitter
BACK to SITE

Theming the search form of the Search API Pages Drupal module

Theming the search form of the Search API Pages Drupal module

This week I have been getting to grips with the Search API module within Drupal to gain access to a better specified search engine for Drupal, specifically one that can index more than just the Title and Body fields of all nodes. This led me to the excellent Search API module and all of it's contributed extension modules.

The site I have been working on is using the Bootstrap theme which employs Twitter Bootstrap 3 as a CSS & JavaScript framework. The theme comes complete with any themed elements, including the standard Drupal search form. However, upon installing the Search API and Search API Pages modules, the standard Drupal search form is superseded by the Search API form and is therefore, no longer themed by the Bootstrap theme.

Undeterred, I simply started trying to discover the correct filename for the "*.tpl.php" template file to override the theme for the search form. Sadly, it seems the search form in Search API Pages alone is not themable. After much head-scratching, I worked out that the closest parent template that could be overridden was the entire search from block. After much Googling, experimentation and research, I finally worked out how to create and populate a search form with the correct identifiers and tokens. The final version of the code (block--search-api-page.tpl.php) is shown here:

 

<?php   $kw="";
        if (isset($variables['elements']['#action'])) {
            $kwa = explode('/',$variables['elements']['#action']);
            if ($kwa[1] == "search") {
                $kw = end($kwa);
                $kwa = explode('?',$kw);
                $kw = $kwa[0];
                }
            } 
?>
<section    id="<?php print $block_html_id; ?>" 
            class="<?php print $classes; ?> 
            clearfix"<?php print $attributes; ?>>
    <form   action="/" method="post" 
            id="<?php print $variables['block_html_id']; ?>" 
            accept-charset="UTF-8">
        <div class="input-group">
            <input  placeholder="Search..." type="text" 
                class="form-control form-text" 
                value="<?php print $kw; ?>" 
                id="<?php print $variables['elements']['keys_1']['#id']; ?>" 
                name="<?php print $variables['elements']['keys_1']['#name']; ?>" 
                size="<?php print $variables['elements']['keys_1']['#size']; ?>" 
                maxlength="<?php print $variables['elements']['keys_1']['#maxlength']; ?>" />
            <span class="input-group-btn">
                <button type="submit" class="btn btn-default form-submit" 
                        id="edit-submit-1" name="op" >
                    <?php   // We can be sure that the font icons exist in CDN.
                    if (theme_get_setting('bootstrap_cdn')) {
                        print _bootstrap_icon('search');
                    } else {
                        print t('Search!');
                    } ?>
                </button>
            </span>
        </div>
        <?php print $variables['elements']['base_1']['#children']; ?>
        <?php print $variables['elements']['id']['#children']; ?>
        <?php print $variables['elements']['form_build_id']['#children']; ?>
        <?php print $variables['elements']['form_token']['#children']; ?>
        <?php print $variables['elements']['form_id']['#children']; ?>
    </form>
</section>

 

The first "if" statement simply reads the incoming form action and strips away the URL path and any URL parameters to leave the keyword that was supplied to perform the search. This is then used to populate the value of the search form as it is re-rendered in the results page. The form's text-field and button are wrapped in a <DIV> with the .input-grp class to append the button to the end of the text field using the correct markup for Bootstrap 3. Form field attributes and hidden form fields carrying the correct build identifiers for the form are created using data from the $variables array.