feat: searchable filters (#32)

feat: searchable filters

composer.json

@@ -11,7 +11,7 @@
         "hyva-themes/magento2-compat-module-fallback": "*",
         "hyva-themes/magento2-default-theme": "^1.2",
         "php": ">=8.0 <8.3",
-        "tweakwise/magento2-tweakwise": ">=5.2.0."
+        "tweakwise/magento2-tweakwise": ">=6.0.0."
     },
     "autoload": {
         "files": [

src/view/frontend/templates/layer/navigation-form.phtml

@@ -334,6 +334,7 @@ use Magento\Framework\View\Element\Template;
                     this.replaceNode(oldToolbarLast, newToolbarLast);
                 }
             },
+
             ajaxUpdateState(response) {
                 window.history.pushState({html: response.html}, '', response.url);
             },

src/view/frontend/templates/layer/view.phtml

@@ -197,6 +197,55 @@ $filtered = count($block->getLayer()->getState()->getFilters());
                 }
             }
         }
+
+        function initFilterSearch() {
+            return {
+                filterSearch() {
+                    let items = this.$refs.items;
+                    const filterSearch = this.$refs.tw_filtersearch;
+                    let value = filterSearch.value.toLowerCase().trim();
+                    let noItems = this.$refs.search_no_results;
+                    let moreItems = this.$refs.moreItems;
+                    let lessItems = this.$refs.lessItems;
+
+                    //swatch
+                    if (!items || !items.children) {
+                        items = this.$refs.swatch;
+                    }
+
+                    if (!items || !items.children) {
+                        return;
+                    }
+
+                    Array.from(items.children).forEach(function(item) {
+                        //find input element in item
+                        let input = item.querySelector('input');
+                        if (input.value.toLowerCase().trim().indexOf(value) === -1) {
+                            item.style.display = 'none';
+                        } else {
+                            item.style.display = '';
+                        }
+                    });
+
+                    let visibleItems = Array.from(items.children).filter(item => item.style.display !== 'none');
+                    if(visibleItems.length < 1) {
+                        noItems.style.display = '';
+                    } else {
+                        noItems.style.display = 'none';
+                    }
+
+                    if (moreItems) {
+                        if(value.length === 0) {
+                            moreItems.style.display = '';
+                            lessItems.style.display = '';
+                        } else {
+                            moreItems.style.display = 'none';
+                            lessItems.style.display = 'none';
+                        }
+                    }
+                }
+            }
+        }
     </script>
 
 <?=$block->getChildHtml('tweakwise.navigation.form');?>

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

@@ -16,14 +16,20 @@ use Tweakwise\Magento2Tweakwise\Block\LayeredNavigation\RenderLayered\DefaultRen
 
 $hasHiddenItems = $block->hasHiddenItems();
 $hasAlternateSortOrder = $block->hasAlternateSortOrder();
+
 ?>
 <div x-data="initTweakwiseNavigationItems()" x-init='sortItems(<?= (int)$hasAlternateSortOrder ?>)'>
+    <?php if ($block->isSearchable()): ?>
+        <input @keyUp="filterSearch()" x-ref="tw_filtersearch" x-data="initFilterSearch()" data-max-visible="<?=  $block->getMaxItemsShown()?>" type="text" class="tw_filtersearch js-skip-submit" name="tw_filtersearch" placeholder="<?= $block->getSearchPlaceholder(); ?>" >
+        <div x-ref="search_no_results" style="display: none" class="search_no_results empty"><?= $block->getSearchNoResultsText(); ?></div>
+    <?php endif; ?>
     <ol class="items" x-ref="items">
         <?php foreach ($block->getItems() as $index => $item): ?>
             <li class="item"
                 :class="{ 'block': moreItemsShow, 'hidden': '<?=$block->itemDefaultHidden($item)?>' && !moreItemsShow }"
                 <?php if ($hasAlternateSortOrder): ?>
                     data-alternate-sort="<?= $item->getAlternateSortOrder(); ?>"
+
                     data-original-sort="<?= $index; ?>"
                 <?php endif; ?>
             >
@@ -66,11 +72,13 @@ $hasAlternateSortOrder = $block->hasAlternateSortOrder();
         <a href="#" class="more-items underline cursor-pointer"
            @click.prevent="toggleShowMore(true, <?= (int)$hasAlternateSortOrder ?>)"
            :class="{ 'hidden': moreItemsShow }"
+           x-ref="moreItems"
         ><?= __($block->getMoreItemText()) ?></a>
         <a href="#" class="less-items underline cursor-pointer"
            x-cloak
            @click.prevent="toggleShowMore(false, <?= (int)$hasAlternateSortOrder ?>)"
            :class="{ 'block': moreItemsShow, 'hidden': !moreItemsShow }"
+           x-ref="lessItems"
         ><?= __($block->getLessItemText()) ?></a>
     <?php endif; ?>
 </div>

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

@@ -89,7 +89,11 @@ if (!$swatchData['swatches']) {
      x-data="initLayeredSwatch_<?= $escaper->escapeJs($swatchData['attribute_code']) ?>()"
      data-attribute-code="<?= $escaper->escapeHtmlAttr($swatchData['attribute_code']) ?>"
      data-attribute-id="<?= $escaper->escapeHtmlAttr($swatchData['attribute_id']) ?>">
-    <div class="swatch-attribute-options clearfix flex flex-row flex-wrap">
+    <?php if ($block->isSearchable()): ?>
+        <input @keyUp="filterSearch()" x-ref="tw_filtersearch" x-data="initFilterSearch()" data-max-visible="<?=  $block->getMaxItemsShown()?>" type="text" class="tw_filtersearch js-skip-submit" name="tw_filtersearch" placeholder="<?= $block->getSearchPlaceholder(); ?>" >
+        <div x-ref="search_no_results" style="display: none" class="search_no_results empty"><?= $block->getSearchNoResultsText(); ?></div>
+    <?php endif; ?>
+    <div class="swatch-attribute-options clearfix flex flex-row flex-wrap" x-ref="swatch">
         <?php foreach ($swatchData['options'] as $option => $label): ?>
             <?php
             $item = $block->getItemForSwatch($option);