Adding a custom search form to Magento

Ok, so you have a custom Magento theme (or at least a partially customised theme so far!), but now we need a custom search box.

In /app/design/frontend/your-theme/template, create catalogsearch/form.mini.phtml

<?php $helper =  $this->helper('catalogsearch'); ?>
<form id="search_mini_form" class="navbar-form navbar-right" role="search" action="<?= $helper->getResultUrl()?>" method="get">
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">
                <div class="glyphicon glyphicon-search pull-left"></div>
            </span>
            <input id="search"
                   type="text"
                   name="<?= $helper->getQueryParamName() ?>"
                   value="<?= $helper->getEscapedQueryText() ?>"
                   class="form-control"
                   maxlength="<?= $helper->getMaxQueryLength();?>"
                   placeholder="<?= $this->__('Search...') ?>" />
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default">Submit</button>
                </span>
            </div>
        </div>
    <div id="search_autocomplete" class="search-autocomplete"></div>
</form>
<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?= $this->__('Search...') ?>');
    searchForm.initAutocomplete('<?= $helper->getSuggestUrl() ?>', 'search_autocomplete');
    //]]>
</script>

Of course, if you know how, you can generate a Zend_Form and save you having to code the form by hand! 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s