Effortless Search Integration
for Symfony Projects

Installation

Add mezcalito/ux-search to your composer.json file:

composer require mezcalito/ux-search

Register and configure the bundle

If you are using Symfony Flex, the following steps should be done automatically. Otherwise, follow the instructions.

Register the bundle

Inside config/bundles.php, add the following line:

// config/bundles.php

return [
    // ...
    Mezcalito\UxSearchBundle\MezcalitoUxSearchBundle::class => ['all' => true],
];

Configuration

To configure the bundle, add the following configuration to your config/packages/mezcalito_ux_search.yaml file. This example demonstrates how to set up a Meiliseach adapter:

mezcalito_ux_search:
    default_adapter: 'default'
    adapters:
        default: '%env(MEZCALITO_UX_SEARCH_DEFAULT_DSN)%'
        orm: '%env(MEZCALITO_UX_SEARCH_ORM_DSN)%'

Available adapter

For now, only 2 adapters are available: Meilisearch and Doctrine.

Read the Meilisearch part docs and the Doctrine part docs to learn about the configuration options available for each adapter.

You can also create your own Adapter to use other provider.

Usage

To use the bundle, create your first Search. To do this, just use the make:search command and follow indications.

php bin/console make:search

In the case of Meilisearch, you need to specify the name of the index to use, and for Doctrine, the FQCN of the entity to use.

By default, the name of your search will be the name of your class with the Search suffix removed. You can change this by specifying a custom name.

Also, by default, the Adapter used is the one specified in the configuration under default_adapter. You can specify the name of the Adapter to use, for example, if you have multiple Search instances that use different Adapters.

After that, you have a fully functional simple search. Feel free to check the documentation to customize your search (adding facets, sorting, ...) or if you prefer not to use the maker.

Render a Search

To render a search in your Twig template, you can use the Mezcalito:UxSearch:Layout, you will then have a default rendering provided by the bundle.

Using compnent function

{{ component('Mezcalito:UxSearch:Layout', { name: 'listing' }) }}

Using HTML-like Syntax

<twig:Mezcalito:UxSearch:Layout name="listing"/>

In both cases, replace listing with the name of search configuration.

Default layout component

<div {{ attributes.defaults({
  'class': 'ux-search',
  'data-controller': 'ux-search',
  'data-loading': 'addClass(ux-search--is-loading)'
}) }}>
    {% block content %}
        <div class="ux-search__inner">
            <div class="ux-search__form">
                {% block form %}
                    <twig:Mezcalito:UxSearch:SearchInput />
                {% endblock %}
            </div>
        
            <div class="ux-search__toolbar">
                {% block toolbar %}
                    <twig:Mezcalito:UxSearch:CurrentRefinements/>
                    <twig:Mezcalito:UxSearch:ClearRefinements />
                    <twig:Mezcalito:UxSearch:SortBy/>
                {% endblock %}
            </div>
        
            <div class="ux-search__facets">
                {% block facets %}
                    {% for facet in search.facets %}
                        <twig:Mezcalito:UxSearch:Facet :property="facet.property" />
                    {% endfor %}
                {% endblock %}
            </div>
        
            <div class="ux-search__listing">
                {% block listing %}
                    <div class="ux-search__stats">
                        {% block stats %}
                            <twig:Mezcalito:UxSearch:TotalHits/>
                        {% endblock %}
                    </div>
            
                    {% block hits %}
                        <twig:Mezcalito:UxSearch:Hits />
                    {% endblock %}
            
                    {% block pagination %}
                        <twig:Mezcalito:UxSearch:Pagination />
                    {% endblock %}
                {% endblock %}
            </div>
        </div>
    {% endblock %}
</div>

Customization

You can tailor the behavior and appearance according to your needs by overriding default component or implementing custom logic. This allows you to adapt the bundle to your specific use cases and requirements.