Range Slider filter style (JS UI) is available option for Features & …

…Attribute group (experimental)
PrestaShop · Jun 30, 2023 · 256910a · 256910a
1 parent 704ab5d
commit 256910a
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,20 @@
 
 Filter your catalog to help visitors picture the category tree and browse your store easily.
 
+## About this fork
+
+This fork adds JS Slider for Features and Attribute Groups.
+It is experimental version. Stable for ordered numeric values. Untested for anything else.
+
+### Configuration
+
+1. In PrestaShop Back Office go to _Modules > Module Manager > Modules (tab) > Faceted search > Configure (button) > Filters templates (table) > Edit (button)_ of desired Template.
+2. Select "Slider (experimental)" as Filter style of desired Feature or Attribute group.
+
+If you wish to show units within a Slider, then create new key `PS_FACETEDSEARCH_SLIDER_FEATURE_<feature id>_UNIT` in PrestaShop Config table (in Database).
+
+Note: Order of values in the slider are taken from the Feature / Attribute group.
+
 ## Multistore compatibility
 
 This module is partially compatible with the multistore feature. Some of its options might not be available.

diff --git a/src/Filters/Converter.php b/src/Filters/Converter.php
@@ -172,6 +172,10 @@ public function getFacetsFromFilterBlocks(array $filterBlocks)
                         usort($filters, [$this, 'sortFiltersByLabel']);
                     }
 
+                    /* Slider hack */
+                    if ($filterBlock['filter_type'] == self::WIDGET_TYPE_SLIDER) {
+                        $filters = $this->modifyFacetToSlider($facet, $filters, $type); // Slider should have only one filter
+                    }
                     // No method available to add all filters
                     foreach ($filters as $filter) {
                         $facet->addFilter($filter);
@@ -226,6 +230,56 @@ public function getFacetsFromFilterBlocks(array $filterBlocks)
         return $facets;
     }
 
+    public function modifyFacetToSlider(Facet $facet, $filters, $type)
+    {
+        $unit = $this->sliderUnit($facet);
+
+        $values = [];
+        $actives = [];
+        foreach($filters as $filt) {
+            $values[] = $filt->getLabel();
+            if ($filt->isActive())
+                $actives[] = $filt->getLabel();
+            $magnitude = $filt->getMagnitude();
+        }
+        if (!count($actives)) {
+            $actives2 = [$values[0], $values[count($values)-1]];
+        }
+        else {
+            $actives2 = [$actives[0], $actives[count($actives)-1]];
+        }
+        if (count($values)) {
+            $facet
+                ->setProperty('min', $values[0])        // global min value
+                ->setProperty('max', $values[count($values)-1]) // global max value
+                ->setProperty('unit', $unit)            // unit (e.g. kg, meter) must be !empty
+                ->setProperty('specifications', null)
+                ->setMultipleSelectionAllowed(false)
+                ->setProperty('range', true);
+            $filter = new Filter();
+            $filter
+                ->setActive(!empty($actives))
+                ->setType($type)
+                ->setMagnitude($magnitude)
+                ->setProperty('symbol', $unit)          // same as facet unit
+                ->setValue($actives2)                   // must be 2 items long array containing currently selected min and max values
+                ->setLabel(sprintf('%1$s - %2$s %3$s', $actives2[0], $actives2[1], $unit)); // format of label, which is updated by JS
+            $facet->addFilter($filter);
+        }
+        return $filter;
+    }
+
+
+    public function sliderUnit(Facet $facet)
+    {
+        $default = ' ';
+        $type = $facet->getType();
+        $cfg_key = 'PS_FACETEDSEARCH_SLIDER_' . strtoupper($type) . '_' . $facet->getProperty('id_' . $type) . '_UNIT';
+
+        $unit = Configuration::get($cfg_key);
+        return !empty($unit) ? $unit : $default;
+    }
+
     /**
      * This method is responsible of parsing the search filters sent in the query.
      * These filters come from the URL in 99 % of cases.
@@ -367,6 +421,10 @@ public function createFacetedSearchFiltersFromQuery(ProductSearchQuery $query)
                         foreach ($featureValues as $featureValue) {
                             if (in_array($featureValue['url_name'], $featureValueLabels)
                                 || in_array($featureValue['value'], $featureValueLabels)
+                                || ($filter['filter_type'] == self::WIDGET_TYPE_SLIDER
+                                    && $featureValue['value'] >= $featureValueLabels[1]  /* FIXME: Works for numeric values only */
+                                    && $featureValue['value'] <= $featureValueLabels[2]
+                                    )
                             ) {
                                 $searchFilters['id_feature'][$feature['id_feature']][] = $featureValue['id_feature_value'];
                             }

diff --git a/views/templates/admin/view.tpl b/views/templates/admin/view.tpl
@@ -199,6 +199,7 @@
                           <option value="0">{l s='Checkbox' d='Modules.Facetedsearch.Admin'}</option>
                           <option value="1">{l s='Radio button' d='Modules.Facetedsearch.Admin'}</option>
                           <option value="2">{l s='Drop-down list' d='Modules.Facetedsearch.Admin'}</option>
+                          <option value="3">{l s='Slider (experimental)' d='Modules.Facetedsearch.Admin'}</option>
                         </select>
                       </div>
                     </div>