Search for facet values (#1020)

Author: damcou

app/code/community/Algolia/Algoliasearch/Block/System/Config/Form/Field/Facets.php

@@ -41,6 +41,14 @@ public function __construct()
                     'label' => 'Label',
                     'style' => 'width: 100px;',
                 ),
+                'searchable' => array(
+                    'label' => 'Searchable?',
+                    'options' => array(
+                        '1' => 'Yes',
+                        '2' => 'No'
+                    ),
+                    'rowMethod' => 'getSearchable',
+                ),
             ),
             'buttonLabel' => 'Add Facet',
             'addAfter'    => false,

app/code/community/Algolia/Algoliasearch/Helper/Entity/Producthelper.php

@@ -253,7 +253,12 @@ public function setSettings($storeId, $saveToTmpIndicesToo = false)
                     $attributesForFaceting[] = $facet['attribute'];
                 }
             } else {
-                $attributesForFaceting[] = $facet['attribute'];
+                $attribute = $facet['attribute'];
+                if (array_key_exists('searchable', $facet) && $facet['searchable'] === '1') {
+                    $attribute = 'searchable('.$attribute.')';
+                }
+
+                $attributesForFaceting[] = $attribute;
             }
         }
 

app/code/community/Algolia/Algoliasearch/etc/config.xml

@@ -200,7 +200,7 @@
             <instant>
                 <replace_categories>1</replace_categories>
                 <instant_selector>.main</instant_selector>
-                <facets>a:3:{s:18:"_1432907948596_596";a:3:{s:9:"attribute";s:5:"price";s:4:"type";s:6:"slider";s:5:"label";s:5:"Price";}s:18:"_1432907963376_376";a:3:{s:9:"attribute";s:10:"categories";s:4:"type";s:11:"conjunctive";s:5:"label";s:10:"Categories";}s:17:"_1447846054032_32";a:3:{s:9:"attribute";s:5:"color";s:4:"type";s:11:"disjunctive";s:5:"label";s:6:"Colors";}}</facets>
+                <facets>a:3:{s:18:"_1432907948596_596";a:4:{s:9:"attribute";s:5:"price";s:4:"type";s:6:"slider";s:5:"label";s:5:"Price";s:10:"searchable";s:1:"2";}s:18:"_1432907963376_376";a:4:{s:9:"attribute";s:10:"categories";s:4:"type";s:11:"conjunctive";s:5:"label";s:10:"Categories";s:10:"searchable";s:1:"2";}s:17:"_1447846054032_32";a:4:{s:9:"attribute";s:5:"color";s:4:"type";s:11:"disjunctive";s:5:"label";s:6:"Colors";s:10:"searchable";s:1:"1";}}</facets>
                 <max_values_per_facet>10</max_values_per_facet>
                 <sorts>a:3:{s:18:"_1432908018844_844";a:3:{s:9:"attribute";s:5:"price";s:4:"sort";s:3:"asc";s:5:"label";s:12:"Lowest price";}s:18:"_1432908022539_539";a:3:{s:9:"attribute";s:5:"price";s:4:"sort";s:4:"desc";s:5:"label";s:13:"Highest price";}s:18:"_1433768597454_454";a:3:{s:9:"attribute";s:10:"created_at";s:4:"sort";s:4:"desc";s:5:"label";s:12:"Newest first";}}</sorts>
                 <add_to_cart_enable>1</add_to_cart_enable>

app/code/community/Algolia/Algoliasearch/etc/system.xml

@@ -402,7 +402,10 @@
                                 <![CDATA[
                                 Configure here the filtering options you want to display on your search results page.
                                 Choose Disjunctive to allow the selection of different values of a facet (e.g. hotels with 4 OR 5 stars).
-                                Choose Conjunctive to allow the selection of only one value of a facet (e.g. only "Size M").<br>
+                                Choose Conjunctive to allow the selection of only one value of a facet (e.g. only "Size M").
+                                <br>
+                                Set facet as searchable if you want your customers to be able to <a target="_blank" href="https://www.algolia.com/doc/api-reference/api-methods/search-for-facet-values/">search for facet values</a>. It's handy when a facet has a lot of values.
+                                <br>
                                 Facets' documentation: <a target="_blank" href="https://community.algolia.com/magento/doc/m1/indexing/?utm_source=magento&utm_medium=extension&utm_campaign=magento_1&utm_term=shop-owner&utm_content=doc-link#facets">https://community.algolia.com/magento/doc/m1/indexing/#facets</a>
                                 ]]>
                             </comment>

app/design/frontend/base/default/template/algoliasearch/internals/configuration.phtml

@@ -280,6 +280,7 @@ $algoliaJsConfig = array(
         'products' => $this->__('Products'),
         'searchBy' => $this->__('Search by'),
         'showMore' => $this->__('Show more products'),
+        'searchForFacetValuesPlaceholder' => $this->__('Search for other ...'),
     ),
 );
 

app/locale/en_US/Algolia_Algoliasearch.csv

@@ -70,4 +70,5 @@
 "Input", "Input"
 "Synonyms", "Synonyms"
 "One-way Synonyms", "One-way Synonyms"
-"Synonyms File", "Synonyms File"
+"Synonyms File", "Synonyms File"
+"Search for other ...","Search for other ..."

js/algoliasearch/instantsearch.js

@@ -384,7 +384,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 			}
 
 			if (facet.type === 'conjunctive') {
-				return ['refinementList', {
+                var refinementListOptions =  {
 					container: facet.wrapper.appendChild(createISWidgetContainer(facet.attribute)),
 					attributeName: facet.attribute,
 					limit: algoliaConfig.maxValuesPerFacet,
@@ -393,11 +393,14 @@ document.addEventListener("DOMContentLoaded", function (event) {
 					cssClasses: {
 						root: 'facet conjunctive'
 					}
-				}];
+				};
+
+                refinementListOptions = addSearchForFacetValues(facet, refinementListOptions);
+                return ['refinementList', refinementListOptions];
 			}
 
 			if (facet.type === 'disjunctive') {
-				return ['refinementList', {
+                var refinementListOptions = {
 					container: facet.wrapper.appendChild(createISWidgetContainer(facet.attribute)),
 					attributeName: facet.attribute,
 					limit: algoliaConfig.maxValuesPerFacet,
@@ -406,7 +409,10 @@ document.addEventListener("DOMContentLoaded", function (event) {
 					cssClasses: {
 						root: 'facet disjunctive'
 					}
-				}];
+				};
+
+                refinementListOptions = addSearchForFacetValues(facet, refinementListOptions);
+                return ['refinementList', refinementListOptions];
 			}
 
 			if (facet.type === 'slider') {
@@ -544,4 +550,17 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
 		search.addWidget(algoliaBundle.instantsearch.widgets[type](config));
 	}
+
+    function addSearchForFacetValues(facet, options) {
+        if (facet.searchable === '1') {
+            options['searchForFacetValues'] = {
+                placeholder: algoliaConfig.translations.searchForFacetValuesPlaceholder,
+                templates: {
+                    noResults: '<div class="sffv-no-results">' + algoliaConfig.translations.noResults + '</div>'
+                }
+            };
+        }
+
+        return options;
+    }
 });

skin/frontend/base/default/algoliasearch/algoliasearch.css

@@ -213,6 +213,46 @@ a.ais-current-refined-values--link:hover
   color: #666;
 }
 
+#algolia_instant_selector .ais-refinement-list--list .sbx-sffv__wrapper {
+  width: 94%;
+  margin: 0 auto 5px;
+}
+
+#algolia_instant_selector .ais-refinement-list--list .sbx-sffv__submit {
+  display: none;
+}
+
+#algolia_instant_selector .ais-refinement-list--list .sbx-sffv__reset {
+  width: 10px;
+  margin-top: -30px;
+  margin-right: 7px;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+#algolia_instant_selector .ais-refinement-list--list .sbx-sffv__reset:hover {
+  background: none;
+}
+
+#algolia_instant_selector .ais-refinement-list--list .sbx-sffv__reset svg {
+  width: 15px;
+  height: 15px;
+  fill: #636363;
+}
+
+#algolia_instant_selector .ais-refinement-list--list  .sbx-sffv__input {
+  border : 1px solid silver;
+}
+
+#algolia_instant_selector .ais-refinement-list--list  .sbx-sffv__input:focus {
+  border : 1px solid #54A5CD;
+}
+
+#algolia_instant_selector .ais-refinement-list--list .sffv-no-results {
+  padding-left: 3%;
+}
+
 /* RANGE SLIDER */
 
 .ais-range-slider--target {

tests/ConfigTest.php

@@ -42,6 +42,8 @@ public function testFacets()
                     $attributesMatched++;
                 } elseif ($facet['attribute'] === $indexFacet) {
                     $attributesMatched++;
+                } elseif ($facet['attribute'] === 'color' && 'searchable(color)' === $indexFacet) {
+                    $attributesMatched++;
                 }
             }
         }