Create a sorting form builder

src/Document/Attribute/Sortable.php

@@ -14,9 +14,7 @@ final class Sortable
     final public const DESC = 'desc';
 
     public function __construct(
-        /**
-         * The direction of the sorting. If null, both directions are allowed
-         */
+        /** The direction of the sorting. If null, both directions are allowed */
         public readonly ?string $direction = null,
     ) {
     }

src/Document/Product.php

@@ -43,6 +43,7 @@ class Product extends Document implements UrlAwareInterface
 
     public ?float $originalPrice = null;
 
+    #[Sortable(direction: Sortable::DESC)]
     public float $popularity = 0.0;
 
     /**

src/Form/Builder/SearchFormBuilder.php

@@ -19,6 +19,7 @@ final class SearchFormBuilder implements SearchFormBuilderInterface
     public function __construct(
         private readonly FormFactoryInterface $formFactory,
         private readonly FacetFormBuilderInterface $facetFormBuilder,
+        private readonly SortingFormBuilderInterface $sortingFormBuilder,
         private readonly MetadataFactoryInterface $metadataFactory,
         private readonly Index $index,
     ) {
@@ -119,16 +120,7 @@ public function build(SearchResult $searchResult): FormInterface
 
         $searchFormBuilder->add($facetsFormBuilder);
 
-        $searchFormBuilder->add(SearchRequest::QUERY_PARAMETER_SORT, ChoiceType::class, [
-            'choices' => [
-                'Cheapest first' => 'price:asc',
-                'Biggest discount' => 'discount:desc',
-                'Newest first' => 'createdAt:desc',
-                'Relevance' => '',
-            ],
-            'required' => false,
-            'placeholder' => 'Sort by',
-        ]);
+        $this->sortingFormBuilder->build($searchFormBuilder, $metadata);
 
         $this->buildPagination($searchResult, $searchFormBuilder);
 

src/Form/Builder/SortingFormBuilder.php

@@ -0,0 +1,42 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Setono\SyliusMeilisearchPlugin\Form\Builder;
+
+use Setono\SyliusMeilisearchPlugin\Document\Attribute\Sortable as SortableAttribute;
+use Setono\SyliusMeilisearchPlugin\Document\Metadata\MetadataInterface;
+use Setono\SyliusMeilisearchPlugin\Document\Metadata\Sortable;
+use Setono\SyliusMeilisearchPlugin\Engine\SearchRequest;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+final class SortingFormBuilder implements SortingFormBuilderInterface
+{
+    public function build(FormBuilderInterface $searchFormBuilder, MetadataInterface $metadata): void
+    {
+        $choices = [];
+        foreach ($metadata->getSortableAttributes() as $sortable) {
+            foreach (self::resolveDirections($sortable) as $direction) {
+                $choices[sprintf('setono_sylius_meilisearch.form.search.sorting.%s.%s', $sortable->name, $direction)] = sprintf('%s:%s', $sortable->name, $direction);
+            }
+        }
+        $searchFormBuilder->add(SearchRequest::QUERY_PARAMETER_SORT, ChoiceType::class, [
+            'choices' => $choices,
+            'required' => false,
+            'placeholder' => 'setono_sylius_meilisearch.form.search.sorting.placeholder',
+        ]);
+    }
+
+    /**
+     * @return list<string>
+     */
+    private static function resolveDirections(Sortable $sortable): array
+    {
+        if (null === $sortable->direction) {
+            return [SortableAttribute::ASC, SortableAttribute::DESC];
+        }
+
+        return [$sortable->direction];
+    }
+}

src/Form/Builder/SortingFormBuilderInterface.php

@@ -0,0 +1,13 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Setono\SyliusMeilisearchPlugin\Form\Builder;
+
+use Setono\SyliusMeilisearchPlugin\Document\Metadata\MetadataInterface;
+use Symfony\Component\Form\FormBuilderInterface;
+
+interface SortingFormBuilderInterface
+{
+    public function build(FormBuilderInterface $searchFormBuilder, MetadataInterface $metadata): void;
+}

src/Resources/config/services/form.xml

@@ -25,13 +25,20 @@
             <tag name="setono_sylius_meilisearch.facet_form_builder" priority="80"/>
         </service>
 
+        <!-- Sorting form builder -->
+        <service id="Setono\SyliusMeilisearchPlugin\Form\Builder\SortingFormBuilderInterface"
+                 alias="Setono\SyliusMeilisearchPlugin\Form\Builder\SortingFormBuilder"/>
+
+        <service id="Setono\SyliusMeilisearchPlugin\Form\Builder\SortingFormBuilder"/>
+
         <!-- Search form builder -->
         <service id="Setono\SyliusMeilisearchPlugin\Form\Builder\SearchFormBuilderInterface"
                  alias="Setono\SyliusMeilisearchPlugin\Form\Builder\SearchFormBuilder"/>
 
         <service id="Setono\SyliusMeilisearchPlugin\Form\Builder\SearchFormBuilder">
             <argument type="service" id="form.factory"/>
             <argument type="service" id="Setono\SyliusMeilisearchPlugin\Form\Builder\FacetFormBuilderInterface"/>
+            <argument type="service" id="Setono\SyliusMeilisearchPlugin\Form\Builder\SortingFormBuilderInterface"/>
             <argument type="service" id="Setono\SyliusMeilisearchPlugin\Document\Metadata\MetadataFactoryInterface"/>
             <argument type="service" id="setono_sylius_meilisearch.index.search"/>
 

src/Resources/public/js/search.js

@@ -71,7 +71,7 @@ class SearchManager {
                 field.dispatchEvent(new CustomEvent('search:filter-changed', { bubbles: true }));
             } else if(field.name === 'p') {
                 field.dispatchEvent(new CustomEvent('search:page-changed', { bubbles: true }));
-            } else if(field.classList.contains('sort')) {
+            } else if(field.classList.contains('ssm-sort')) {
                 field.dispatchEvent(new CustomEvent('search:sort-changed', { bubbles: true }));
             }
         });

src/Resources/translations/messages.en.yaml

@@ -10,6 +10,20 @@ setono_sylius_meilisearch:
                 previous: Previous
                 next: Next
             q_placeholder: Search...
+            sorting:
+                placeholder: Sort by...
+                price:
+                    asc: "Price: low to high"
+                    desc: "Price: high to low"
+                createdAt:
+                    asc: "Oldest"
+                    desc: "Newest"
+                discount:
+                    asc: "Discount: low to high"
+                    desc: "Discount: high to low"
+                popularity:
+                    asc: "Least popular"
+                    desc: "Most popular"
         synonym:
             term: Term
             synonym: Synonym

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

@@ -89,9 +89,5 @@
             margin: 0 !important;
             text-align-last: right;
         }
-
-        .ssm-sort option {
-            direction: rtl;
-        }
     </style>
 {% endblock %}