Facets compatibility with views_ajax_history

Created on 13 January 2020, almost 5 years ago
Updated 7 November 2024, about 2 months ago

Problem/Motivation

At the moment, Facets doesn't have a way of managing browser state history. The desired user experience is... as a user interacts with facets they should be able to store that new filtered state in browser history. When a user navigates back and forth via browser navigation the expected state of the view should be updated asynchronously.

Proposed resolution

My proposal is to remove existing state management in facets-views-ajax.js and encourage the use of views_ajax_history to manage all expected ajax history state behaviors from facets, exposed filters, and pagination. In order to get facets to be processed by views_ajax_history the ajax_views_settings will need to include `ajax_view_settings.element`. Since facets uses anchor elements for all widgets the ajax request will be processed in views_ajax_history similarly to pagination. Updates will include an update to 'facets_filter' event to pass along entire jQuery element (not just href). In addition, ajax_view_settings needs to include ajax_view_settings.element that is set to the facet_item element (not jquery element). Once this is done the views_ajax_history will create the browser state as well as the 'popstate' events on the window during beforeSerialization().

Remaining tasks

  • Proposed solution and patch
  • Feedback/consensus building
  • Approved patch
  • Release notes

User interface changes

  • Drops support for URL updating

API changes

None

Data model changes

None

Release notes snippet

TBD

Feature request
Status

Needs work

Version

2.0

Component

Code

Created by

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

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇳🇱Netherlands askibinski

    Here is a re-rolls as in #20 but on top of #76 in 🐛 Render using theme input and select instead of lists with links for checkboxes and dropdown Needs review for D10 compatibility.
    It does not take into account feedback from @Brolad above.

  • First commit to issue fork.
  • Pipeline finished with Canceled
    about 2 months ago
    Total: 75s
    #331770
  • Pipeline finished with Canceled
    about 2 months ago
    Total: 76s
    #331771
  • Pipeline finished with Failed
    about 2 months ago
    Total: 665s
    #331772
  • 🇧🇪Belgium BramDriesen Belgium 🇧🇪

    Re-applied #17 on a issue fork.

    Uploading a combined patch of #3106111] and #3052574

  • Pipeline finished with Failed
    about 1 month ago
    Total: 689s
    #337654
  • 🇧🇪Belgium waropd

    Updated patch #31 to work on facets 2.0.9

    Change is in facets-views-ajax.js

    Changed lines:

    <?php
    // Update url.
    window.historyInitiated = true;
    window.history.pushState(null, document.title, href);
    ?>

    Previous patch had this right at the top of the updateFacetsViewPatch. Facets 2.0.9 has this about 20 lines lower which is the same as in this new patch

  • 🇧🇪Belgium p-neyens

    Updated patch #31which breaks facet summary (ajax) to work with the changes of #3052574-275
    I don't started from #32 @waropd because issue https://www.drupal.org/project/facets/issues/3254732 🐛 Facets summary compatibility with views_ajax_history Needs review is fixed.

    changed lines:

    if (updateFacetsSummaryBlock() && (facetId === 'facets_summary_ajax')) {
      $(once(facetId, '[data-drupal-facets-summary-id=' + facetSettings.facets_summary_id + '] ul li')).click(function (e) {
        e.preventDefault();
        var facetLink = $(this).find('a');
        updateFacetsView(facetLink.attr('href'), current_dom_id, view_path);
      });
    }
    
    becomes
    
    else if (facetId == 'facets_summary_ajax_summary' || facetId == 'facets_summary_ajax_summary_count') {
        if (updateFacetsSummaryBlock()) {
           $(once('data-drupal-facets-summary-id', '[data-drupal-facets-summary-id=' + facetSettings.facets_summary_id + ']')).children('ul').children('li').click(function (e) {
              e.preventDefault();
              var facetLink = $(this).find('a');
              updateFacetsView(facetLink, current_dom_id, view_path);
           });
       }
    }
    
Production build 0.71.5 2024