multiple facets with one apply button

Not soon in the drupal 8 version. This would be a big refactor of the way queries are built right now.

There are multiple issues in the queue that want to do this.

+1 for this feature.

This is a very popular behavior for facets in Russia, and almost every e-commerce use it in that way.

Before it will be added to facets, can someone make some advice about this? I think I need to create custom facets which will put some info in Drupal settings, after that, when a user clicks "apply" button they will be constructed in a big URL contains all queries.

P.s. This behavior is also very friendly for mobile users. If there are no AJAX facets, and they update the page after values have changed, this is the real pain for UX.

we need this feature too...

many thanks for the work of maintainers

Tentatively setting this as dup. Feel free to correct.

I think this is not a duplicate because we need this feature for checkboxes too, not only for dropdown widget

@geek.merlin aka axel.rutz, this is not a duplicate, we need to have separate "Apply" button for checkboxes too. Much better UI is to check multiple checkboxes and apply at once, instead waiting of page reload on each checkbox click!

It's not a duplicate of the given related issue because this thread concerns all facets instead of dropdown widgets only. Reopening this issue.

Thanks for clarifying!

As maintainer @borisson_ said in #3, this would need architectural changes, probably the same as in the related issue.

Here is a patch providing 2 configuration options for the checkboxes widget:
- disable autosubmit: Will prevent to trigger the facet filter when a checkbox is changed, and will provide a button to apply instead (disabled by default).
- submit label: To configure the text for the submit label ("Apply" by default).

@akalam; how would this work when there are multiple facet blocks? You then would need just one apply button after the last facet block only.

Note that this will be trivially fixed by #3073444-22: Create views plugins to render facets and summaries in filters and areas

EDIT: No, it turns out it won't.

The patch does the job for the moment.
Thanks.

I do have some remarks:

• The Submit label isn't translatable.
• It doesn't work correctly in combination with the Reset link (shows an empty view while should show all items).
• @BarisW makes a good point in #12, but I believe it makes everything more complex?

@BarisW @antoineh There would be cases where one global apply button will be needed, and cases where a button per facet will be required (our case is the second one). I would support both options but will need more work.

@antoineh Thank you for your feedback, I would test it in combination with the reset link (honestly I didn't test that scenario) and will try to fix that issue.

@geek-merlin Thank you for the feedback, I wasn't aware about that feature, I will investigate that and check if it covers our needs.

Just found this, having this feature would solve this issue I have: https://www.drupal.org/project/facets/issues/3136008

@geek-merlin could you give some hints how to do it in that patch? We're using it and this would be a great addition for our customers.

@mirom: You ask about #13? When i wrote this, i thought the patch #3073444: Create views plugins to render facets and summaries in filters and areas would take a totally different direction that it took.
So this is no longer valid. Thanks for pinging!

Wrong patch.

I fixed minor problem related with the custom URL alias on facets setup.

Only changed $widget.data('drupal-facet-id') to $widget.data('drupal-facet-alias'), line 56.

Normally the id and alias are the same value, but if the user modifies it, it doesn't work correctly.

Check interdiff.

Wrong patch!!

Wrong patch!!

I added a translatable solution to "Apply" button and fixed name of variable $appyButton to $applyButton.

#27 did fix the translation issue, but IMO not using best practices. Is not recommended to pass variables throw the t() or Drupal.t() functions. Is better to cover that using config translations. Here is a patch solving that.

We are also fixing the typo with the $appy -> $apply javascript variable reported on #27 (thanks for notice that), and removing the "page" parameter from the querystring to avoid facets filtering on a potentially unexisting page.

Perfect akalam thanks for that!

We resolved some problems related with the url param creation.

The param should be object.

And we move unset pager before to create href.

Thank @akalam

I'm voting for this feature +1.
Thank you guys! The patch works fine!

Is it possible to have this new Apply button actually do a submit (i.e. page load rather than AJAX)? Or is that a different issue?

I have multiple views in block_tabs/quick_tabs and i need the results to update across all tabs. As the filter ids are the same across multiple common facets for these views, a page load does what i need.

editing this comment as it does seem to submit the page - not sure why i thought it was doing ajax before.

one other note though, perhaps i am just trying to be semantically accurate here though, but it doesnt seem like the word facet is being used correctly here.

Colours:
- green
- red
- blue

Type:
- page
- article

Colours and Type are the facets, not each item within it. So the wording of this issue, i think would suggest having one apply button for all of items in a single facet; not for multiple facets (which is actually what i need). But possibly this is better handled by something like the facets_block module which adds multiple facets to one block?

Right now with this patch and that module, i get this:

Colours:
- green
- red
- blue
APPLY

Type:
- page
- article
APPLY

which i don't think would be the typical use case (but is sort of what this issue title suggests fixes).

Composer can not apply this patch to latest version of the module.

  - Applying patches for drupal/facets
    https://www.drupal.org/files/issues/2020-09-09/facets-3013702-34.patch (3013702 - multiple facets with one apply button)
   Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2020-09-09/facets-3013702-34.patch

removed - this patch was only failing when trying to apply it along with this patch: [#3073444 ]

I have applied the patch but no "apply" button is available on facets.
How can i display the button?

thanks in advance

Based on #34 I added a single submit button for all checkbox facets. Button will be inside the summary block.
You need to disable autosumbit in each checkbox facet and enable single submit button in facet summary block.

Updated the patch

Hi,

I applied the patch 40, and disabled autosubmit in all the facets, but in order to display the "Summary block" you have to enable the new module, and create a new facet of type "summary" only after you can place the block.

Thank you very much for the work, it's look's good!

Changing var $checkboxWidgets = $('.js-facets-widget'); to var $checkboxWidgets = $('.js-facets-widget.item-list__checkbox'); in apply-button.js file in patch 40. Otherwise, it through JS error in scenario where we have mix of links and checkboxes facets

You may want to try https://www.drupal.org/project/facets_form

#43 facets_form has a dependency for facets v.1, so it will not install with facets v.2

#42
work with URL Processor - Query string. Filtering works
not work with URL Processor - Pretty paths. Filtering doesn't work

single submit button - disabled, URL Processor - Pretty paths: /catalog/country/17
single submit button - enabled, URL Processor - Pretty paths: /catalog?f%5B0%5D=country%3A17

Hello,

We are using the #42 patch, and it works well.
But we have recently changed our filters and the facets no longer work.
Nous avons maintenant des filtres de cette forme dans l'url :

?myfilter[276561]=276561

And the result is the following in the browser console :

Yes an url of several MB!

After some debugging, I modify this part of the patch (line 142 of apply-button.js):

          if (!params) params = {};
          if (!params[key] || !$.isArray(params[key])) params[key] = [];
          params[key][parseInt(index)] = value;

into

          if (!params) params = {};
          if (!params[key] || !$.isArray(params[key])) params[key] = {};
          params[key][parseInt(index)] = value;

In order to have an object instead of an array.

I had to modify this part too :

currentFacetValues = queryString['f'];

into

currentFacetValues = !Array.isArray(queryString['f']) ? Object.values(queryString['f']) : queryString['f'];

In order to deal with this array that has become an object (Since we know that facets elements in the query are not keyed/valued).

Be careful I'm not an expert in browser compatibility and I didn't necessarily take into account all the scenarios in this patch.

Here is a new version of the patch, There was a bug with multiple keys of the same filter :

?myfilter[276561]=276561&myfilter[123456]=123456

The test here :
if (!params[key] || !$.isArray(params[key])) params[key] = {};
wa wrong and is replaced by :

if (!params[key] || !(typeof params[key] == 'object')) params[key] = {};
For better compatibility I also replace this part :
currentFacetValues = !Array.isArray(queryString['f']) ? Object.values(queryString['f']) : queryString['f'];
by
currentFacetValues = !$.isArray(queryString['f']) ? Object.values(queryString['f']) : queryString['f'];

Still a useful request, so I'll change the version to the current development branch 2.x. and setting NW therefor.

I guess this feature should then add the "global" Submit and global Reset button to solve both? Should be quite similar?
That would also remove the requirement for https://www.drupal.org/project/facets_reset_button and potentially fix #2984641: Extend Reset Facet processor functionality.

All that would be a huge step for Facets!

> All that would be a huge step for Facets!
Yeah. Essentially they become refinable filters (which i once thought they were architecture-wise).

I have updated the patch #47 for the module facet 2.0.2(only small change in 'facets_summary.processor.schema.yml' file)

I have applied the patch (via composer) and configured the summary facet to display the results as each facet is checked (not using a submit button). It appears to work as expected. I put the summary results at the top of my content so it is easy for users to remove facets or clear all (similar to how https://rei.com has there summary).

Here's my one issue: previously to trying this summary facet, my facets were links not checkboxes. I like the checkboxes a bit better, but with js aggregation turned on, the checkboxes don't appear (css aggregation turned on isn't causing the issue). When I turn js aggregation off (via performance configurations), the checkboxes appear as expected. I'm posting this here thinking it might be related to the patch/summary facet module. There's another issue related to aggregation (https://www.drupal.org/project/facets/issues/3052574), but I don't think it's the same issue as I'm experiencing.

Any thoughts, ideas, suggestions?

Thanks to everyone for this great addition to the facets module.

Hi

I just tried the patch #48, I did the same "disable autosubmit" created the summary block, and placed the block, but I don't have the submit button.

Added support for Facets Searchbox widget and changed Apply button to not be rendered when facets are not rendered (empty).

I just post a new patch to work with this issue on facets_date_range module

https://www.drupal.org/project/facets_date_range/issues/3306839#comment-...

Thanks a lot, this patch is working well!

I don't think that we'll accept that patch.

In Factes 3.0 facets could be rendered as views exposed filters. (And exposed filters can be rendered as blocks since Drupal 9.x.)
Facets 3.0 also provides an integration with better_exposed_filters.

better_exposed_filters provides an auto-submit feature. The feature requested here to select multiple facets and to have a submit button is provided by views itself for exposed filters and improved by better exposed filters.

So the answer to this feature request is to use facets 3.0, add facets as exposed filters instead of blocks, use better_exposed_filters to fine tune the behaviour. And this setup also solves our AJAX issues!

I set the status to "postponed" to let the issue open for discussions for some time. But it would be better to invest time to test facets 3.0 and to provide patches to improve and finalize it.

@mkalkbrenner, does your suggestion actually work? When I try to set it up this way, the facets still auto-submit.

Agree with @dshields, here, with one exception. I was able to prevent auto-submit with AJAX enabled. If AJAX is disabled, I don't see a way to disable auto-submit, as the better exposed filter setting isn't respected. Enabling AJAX provides a solid UX, but without compatibility with the views ajax get module, cacheability of an ajax-based view is an issue.

@mkalkbrenner any input would be appreciated here for how to proceed in a manner that's inline with the facets maintainer vision.

@malik.kotob, I still don't quite get how you've prevented the facets (even as exposed filters in an ajax-enabled view) from auto-submitting.
I'm using "list of checkboxes" for my facet and facets 3.x-dev...

While I don't think it'll help much, I've attached a screenshot of the views admin UI..

@dshields @mkalkbrenner

With Better Exposed Filters + Facets 3 as Exposed Filters the facets *always* autocosubmit, and even worse, if you use Better Exposed Filters to enable autosubmit for other non-facet fields (to provide a consistent experience) it interferes with facet autosubmitting.

There needs to be an option somehow in Facets to turn autosubmission off, including (especially?) for use with Better Exposed Filters.

For those who got this patch to work, I'm looking for a little guidance. I set my facets to "disable autosubmit", and added the filter summary with apply button enabled, but my facets are still autosubmitting. I tried enabling ajax but that didn't prevent autosubmit and broke my filters in other weird ways. Am I missing something?

Seem like this patch (#56) stopped working on Druapl10. Was working fine on 9.5.9. But since updating to Drupal 10.1, gets errors about "Uncaught TypeError: e(...).once is not a function". Is it possible to make a patch that fix it for Drupal 10?

@GuStAvE33 Here's a patch for D10 using core/once instead of jquery once which is likely what was failing.

I was able to get this to work as desired with the patch but I had to enable the facets_summary block, which I wasn't using previously. The JS library was added to that submodule, but I don't think it needs to be there in the long run. I was able to enable it and just put a button with class "facets-apply-button" on the page with my existing checkbox facets that were updated to not auto-submit and it worked.

Updated patch for D10 as #66 had a duped line.

I'm adding support for the dropdown widget based on the #67 patch. Sorry for not providing an interdiff but it's giving me a whitespace related error.

During testing I found something that might be an issue. The apply button on the facet summary is only visible if there's at least one facet activated on the facets summary configuration. As consequence, it's not possible to create a facet summary block to display only the apply button, without the information of the selected facet values.

The idea to alter links to checkbox by javascript is not ideal. It makes the significant front-end update only after the page is fully loaded. In some scenario e.g. slow network or low end, this is not unnoticeable. Checkboxes would be ideal to be separate widget that renders checkbox elements directly.

It looks like the issue described in #68 happens if the reset link is set to "Show only reset link" when "Adds reset facets link." is before 'Adds single submit button." in the Processor Order, but it works correctly when they are swapped. In most cases, the apply button should come before the reset link, so this is a problem.

I've added the Facets Summary block and I see the submit button. Only when I submit it's not going to the results page. I have the facets in a separate block on the homepage and when submitting it should go to the /search page, but now it stays on the homepage. Any idea on how to solve that?

Furthermore, I have developed a patch on top of the #68 patch that incorporates the logic to verify whether the facets block is located on a different page than the search results page. In our scenario, the facets blocks are positioned on the homepage, while the search results reside on their own dedicated page.

I hope this proves beneficial to someone.

Hi,
I'm trying to add a submit button on my facets with disabled autosubmit (for accessibility reasons) but the submit button doesn't appear, is anybody can tell me where I can find the right way to do this ?

Thank you in advance

Fred

EDIT : I used facets_block and facets_summary and the button finally appears.

#68 works well for our usecase, but we want to display only the submit button and ran into the issue of the tags.

I've updated the patch from #68 to have a position option, similar to the reset button.
This allows it to only display a submit button when you select. "Show only apply button"

Getting the following error with the above patch.

Encountering bug with soft limits.

If patch is applied and soft limits is turned on for any facet, checkboxes turn into links (screenshot).
Dev console also outputs an error (dev tools error)

When I applied the #74, the tick mark shown in selected option is getting disappeared when I click on Done button in filters.
So I have fixed it. Please review.

I can confirm that patch is working, we are using it on the project. We are using exactly #57 patch.

When applying patch #74, I got the following console error: $.isArray is not a function

This function is removed from jQuery 4.

Updated patch for this.

I've updated patch #80 so the updateCheckbox function isn't called when disable autosubmit is enabled.

We have a site still using this functionality and we need to upgrade facets, so I'm switching this to 3.x and I'm going to try to get a merge request going.

I have created a branch and merge request that incorporates the code from #68 as that is what was in our codebase previously. It's possible the previous developers included some work from subsequent patches. I am currently just trying to get it to work without having to test additional functionality.

According to https://git.drupalcode.org/project/facets/-/blob/3.0.x/src/Plugin/facets...
facets must be sorted alphabetically.
It could be very important for SEO to keep the same order.

Added new patch file and updated MR.