Style the search results page

src/Form/Builder/CheckboxFacetFormBuilder.php

@@ -18,6 +18,7 @@ public function build(FormBuilderInterface $builder, string $name, array $values
                 '%count%' => $values['true'],
             ],
             'required' => false,
+            'block_prefix' => 'setono_sylius_meilisearch_facet_checkbox',
         ]);
     }
 

src/Form/Builder/ChoiceFacetFormBuilder.php

@@ -22,6 +22,7 @@ public function build(FormBuilderInterface $builder, string $name, array $values
             'expanded' => true,
             'multiple' => true,
             'required' => false,
+            'block_prefix' => 'setono_sylius_meilisearch_facet_choice',
         ]);
     }
 

src/Resources/views/facets_theme.html.twig

@@ -0,0 +1,23 @@
+{% block setono_sylius_meilisearch_facet_checkbox_row %}
+    <div class="facet facet-checkbox">
+        {{ form_label(form) }}
+        <ul>
+            <li>{{- form_widget(form) -}}{{ form_label(form) }}</li>
+        </ul>
+
+    </div>
+{% endblock %}
+
+{% block setono_sylius_meilisearch_facet_choice_row %}
+    <div class="facet facet-choice">
+        {{ form_label(form) }}
+        <ul>
+            {%- for child in form %}
+                <li>
+                    {{- form_widget(child) -}}
+                    {{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
+                </li>
+            {% endfor -%}
+        </ul>
+    </div>
+{% endblock %}

src/Resources/views/search/index.html.twig

@@ -1,17 +1,17 @@
 {# @var items \Sylius\Component\Core\Model\ProductInterface[] #}
 {% extends '@SyliusShop/layout.html.twig' %}
 
-{% form_theme searchForm '@SyliusShop/Form/theme.html.twig' %}
+{% form_theme searchForm '@SetonoSyliusMeilisearchPlugin/facets_theme.html.twig' %}
 
 {% block content %}
-    <h1 class="ui monster section dividing header">
-        Search results
-    </h1>
+    <h1>Search results</h1>
     {% if items|length > 0 %}
         <div class="ui stackable grid">
             <div class="four wide column">
-                {{ form(searchForm, { 'attr': { 'id': 'search-form', 'class': 'ui form' } }) }}
-                <button class="ui button" type="submit" form="search-form">{{ 'setono_sylius_meilisearch.form.search.update_filter'|trans }}</button>
+                {{ form_start(searchForm, { 'attr': { 'id': 'search-form', 'class': 'facets' } }) }}
+                {{ form_end(searchForm) }}
+
+                <button class="ui button" type="submit" form="search-form" style="margin-top: 10px">{{ 'setono_sylius_meilisearch.form.search.update_filter'|trans }}</button>
             </div>
             <div class="twelve wide column">
                 <div class="ui three cards">

tests/Application/templates/bundles/SetonoSyliusMeilisearchPlugin/search/index.html.twig

@@ -0,0 +1,52 @@
+{% extends '@!SetonoSyliusMeilisearchPlugin/search/index.html.twig' %}
+
+{% block stylesheets %}
+    {{ parent() }}
+
+    <style>
+        [data-route="setono_sylius_meilisearch_shop_search"] h1 {
+            font-size: 3em;
+            max-width: 800px;
+            margin: 50px auto 120px auto;
+            text-align: center;
+        }
+
+        .facets {
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+        }
+
+        .facet > label {
+            font-size: 14px !important;
+            text-transform: uppercase;
+            font-weight: bold;
+            border-bottom: 1px solid #cacaca;
+            display: block !important;
+            padding: 0 0 7px 0 !important;
+            margin: 0 0 7px 0 !important;
+        }
+
+        .facet ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 7px;
+        }
+
+        .facet li {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .facet li label {
+            margin: 0 !important;
+            padding: 0 !important;
+            font-size: 14px !important;
+            cursor: pointer;
+        }
+    </style>
+{% endblock %}