Style the sort by and add hit count

Setono · Jul 11, 2024 · 3f08848 · 3f08848
1 parent 8d89627
commit 3f08848
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/Resources/views/search/index.html.twig b/src/Resources/views/search/index.html.twig
@@ -14,7 +14,14 @@
                     <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">
-                    {{ form_widget(searchForm.sort) }}
+                    <div class="ui grid">
+                        <div class="eight wide column">
+                            {{ searchResult.hitsCount }} results found
+                        </div>
+                        <div class="eight wide right aligned column">
+                            {{ form_widget(searchForm.sort) }}
+                        </div>
+                    </div>
                     <div class="ui three cards">
                         {% for item in items %}
                             {{ include('@SyliusShop/Product/_box.html.twig', { product: item }) }}

diff --git a/tests/Application/templates/bundles/SetonoSyliusMeilisearchPlugin/search/index.html.twig b/tests/Application/templates/bundles/SetonoSyliusMeilisearchPlugin/search/index.html.twig
@@ -11,6 +11,9 @@
             text-align: center;
         }
 
+        /**
+         * Facets
+         */
         #facets {
             display: flex;
             flex-direction: column;
@@ -48,5 +51,18 @@
             font-size: 14px !important;
             cursor: pointer;
         }
+
+        /**
+         * Sort
+         */
+        #sort {
+            padding: 0 !important;
+            margin: 0 !important;
+            text-align-last: right;
+        }
+
+        #sort option {
+            direction: rtl;
+        }
     </style>
 {% endblock %}