MAGE-744 Add configuration for debounce and min char length on autocomplete

Author: cammonro

Block/Configuration.php

@@ -164,7 +164,9 @@ public function getConfiguration()
                 'nbOfCategoriesSuggestions' => $config->getNumberOfCategoriesSuggestions(),
                 'nbOfQueriesSuggestions' => $config->getNumberOfQueriesSuggestions(),
                 'isDebugEnabled' => $config->isAutocompleteDebugEnabled(),
-                'isNavigatorEnabled' => $config->isAutocompleteNavigatorEnabled()
+                'isNavigatorEnabled' => $config->isAutocompleteNavigatorEnabled(),
+                'debounceMilliseconds' => $config->getAutocompleteDebounceMilliseconds(),
+                'minimumCharacters' => $config->getAutocompleteMinimumCharacterLength()
             ],
             'landingPage' => [
                 'query' => $this->getLandingPageQuery(),

Helper/ConfigHelper.php

@@ -45,6 +45,8 @@ class ConfigHelper
     public const MIN_NUMBER_OF_RESULTS = 'algoliasearch_autocomplete/autocomplete/min_number_of_results';
     public const RENDER_TEMPLATE_DIRECTIVES = 'algoliasearch_autocomplete/autocomplete/render_template_directives';
     public const AUTOCOMPLETE_MENU_DEBUG = 'algoliasearch_autocomplete/autocomplete/debug';
+    public const AUTOCOMPLETE_DEBOUNCE_MILLIS = 'algoliasearch_autocomplete/autocomplete/debounce_millis';
+    public const AUTOCOMPLETE_MINIMUM_CHAR_LENGTH = 'algoliasearch_autocomplete/autocomplete/minimum_char_length';
 
     public const PRODUCT_ATTRIBUTES = 'algoliasearch_products/products/product_additional_attributes';
     public const PRODUCT_CUSTOM_RANKING = 'algoliasearch_products/products/custom_ranking_product_attributes';
@@ -933,6 +935,24 @@ public function isAutocompleteDebugEnabled($storeId = null)
         return $this->configInterface->isSetFlag(self::AUTOCOMPLETE_MENU_DEBUG, ScopeInterface::SCOPE_STORE, $storeId);
     }
 
+    public function getAutocompleteDebounceMilliseconds($storeId = null): int
+    {
+        return (int) $this->configInterface->getValue(
+            self::AUTOCOMPLETE_DEBOUNCE_MILLIS,
+            ScopeInterface::SCOPE_STORE,
+            $storeId
+        );
+    }
+
+    public function getAutocompleteMinimumCharacterLength($storeId = null): int
+    {
+        return (int) $this->configInterface->getValue(
+            self::AUTOCOMPLETE_MINIMUM_CHAR_LENGTH,
+            ScopeInterface::SCOPE_STORE,
+            $storeId
+        );
+    }
+
     /**
      * @param $originalIndexName
      * @param $storeId

etc/adminhtml/system.xml

@@ -243,6 +243,30 @@
                         <field id="is_popup_enabled">1</field>
                     </depends>
                 </field>
+                <field id="debounce_millis" translate="label comment" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <validate>validate-digits</validate>
+                    <label>Debounce requests</label>
+                    <comment>
+                        <![CDATA[
+                            The minimal time (in milliseconds) that should elapse as users type their search query before a request is sent to the Algolia Search API. Default value is 300.
+                        ]]>
+                    </comment>
+                    <depends>
+                        <field id="is_popup_enabled">1</field>
+                    </depends>
+                </field>
+                <field id="minimum_char_length" translate="label comment" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <validate>validate-digits</validate>
+                    <label>Minimum query length</label>
+                    <comment>
+                        <![CDATA[
+                            The minimal number of characters required for a search term before a request is sent to the Algolia Search API. If set to 0 then results will be fetched on first keystroke. Default value is 0.
+                        ]]>
+                    </comment>
+                    <depends>
+                        <field id="is_popup_enabled">1</field>
+                    </depends>
+                </field>
             </group>
         </section>
         <section id="algoliasearch_instant" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">

etc/config.xml

@@ -12,6 +12,8 @@
                 <sections><![CDATA[{"_1600351750374_374":{"name":"pages","label":"Pages","hitsPerPage":"2"}}]]></sections>
                 <excluded_pages><![CDATA[{"_1600351757831_831":{"attribute":"no-route"}}]]></excluded_pages>
                 <navigator>1</navigator>
+                <debounce_millis>300</debounce_millis>
+                <minimum_char_length>0</minimum_char_length>
             </autocomplete>
         </algoliasearch_autocomplete>
         <algoliasearch_instant>

view/frontend/web/autocomplete.js

@@ -15,8 +15,8 @@ define(
     function ($, algoliaBundle, pagesHtml, categoriesHtml, productsHtml, suggestionsHtml, additionalHtml) {
 
         const DEFAULT_HITS_PER_SECTION = 2;
-        const DEBOUNCE_MS = 300;
-        const MIN_SEARCH_LENGTH_CHARS = 3;
+        const DEBOUNCE_MS = algoliaConfig.autocomplete.debounceMilliseconds;
+        const MIN_SEARCH_LENGTH_CHARS = algoliaConfig.autocomplete.minimumCharacters;
 
         // global state
         let suggestionSection = false;