Added a view helper to display facets by multi-select.

Author: Daniel Berthereau

asset/js/search.js

@@ -121,13 +121,23 @@ $(document).ready(function() {
         $(this).closest('li').hide();
         var facetName = $(this).data('facetName');
         var facetValue = $(this).data('facetValue');
-        $('.search-facet-item input').each(function() {
+        $('.search-facet-item input:checked').each(function() {
             if ($(this).prop('name') === facetName
                 && $(this).prop('value') === String(facetValue)
             ) {
                 $(this).prop('checked', false);
             }
         });
+        $('select.search-facet-items option:selected').each(function() {
+            if ($(this).closest('select').prop('name') === facetName
+                && $(this).prop('value') === String(facetValue)
+            ) {
+                $(this).prop('selected', false);
+                if ($.isFunction($.fn.chosen)) {
+                    $(this).closest('select').trigger('chosen:updated');
+                }
+            }
+        });
     });
 
     $('.search-facets').on('change', 'input[type=checkbox]', function() {
@@ -136,6 +146,19 @@ $(document).ready(function() {
         }
     });
 
+    $('.search-facets').on('change', 'select', function() {
+        if (!$('.apply-facets').length) {
+            // Replace the current select args by new ones.
+            let searchParams = new URLSearchParams(document.location.search);
+            let selectName = $(this).prop('name');
+            searchParams.delete(selectName);
+            $(this).val().forEach((element, index) => {
+                searchParams.set(selectName.substring(0, selectName.length - 2) + '[' + index + ']', element);
+            });
+            window.location = window.location.href + searchParams.toString();
+        }
+    });
+
     $('.search-view-type-list').on('click', function(e) {
         e.preventDefault();
         Search.setViewType('list');

config/module.config.php

@@ -38,6 +38,7 @@
             'facetLabel' => View\Helper\FacetLabel::class,
             'facetLink' => View\Helper\FacetLink::class,
             'facetLinks' => View\Helper\FacetLinks::class,
+            'facetSelect' => View\Helper\FacetSelect::class,
             'formNote' => View\Helper\FormNote::class,
             'hiddenInputsFromFilteredQuery' => View\Helper\HiddenInputsFromFilteredQuery::class,
             'searchForm' => View\Helper\SearchForm::class,

src/Form/Admin/SearchConfigConfigureForm.php

@@ -445,12 +445,13 @@ public function init(): void
                 'type' => DataTextarea::class,
                 'options' => [
                     'label' => 'List of facets', // @translate
-                    'info' => 'List of facets that will be displayed in the search page. Format is "field = Label".', // @translate
+                    'info' => 'List of facets that will be displayed in the search page. Format is "field = Label" and optionnally " = Select".', // @translate
                     'as_key_value' => true,
                     'key_value_separator' => '=',
                     'data_keys' => [
                         'name',
                         'label',
+                        'type',
                     ],
                 ],
                 'attributes' => [

src/View/Helper/FacetSelect.php

@@ -0,0 +1,8 @@
+<?php declare(strict_types=1);
+
+namespace AdvancedSearch\View\Helper;
+
+class FacetSelect extends AbstractFacet
+{
+    protected $partial = 'search/facet-select';
+}

view/search/facet-select.phtml

@@ -0,0 +1,24 @@
+<?php
+/**
+ * @var \Laminas\View\Renderer\PhpRenderer $this
+ * @var string $name
+ * @var array $facetValues
+ * @var array $options Facets options.
+ */
+
+$plugins = $this->getHelperPluginManager();
+$translate = $plugins->get('translate');
+$escape = $plugins->get('escapeHtml');
+$escapeAttr = $plugins->get('escapeHtmlAttr');
+
+$isFacetModeDirect = ($options['mode'] ?? '') === 'link';
+$displayCount = !empty($options['display_count']);
+?>
+
+<select name="facet[<?= $name ?>][]" multiple="multiple" class="search-facet-items chosen-select" data-placeholder="<?= $translate('Select below…') ?>">
+    <?php foreach ($facetValues as $facetValue): ?>
+    <option value="<?= $escapeAttr($facetValue['value']) ?>"<?= $isFacetModeDirect ? ' data-url="' . $escapeAttr($facetValue['url']) . '"' : '' ?><?= $facetValue['active'] ? ' selected="selected"' : '' ?>>
+        <?= $escape($facetValue['value']) ?><?php if ($displayCount): ?> (<span class="count"><?= $facetValue['count'] ?>)<?php endif; ?>
+    </option>
+    <?php endforeach; ?>
+</select>

view/search/facets.phtml

@@ -29,6 +29,7 @@ $facetActive = $plugins->get('facetActive');
 $facetLabel = $plugins->get('facetLabel');
 // Facet checkbox can be used in any case anyway, the js checks it.
 $facetElements = $isFacetModeButton ? $plugins->get('facetCheckboxes') : $plugins->get('facetLinks');
+$facetSelect = $plugins->get('facetSelect');
 
 // Don't display facets for item sets when browsing an item set.
 if (!empty($itemSet)) {
@@ -71,7 +72,11 @@ $options = $searchPage->setting('facet', []);
             <?php foreach ($facets as $name => $facetValues): ?>
             <li class="search-facet">
                 <h4><?= $translate($facetLabel($name)) ?></h4>
+                <?php if (($options['facets'][$name]['type'] ?? 'Checkbox') === 'Select'): ?>
+                <?= $facetSelect($name, $facetValues, $options) ?>
+                <?php else: ?>
                 <?= $facetElements($name, $facetValues, $options) ?>
+                <?php endif; ?>
             </li>
             <?php endforeach; ?>
         </ul>