Skip to content
  • Documentation >
  • Templating >
  • Layout >
  • Add search form to front page

Add search form to front page

You can add a search form to selected parts of your front page and decide which parts of the form, such as filters, are rendered.

This example shows how to add a basic search bar to the top of every page and to configure search form and result rendering.

First, prepare a general layout template in a templates/themes/<theme_name>/pagelayout.html.twig file, and include a search bar in this template:

1
2
3
{% include '@ibexadesign/parts/search_bar.html.twig' %}
{% block content %}
{% endblock %}

Then, make sure that pagelayout.html.twig is included in your view configuration:

1
2
3
4
5
ibexa:
    system:
        site_group:
            page_layout: '@ibexadesign/pagelayout.html.twig'
            search_view:

The parts/search_bar.html.twig template uses the built-in SearchController to manage the search:

1
2
3
<div class="search-bar">
    {{ render(controller('Ibexa\\Bundle\\Search\\Controller\\SearchController::searchAction')) }}
</div>

You can now go to the front page of your installation. An unstyled search bar appears at the top of the page.

Customize search result page

Search results are shown in the /search route. You can go directly to <yourdomain>/search to view a full search page.

Select the template that is used on this page with the following configuration:

1
2
3
4
5
6
7
8
9
ibexa:
    system:
        site_group:
            page_layout: '@ibexadesign/pagelayout.html.twig'
            search_view:
                full:
                    default:
                        template: "@ibexadesign/full/search.html.twig"
                        match: [ ]

Now, add the full/search.html.twig template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{% block content %}
    <div>
        <div>
            <section>
                {% include '@ibexadesign/parts/search_form.html.twig' with { form: form } %}

                {% if results is defined %}
                    <div>
                        <div>{{ 'search.header'|trans({'%total%': pager.nbResults})|desc('%total% search result(s):') }}</div>
                    </div>

                    {% if results is empty %}
                        <div>
                            <table>
                                <tr>
                                    <td colspan="4">
                                        <span>{{ 'search.no_result'|trans({'%query%': form.vars.value.query})|desc('No results found for "%query%".') }}</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    {% else %}
                        <h2>{{ 'search.name'|trans|desc('Name') }}</h2>
                        <ul>
                            {% for row in results %}
                                <li>
                                    <a href="{{ path('ibexa.content.view', {
                                        'contentId': row.contentId,
                                        'languageCode': row.translation_language_code,
                                    }) }}">{{ row.name }}</a>
                                </li>
                            {% endfor %}
                        </ul>

                        {% if pager.haveToPaginate %}
                            <div>
                                {{ pagerfanta(pager, '', {'pageParameter': '[search][page]'}) }}
                            </div>
                        {% endif %}
                    {% endif %}
                {% endif %}
            </section>
        </div>
    </div>
{% endblock %}

This template replaces the default table that displays search results with a simple unnumbered list.

Render search form

In the template above, line 5 includes a separate template for the search form. Create the parts/search_form.html.twig file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{ form_start(form) }}

<div>
    {{ form_row(form.query) }}
    <button type="submit">
        {{ 'search.search'|trans|desc('Search') }}
    </button>
</div>

{{ form_end(form, {'render_rest': false}) }}

This template renders only a basic query field and a submit button. 'render_rest': false ensures that the fields you do not explicitly add to the template are not rendered (in this case, date selection, content type, and so on).