feat: searchable filters (#166)

When the filtersearch option is enabled within Tweakwise for a specific filter in the filter template, a search box will now appear above the filter. This search box allows users to conveniently search through the filter values associated with that particular filter.

In cases where no filters are found, the designated text for displaying no results as configured in Tweakwise will be shown.

Additionally, users have the option to specify placeholder text for the search box within Tweakwise.

These modifications have been implemented within the default filter view. If you have customized your own view, please ensure to incorporate these changes accordingly.

Block/LayeredNavigation/RenderLayered/DefaultRenderer.php

@@ -238,6 +238,30 @@ public function getLessItemText()
         return 'Minder filters tonen';
     }
 
+    /**
+     * @return bool
+     */
+    public function isSearchable()
+    {
+        return ($this->getFacetSettings()->isSearchable() && $this->hasHiddenItems());
+    }
+
+    /**
+     * @return mixed|string|null
+     */
+    public function getSearchPlaceholder()
+    {
+        return $this->getFacetSettings()->getSearchPlaceholder();
+    }
+
+    /**
+     * @return mixed|string|null
+     */
+    public function getSearchNoResultsText()
+    {
+        return $this->getFacetSettings()->getSearchNoResultsText();
+    }
+
     /**
      * @return bool
      */

Block/LayeredNavigation/RenderLayered/SwatchRenderer.php

@@ -217,4 +217,28 @@ public function shouldDisplayProductCountOnLayer()
     {
         return $this->getFacetSettings()->getIsNumberOfResultVisible();
     }
+
+    /**
+     * @return bool
+     */
+    public function isSearchable()
+    {
+        return $this->getFacetSettings()->isSearchable();
+    }
+
+    /**
+     * @return mixed|string|null
+     */
+    public function getSearchPlaceholder()
+    {
+        return $this->filter->getFacet()->getFacetSettings()->getSearchPlaceholder();
+    }
+
+    /**
+     * @return mixed|string|null
+     */
+    public function getSearchNoResultsText()
+    {
+        return $this->filter->getFacet()->getFacetSettings()->getSearchNoResultsText();
+    }
 }

Model/Client/Type/FacetType/SettingsType.php

@@ -210,4 +210,27 @@ public function getCssClass()
 
         return null;
     }
+    /**
+     * @return bool
+     */
+    public function isSearchable()
+    {
+        return ($this->getBoolValue('issearchable'));
+    }
+
+    /**
+     * @return mixed|string|null
+     */
+    public function getSearchPlaceholder()
+    {
+        return empty($this->getValue('searchplaceholder')) ? '' : $this->getValue('searchplaceholder');
+    }
+
+    /**
+     * @return mixed|string|null
+     */
+    public function getSearchNoResultsText()
+    {
+        return empty($this->getValue('searchnoresultstext')) ? '' : $this->getValue('searchnoresultstext');
+    }
 }

view/frontend/templates/product/layered/default.phtml

@@ -21,6 +21,10 @@ $shouldDisplayProductCountLayer = $block->shouldDisplayProductCountOnLayer();
 
 ?>
 <div data-mage-init='<?=$block->getJsSortConfig()?>'>
+    <?php if ($block->isSearchable()): ?>
+        <input data-max-visible="<?=  $block->getMaxItemsShown()?>" type="text" class="tw_filtersearch js-skip-submit" name="tw_filtersearch" placeholder="<?= $block->getSearchPlaceholder(); ?>" >
+        <div style="display: none" class="search_no_results"><?= $block->getSearchNoResultsText(); ?></div>
+    <?php endif; ?>
     <ol class="items">
         <?php foreach ($block->getItems() as $index => $item): ?>
             <li class="item<?=$block->itemDefaultHidden($item) ? ' default-hidden' : ''?>"

view/frontend/templates/product/layered/swatch.phtml

@@ -13,6 +13,10 @@
      attribute-code="<?= /* @escapeNotVerified */ $swatchData['attribute_code'] ?>"
      attribute-id="<?= /* @escapeNotVerified */ $swatchData['attribute_id'] ?>"
      data-mage-init='{"tweakwiseNavigationSort":[]}'>
+    <?php if ($block->isSearchable()): ?>
+        <input data-max-visible="<?=  $block->getMaxItemsShown()?>" type="text" class="tw_filtersearch js-skip-submit" name="tw_filtersearch" placeholder="<?= $block->getSearchPlaceholder(); ?>" >
+        <div style="display: none" class="search_no_results"><?= $block->getSearchNoResultsText(); ?></div>
+    <?php endif; ?>
     <div class="swatch-attribute-options clearfix">
         <?php foreach ($swatchData['options'] as $option => $label): ?>
             <?php $item = $block->getItemForSwatch($option);?>

view/frontend/web/css/style.less

@@ -141,7 +141,7 @@
                 width: 24px;
             }
         }
-        
+
         input[type='checkbox']:checked {
             + label .swatch-option {
                 outline: 2px solid #ee0000;
@@ -216,6 +216,11 @@
             }
         }
     }
+
+    .no_search_results {
+        display: none;
+        padding-top: 10px;
+    }
 }
 
 .filter .filter-current-subtitle,

view/frontend/web/js/navigation-form.js

@@ -211,6 +211,10 @@ define([
         _ajaxHandler: function (event) {
             event.preventDefault();
 
+            if(event.target.name == 'tw_filtersearch') {
+                return;
+            }
+
             if (this.currentXhr) {
                 this.currentXhr.abort();
             }

view/frontend/web/js/navigation-sort.js

@@ -27,6 +27,7 @@ define([
         _hookEvents: function () {
             this.element.on('click', '.more-items', this._handleMoreItemsLink.bind(this));
             this.element.on('click', '.less-items', this._handleLessItemsLink.bind(this));
+            this.element.on('keyup', '.tw_filtersearch', this._handleFilterSearch.bind(this));
         },
 
         /**
@@ -73,6 +74,42 @@ define([
                 return $(a).data(type) - $(b).data(type);
             }).appendTo(list);
         },
+
+        _handleFilterSearch: function () {
+            var filterInput = this.element.find('.tw_filtersearch');
+            var value = filterInput.val().toLowerCase().trim();
+            var items = filterInput.parent('div').find('ol');
+            var noItems = filterInput.parent('div').find('.search_no_results');
+            var defaultVisibleItems = filterInput.data('max-visible');
+            var filterElement = 'li';
+            var moreItems = filterInput.parent('div').find('.more-items');
+            var lessItems = filterInput.parent('div').find('.less-items');
+
+            if (items.length === 0) {
+                //swatch
+                items = filterInput.parent('div');
+                filterElement = 'a';
+                defaultVisibleItems = 100;
+            }
+
+            var filterItems = items.find(filterElement);
+
+            filterItems.show().filter(function () {
+                return $(this).find('input').val().toLowerCase().trim().indexOf(value) === -1;
+            }).hide();
+
+            //more items visible than max visible items
+            filterItems.filter(':visible').slice(defaultVisibleItems).hide();
+
+            noItems.toggle(filterItems.filter(':visible').length < 1);
+            if (value.length === 0) {
+                moreItems.show();
+                lessItems.hide();
+            } else {
+                moreItems.hide();
+                lessItems.hide();
+            }
+        },
     });
 
     return $.tweakwise.navigationSort;