Add a Soft Limit option

Created on 5 February 2025, 2 months ago

Problem/Motivation

Facets 3 allows to add facets as exposed filters, using Ajax. This works very well, but becomes a bit cumbersome if the facets have a lot of options.

Facet blocks can be configured with a "soft limit" so that only the first 5, 10 or 20 items are displayed, while the rest are collapsed. Only when the user clicks on "See all", all items are displayed.
This makes it easier for the user of the site to get a first overview, especially when the facet items are sorted by count. And it makes it much easier to theme, when for example one facet has just a few items, while another has 50 or so...

The maintainers of the Facets module suggested that this should be provided by Better Exposed Filters.

Proposed resolution

Add a configuration option to set a soft limit, similar to that available for Facet blocks.

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Active

Version

7.1

Component

User interface

Created by

πŸ‡³πŸ‡±Netherlands ifrik

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ifrik
  • πŸ‡ΊπŸ‡¦Ukraine khiminrm

    I need this feature too.
    As a quick solution I've taken javascript from the facet's module soft-limit.js, modified it to use hardcoded limit, labels, selectors and used it in custom theme. But still need to exclude some filters.

      function softLimit() {
        // Soft limit.
        var limit = 15;
        var zero_based_limit = (limit - 1);
        var facetsList = $('..bef-checkboxes');
    
        // Hide facets over the limit.
        facetsList.each(function () {
          var allLiElements = $(this).find('.form-check');
          $(once('applysoftlimit', allLiElements.slice(zero_based_limit + 1))).hide();
        });
    
        // Add "Show more" / "Show less" links.
        $(once('applysoftlimit', facetsList.filter(function () {
          return $(this).find('.form-check').length > limit;
        }))).each(function () {
          var facet = $(this);
          var showLessLabel = Drupal.t('Show less');
          var showMoreLabel = Drupal.t('Show more');
          $('<a href="#" class="facets-soft-limit-link"></a>')
            .text(showMoreLabel)
            .on('click', function () {
              if (facet.find('.form-check:hidden').length > 0) {
                facet.find('.form-check:gt(' + zero_based_limit + ')').slideDown();
                facet.find('.form-check:lt(' + (zero_based_limit + 2) + ') a, .form-check:lt(' + (zero_based_limit + 2) + ') input').focus();
                $(this).addClass('open').text(showLessLabel);
              }
              else {
                facet.find('.form-check:gt(' + zero_based_limit + ')').slideUp();
                $(this).removeClass('open').text(showMoreLabel);
              }
              return false;
            }).insertAfter($(this));
        });
      }
    
  • πŸ‡³πŸ‡ΏNew Zealand dieuwe Auckland, NZ

    This would be a great feature, one of the few things missing out of the box with Facets 3 integration with BEF.

    The sample JS code there was very helpful for a temporary custom implementation, just a note that "form-item" is the class I needed on my theme as I don't have "form-check" (another option would have been "form-type-checkbox").

Production build 0.71.5 2024