Add term suggesters to improve search results

webgriffe · Apr 16, 2024 · f149556 · f149556
1 parent 5833bb7
commit f149556
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 14 deletions.
diff --git a/public/greeting.js → public/instant-search.js b/public/greeting.js → public/instant-search.js
diff --git a/src/Builder/QueryBuilderInterface.php b/src/Builder/QueryBuilderInterface.php
@@ -44,4 +44,8 @@ public function buildCompletionSuggestersQuery(
         string $searchTerm,
         ?string $source = 'suggest',
     ): array;
+
+    public function buildTermSuggestersQuery(
+        string $searchTerm,
+    ): array;
 }
diff --git a/src/Builder/TwigQueryBuilder.php b/src/Builder/TwigQueryBuilder.php
@@ -211,6 +211,27 @@ public function buildCompletionSuggestersQuery(
         return $completionSuggestersQuery;
     }
 
+    public function buildTermSuggestersQuery(
+        string $searchTerm,
+    ): array {
+        $localeCode = $this->localeContext->getLocaleCode();
+        $query = $this->twig->render('@WebgriffeSyliusElasticsearchPlugin/query/term-suggesters/query.json.twig', [
+            'searchTerm' => $searchTerm,
+            'localeCode' => $localeCode,
+        ]);
+        $termSuggestersQuery = [];
+        /** @var array $queryNormalized */
+        $queryNormalized = json_decode($query, true, 512, JSON_THROW_ON_ERROR);
+        $termSuggestersQuery['suggest'] = $queryNormalized;
+
+        $this->logger->debug(sprintf(
+            'Built term suggesters query: "%s".',
+            json_encode($termSuggestersQuery, JSON_THROW_ON_ERROR),
+        ));
+
+        return $termSuggestersQuery;
+    }
+
     /**
      * @return TaxonInterface[]
      */

diff --git a/src/Client/ClientInterface.php b/src/Client/ClientInterface.php
@@ -21,6 +21,7 @@
  * @psalm-type ESQueryResult = array{took: int, timed_out: bool, _shards: array, hits: array{total: array{value: int, relation: string}, max_score: ?int, hits: array<array-key, ESHit>}, aggregations?: array<string, array|ESAggregation|ESDefaultOptionAggregation>}
  * @psalm-type ESSuggestOption = array{text: string, _index: string, _type: string, _id: string, _score: float, _source: array{suggest: array<array-key, string>}}
  * @psalm-type ESCompletionSuggesters = array<string, array<array-key, array{text: string, offset: int, length: int, options: array<array-key, ESSuggestOption>}>>
+ * @psalm-type ESTermSuggesters = array<string, array<array-key, array{text: string, offset: int, length: int, options: array<array-key, ESSuggestOption>}>>
  */
 interface ClientInterface extends LoggerAwareInterface
 {
@@ -77,4 +78,14 @@ public function completionSuggesters(
         array $query,
         array $indexes = [],
     ): array;
+
+    /**
+     * @param string[] $indexes
+     *
+     * @return ESTermSuggesters
+     */
+    public function termSuggesters(
+        array $query,
+        array $indexes = [],
+    ): array;
 }
diff --git a/src/Client/ElasticsearchClient.php b/src/Client/ElasticsearchClient.php
@@ -18,6 +18,7 @@
 /**
  * @psalm-import-type ESQueryResult from ClientInterface
  * @psalm-import-type ESCompletionSuggesters from ClientInterface
+ * @psalm-import-type ESTermSuggesters from ClientInterface
  */
 final class ElasticsearchClient implements ClientInterface
 {
@@ -233,6 +234,19 @@ public function completionSuggesters(
         return $result['suggest'];
     }
 
+    public function termSuggesters(
+        array $query,
+        array $indexes = [],
+    ): array {
+        /** @var array{took: int, timed_out: bool, _shards: array, hits: array, suggest: ESTermSuggesters} $result */
+        $result = $this->getClient()->search([
+            'index' => implode(',', $indexes),
+            'body' => $query,
+        ]);
+
+        return $result['suggest'];
+    }
+
     private function getClient(): Client
     {
         if ($this->client === null) {

diff --git a/src/Controller/SearchController.php b/src/Controller/SearchController.php
@@ -27,7 +27,7 @@
  * @psalm-suppress PropertyNotSetInConstructor
  *
  * @psalm-import-type ESSuggestOption from ClientInterface
- * @psalm-import-type ESCompletionSuggesters from ClientInterface
+ * @psalm-import-type ESTermSuggesters from ClientInterface
  */
 final class SearchController extends AbstractController implements SearchControllerInterface
 {
@@ -95,20 +95,53 @@ public function __invoke(Request $request, ?string $query = null): Response
             $page,
             $size,
         );
-        // This prevents Pagerfanta from querying ES from a template
-        /** @var ResponseInterface[] $results */
+        /**
+         * This prevents Pagerfanta from querying ES from a template
+         *
+         * @var ResponseInterface[] $results
+         */
         $results = $paginator->getCurrentPageResults();
         if (count($results) === 1) {
             $result = $results[0];
 
             return $this->redirectToRoute($result->getRouteName(), $result->getRouteParams());
         }
+        $termSuggesters = $this->client->termSuggesters(
+            $this->queryBuilder->buildTermSuggestersQuery($query),
+            $indexAliasNames,
+        );
 
         return $this->render('@WebgriffeSyliusElasticsearchPlugin/Search/results.html.twig', [
             'query' => $query,
             'paginator' => $paginator,
             'filters' => $esSearchQueryAdapter->getQueryResult()->getFilters(),
             'queryResult' => $esSearchQueryAdapter->getQueryResult(),
+            'termSuggesters' => $this->buildTermSuggesters($query, $termSuggesters),
         ]);
     }
+
+    /**
+     * @param ESTermSuggesters $termSuggesters
+     */
+    private function buildTermSuggesters(string $query, array $termSuggesters): array
+    {
+        $suggestions = [];
+        foreach ($termSuggesters as $suggestion) {
+            foreach ($suggestion as $suggestionData) {
+                $options = $suggestionData['options'];
+                if (count($options) === 0) {
+                    continue;
+                }
+                $textToReplace = $suggestionData['text'];
+                foreach ($options as $option) {
+                    $replaceTerm = $option['text'];
+                    $suggestionKey = str_replace($textToReplace, $replaceTerm, $query);
+                    $suggestionHtml = str_replace($textToReplace, '<strong>' . $replaceTerm . '</strong>', $query);
+                    $suggestions[$suggestionKey] = $suggestionHtml;
+                }
+            }
+        }
+
+        return $suggestions;
+    }
 }
diff --git a/templates/Common/Components/_attributes.html.twig b/templates/Common/Components/_attributes.html.twig
@@ -7,7 +7,7 @@
 <div class="ui fluid vertical menu">
     <a href="{{ path(app.request.attributes.get('_route'), app.request.attributes.all('_route_params')) }}"
        class="ui button">
-        Reset filters
+        {{ 'webgriffe_sylius_elasticsearch_plugin.ui.reset_filters'|trans }}
     </a>
 
     {% for filter in queryResult.filters %}

diff --git a/templates/Layout/_scripts.html.twig b/templates/Layout/_scripts.html.twig
@@ -4,4 +4,4 @@
     window.instantSearchPath = '{{ path('sylius_shop_instant_search', {query: 'placeholder'}) }}';
 </script>
 
-<script src="{{ asset('bundles/webgriffesyliuselasticsearchplugin/greeting.js') }}" defer></script>
+<script src="{{ asset('bundles/webgriffesyliuselasticsearchplugin/instant-search.js') }}" defer></script>
diff --git a/templates/Search/Result/_breadcrumb.html.twig b/templates/Search/Result/_breadcrumb.html.twig
@@ -1,5 +1,5 @@
 <div class="ui breadcrumb">
     <a href="{{ path('sylius_shop_homepage') }}" class="section">{{ 'sylius.ui.home'|trans }}</a>
     <div class="divider"> / </div>
-    <div class="active section">{{ 'sylius.ui.search'|trans }}</div>
+    <div class="active section">{{ 'webgriffe_sylius_elasticsearch_plugin.ui.search'|trans }}</div>
 </div>
diff --git a/templates/Search/Result/_content.html.twig b/templates/Search/Result/_content.html.twig
@@ -1,15 +1,21 @@
 <h1 class="ui monster section dividing header"
     style="position: relative; max-width: 800px; margin: 50px auto 120px auto; text-align: center; border: 0;">
-    Search
-    <div class="sub header">Search results for "{{ query }}"</div>
+    {{ 'webgriffe_sylius_elasticsearch_plugin.ui.search'|trans }}
+    <div class="sub header">
+        {{ 'webgriffe_sylius_elasticsearch_plugin.ui.results_for_query'|trans({'{query}': query}) }}
+    </div>
 </h1>
 
-{% if suggesters|length > 0 %}
+{% if termSuggesters|length > 0 %}
     <div class="ui section header">
-        Maybe you were looking for:
+        {{ 'webgriffe_sylius_elasticsearch_plugin.ui.maybe_you_were_looking_for'|trans }}
         <ul>
-            {% for completionSuggest in completionSuggesters %}
-                <li><a href="{{ path('sylius_shop_search', {'query': completionSuggest}) }}">{{ completionSuggest }}</a></li>
+            {% for termSuggestKey, termSuggestHtml in termSuggesters %}
+                <li>
+                    <a href="{{ path('sylius_shop_search', {'query': termSuggestKey}) }}">
+                        {{ termSuggestHtml|raw }}
+                    </a>
+                </li>
             {% endfor %}
         </ul>
     </div>

diff --git a/templates/query/completion-suggesters/query.json.twig b/templates/query/completion-suggesters/query.json.twig
@@ -1,5 +1,5 @@
 {
-    "name": {
+    "suggest": {
         "prefix": "{{ searchTerm }}",
         "completion": {
             "field": "suggest",

diff --git a/templates/query/term-suggesters/query.json.twig b/templates/query/term-suggesters/query.json.twig
@@ -0,0 +1,9 @@
+{
+    "suggest": {
+        "text": "{{ searchTerm }}",
+        "term": {
+            "field": "name.{{ localeCode }}",
+            "suggest_mode" : "missing"
+        }
+    }
+}
diff --git a/translations/messages.it.yaml b/translations/messages.it.yaml
@@ -3,4 +3,7 @@ webgriffe_sylius_elasticsearch_plugin:
         filterable:
             label: 'Usa come filtro in pagina categoria e ricerca'
     ui:
-        results_for_query: 'Risultati per {query}:'
+        maybe_you_were_looking_for: 'Forse stavi cercando:'
+        results_for_query: 'Risultati per "{query}":'
+        search: 'Ricerca'
+        reset_filters: 'Resetta filtri'