[Filter] Fix category facet and add active filter list

Author: PierreGauthier

src/Controller/Shop/FilterController.php

@@ -81,7 +81,7 @@ public function viewMore(Request $request, string $filterField): Response
             }
         }
         $currentLocalizedCatalog = $this->catalogProvider->buildLocalizedCatalog($currentChannel, $currentLocale);
-        $request = new \Gally\Sdk\GraphQl\Request(
+        $gallyRequest = new \Gally\Sdk\GraphQl\Request(
             $currentLocalizedCatalog,
             new Metadata('product'),
             false,
@@ -93,7 +93,7 @@ public function viewMore(Request $request, string $filterField): Response
             $gallyFilters,
         );
 
-        $aggregationOptions = $this->searchManager->viewMoreProductFilterOption($request, $filterField, $optionSearch);
+        $aggregationOptions = $this->searchManager->viewMoreProductFilterOption($gallyRequest, $filterField, $optionSearch);
 
         /** @var array<string, string>$option */
         foreach ($aggregationOptions as $option) {

src/Form/Type/Filter/GallyDynamicFilterType.php

@@ -16,6 +16,7 @@
 
 use Gally\SyliusPlugin\Event\GridFilterUpdateEvent;
 use Gally\SyliusPlugin\Grid\Filter\Type\SelectFilterType;
+use Gally\SyliusPlugin\Search\ActiveFilterResolver;
 use Gally\SyliusPlugin\Search\Aggregation\Aggregation;
 use Gally\SyliusPlugin\Search\Aggregation\AggregationOption;
 use Sylius\Bundle\GridBundle\Form\Type\Filter\BooleanFilterType;
@@ -24,6 +25,7 @@
 use Sylius\Component\Locale\Context\LocaleContextInterface;
 use Sylius\Component\Taxonomy\Model\TaxonInterface;
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\RangeType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\HttpFoundation\RequestStack;
@@ -49,6 +51,18 @@ public function __construct(
 
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
+        $isTaxonPage = $this->isTaxonPage();
+        $categoryFieldAdded = false;
+
+        if ($isTaxonPage && !$this->hasCategoryAggregation()) {
+            // Gally doesn't always return a "category" aggregation on taxon listing pages (e.g. a
+            // leaf taxon with no sub-taxons), so there's no signal telling us where it would
+            // normally sit in the facet order. Placed first, right below the active filters, in
+            // that case.
+            $this->addCategoryTaxonomyAnchor($builder);
+            $categoryFieldAdded = true;
+        }
+
         foreach ($this->aggregations as $aggregation) {
             switch ($aggregation->getType()) {
                 case 'slider':
@@ -95,32 +109,122 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                         /* @var AggregationOption $option */
                         $choices[$option->getLabel()] = $option->getId();
                     }
-                    $options = [
-                        'block_prefix' => 'sylius_gally_filter_checkbox',
-                        'label' => $aggregation->getLabel(),
-                        'choices' => $choices,
-                        'expanded' => true,
-                        'multiple' => true,
-                        'search_url' => $this->buildSearchUrl($aggregation->getField()),
-                        'has_more' => $aggregation->hasMore(),
-                    ];
                     $builder->add(
                         $aggregation->getField(),
                         SelectFilterType::class,
-                        $options
+                        [
+                            'block_prefix' => 'sylius_gally_filter_checkbox',
+                            'label' => $aggregation->getLabel(),
+                            'choices' => $choices,
+                            'expanded' => true,
+                            'multiple' => true,
+                            'search_url' => $this->buildSearchUrl($aggregation->getField()),
+                            'has_more' => $aggregation->hasMore(),
+                        ]
                     );
                     break;
+                case 'category':
+                    // A taxon-scoped request is still a category browsing context even when
+                    // Gally does return this aggregation (e.g. a parent taxon whose products
+                    // span several sub-taxons): direct taxon navigation (native component) is
+                    // used either way, never the Gally query-string filter, which would produce
+                    // links "filtering" the current taxon page instead of going to the sub-taxon
+                    // page directly.
+                    if ($isTaxonPage) {
+                        $this->addCategoryTaxonomyAnchor($builder);
+                    } else {
+                        $this->addCategoryField($builder, $aggregation);
+                    }
+                    $categoryFieldAdded = true;
+                    break;
                 default:
                     break;
             }
         }
+
+        // Gally excludes the category aggregation from the response as soon as a category filter is
+        // active, so once selected the field above never reappears. Without this, submitting any
+        // other filter would silently drop the category criteria.
+        if (!$categoryFieldAdded) {
+            $categoryId = $this->getCurrentCategoryId();
+            if (null !== $categoryId) {
+                $builder->add(ActiveFilterResolver::CATEGORY_FIELD, HiddenType::class, ['data' => $categoryId]);
+            }
+        }
     }
 
     public function onFilterUpdate(GridFilterUpdateEvent $event): void
     {
         $this->aggregations = $event->getAggregations();
     }
 
+    private function isTaxonPage(): bool
+    {
+        $slug = $this->requestStack->getCurrentRequest()?->attributes->get('slug');
+
+        return \is_string($slug) && '' !== $slug;
+    }
+
+    private function hasCategoryAggregation(): bool
+    {
+        foreach ($this->aggregations as $aggregation) {
+            if ('category' === $aggregation->getType()) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * On taxon listing pages Gally never returns a "category" aggregation at all (the taxon
+     * already scopes the search), so browsing there is handled by the native Sylius taxonomy
+     * component instead (proper direct links, plus a "go level up" link), inserted as a plain
+     * form field so it renders through the same form_widget(form) call and keeps its position
+     * in the facet order (see buildForm()). The block rendering it lives in checkbox.html.twig
+     * (block "sylius_gally_filter_category_taxonomy_row").
+     */
+    private function addCategoryTaxonomyAnchor(FormBuilderInterface $builder): void
+    {
+        $builder->add(ActiveFilterResolver::CATEGORY_FIELD, HiddenType::class, [
+            'block_prefix' => 'sylius_gally_filter_category_taxonomy',
+        ]);
+    }
+
+    /**
+     * Rendered through the same SelectFilterType/autosubmit mechanism as the other facets (real
+     * radio inputs, native browser change event), just themed to look like plain links via CSS
+     * (see the "sylius_gally_filter_category" block and #searchbar .category-links rule in
+     * filters.css) since a category is single-select, not a combinable criterion.
+     */
+    private function addCategoryField(FormBuilderInterface $builder, Aggregation $aggregation): void
+    {
+        $choices = [];
+        foreach ($aggregation->getOptions() as $option) {
+            /* @var AggregationOption $option */
+            $choices[$option->getLabel()] = $option->getId();
+        }
+
+        $builder->add(ActiveFilterResolver::CATEGORY_FIELD, SelectFilterType::class, [
+            'block_prefix' => 'sylius_gally_filter_category',
+            'label' => $aggregation->getLabel(),
+            'choices' => $choices,
+            'expanded' => true,
+            'multiple' => false,
+            'data' => $this->getCurrentCategoryId(),
+        ]);
+    }
+
+    private function getCurrentCategoryId(): ?string
+    {
+        $queryParameters = $this->requestStack->getCurrentRequest()?->query->all() ?? [];
+        $criteria = \is_array($queryParameters['criteria'] ?? null) ? $queryParameters['criteria'] : [];
+        $gallyCriteria = \is_array($criteria['gally'] ?? null) ? $criteria['gally'] : [];
+        $categoryId = $gallyCriteria[ActiveFilterResolver::CATEGORY_FIELD] ?? null;
+
+        return \is_string($categoryId) && '' !== $categoryId ? $categoryId : null;
+    }
+
     private function buildSearchUrl(string $field): string
     {
         $request = $this->requestStack->getCurrentRequest();

src/Indexer/CategoryIndexer.php

@@ -119,7 +119,7 @@ public function getDocumentsToIndex(
 
     private function formatTaxon(TaxonInterface $taxon, TaxonTranslationInterface $translation, TaxonInterface $menuTaxon): array
     {
-        $parentId = '';
+        $parentId = null;
         if (null !== $taxon->getParent() && $menuTaxon->getId() !== $taxon->getId()) {
             $parentId = str_replace('/', '_', (string) $taxon->getParent()->getCode());
         }

src/Resources/config/services/search.xml

@@ -8,7 +8,10 @@
         <service id="Gally\SyliusPlugin\Search\ActiveFilterResolver">
             <argument type="service" id="request_stack" />
             <argument type="service" id="translator" />
+            <argument type="service" id="sylius.repository.taxon" />
+            <argument type="service" id="sylius.context.locale" />
             <tag name="kernel.event_listener" event="gally.grid.configure_filter" method="onFilterUpdate" />
+            <tag name="kernel.reset" method="reset" />
         </service>
 
         <service id="Gally\SyliusPlugin\Search\Finder" >

src/Resources/public/filters.css

@@ -86,31 +86,60 @@
     color: var(--bs-body-color);
 }
 
-.active-filters .active-filter-chip
+/* Category is single-select and rendered as native radio inputs (so the existing autosubmit
+   still applies unchanged), but themed to look like a plain list of links: a category is a
+   navigation, not a combinable criterion like the other facets. */
+#searchbar .category-links .form-check
+{
+    padding-left: 0;
+}
+
+#searchbar .category-links .form-check-input
+{
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+#searchbar .category-links .form-check-label
+{
+    display: inline-block;
+    padding: 0.25em 0;
+    font-weight: normal;
+    cursor: pointer;
+}
+
+#searchbar .active-filters .active-filter-chip
 {
     text-decoration: none;
     font-weight: normal;
     padding: 0.5em 0.85em;
 }
 
-.active-filters .active-filter-chip:hover
+#searchbar .active-filters .active-filter-chip:hover
 {
     background-color: var(--bs-secondary-bg-subtle, #e9ecef);
 }
 
-.active-filters .active-filter-chip-remove
+#searchbar .active-filters .active-filter-chip-remove
 {
     font-weight: bold;
 }
 
-.active-filters .active-filters-clear-all
+#searchbar .active-filters .active-filters-clear-all
 {
     font-size: 0.8em;
     color: var(--bs-secondary-color, rgba(0, 0, 0, 0.6));
     text-decoration: underline;
 }
 
-.active-filters .active-filters-clear-all:hover
+#searchbar .active-filters .active-filters-clear-all:hover
 {
     color: var(--bs-body-color);
 }

src/Resources/views/shop/events_javascript.html.twig

@@ -1,4 +1,4 @@
-{#todo : make inclusion of scripts compatible with Webpack Encore and with the new strcuture of sylius 2#}
+{# TODO: make inclusion of scripts compatible with Webpack Encore and with the new structure of sylius 2 #}
 {% for script in ['nouislider.min.js', 'range-slider.js', 'filters.js', 'search.js'] %}
     <script src="{{ asset('bundles/gallysyliusplugin/' ~ script) }}"></script>
 {% endfor %}

src/Resources/views/shop/events_stylesheets.html.twig

@@ -1,4 +1,4 @@
-{#todo : make inclusion of scripts compatible with Webpack Encore and with the new strcuture of sylius 2#}
+{# TODO: make inclusion of scripts compatible with Webpack Encore and with the new structure of sylius 2 #}
 {% for css in ['nouislider.min.css', 'slider.css', 'filters.css'] %}
     <link rel="stylesheet" href="{{ asset('bundles/gallysyliusplugin/' ~ css) }}">
 {% endfor %}

src/Resources/views/shop/form/checkbox.html.twig

@@ -12,3 +12,14 @@
         {% endif %}
     </div>
 {%- endblock sylius_gally_filter_checkbox_row %}
+
+{% block sylius_gally_filter_category_taxonomy_row -%}
+    {{ component('sylius_shop:product:show:taxonomy', {template: '@GallySyliusPlugin/shop/product/_shared/categories.html.twig'}) }}
+{%- endblock sylius_gally_filter_category_taxonomy_row %}
+
+{% block sylius_gally_filter_category_row -%}
+    <div class="{% if required %}required {% endif %}field category-links{% if (not compound or force_error|default(false)) and not valid %} error{% endif %}">
+        {{- form_label(form) -}}
+        {{- form_widget(form) -}}
+    </div>
+{%- endblock sylius_gally_filter_category_row %}

src/Resources/views/shop/grid/filter/gally_dynamic_filter.html.twig

@@ -7,9 +7,6 @@
 <div class="field mb-3">
     <div class="filters-title">{{ 'gally_sylius.ui.filters.headline'|trans }}</div>
     {{ component('gally_shop:product:active_filters', {template: '@GallySyliusPlugin/shop/product/_shared/active_filters.html.twig'}) }}
-    {% if app.request.attributes.has('slug') %}
-        {{ component('sylius_shop:product:show:taxonomy', {template: '@GallySyliusPlugin/shop/product/_shared/categories.html.twig'}) }}
-    {% endif %}
     {{ form_widget(form) }}
     {{ form_help(form) }}
     {{ form_errors(form) }}

src/Resources/views/shop/shared/components/header/search/autocomplete/results.html.twig

@@ -61,8 +61,10 @@
                     <small>{{ option_label }}</small>
                 </a>
             {% endfor %}
+        {% endif %}
 
-            <hr class="d-lg-none"/>
+        {% if products|length %}
+        <hr class="d-lg-none"/>
         {% endif %}
     </div>