Developing a Custom Checkbox dropdown and Faceting

Hey nice community site, now I can stop bugging vvo on github :slight_smile:
So, I created a custom drop down instant search widget for bootstrap: https://jsfiddle.net/gmattucc/mhxj33Lf/

I got started with the work initial work that JonnyTurnerUK and vvo did: https://github.com/algolia/instantsearch.js/issues/1330

So, now I could use some help being set out in the right direction to move this widget from using Hierarchical facets, to disjunctive and conjunctive facets. Can anyone see how I need to start modifying this to allow them to work?

I’m struggling a bit to understand how to set disjunctive facets in the getconfiguration area:

getConfiguration: function getConfiguration() {
  return {
    hierarchicalFacets: [{
    name: attributeName,
    attributes: [attributeName]
  }]
};

Any help on how you would use disjunctive/conjunctive facets in a custom widget would be great.

So I’ve updated the fiddle to use disjunctive facets, but I’m having trouble with the drop downs that are adding a list of comma delinated items to the drop down:
https://jsfiddle.net/gmattucc/mhxj33Lf/4/

Seems that with disjunctive facets refinements, I’m getting all the facets, as well as what I’ve selected as a “refinement” comma delineated.

Anyone know how I can get the current refined list of items individually and not combined?
For example:

Facets Values:

  • A
  • B

Select A & B.

Results return:

  • A
  • A, B

How come it doesn’t just return two records of only A and of only B?

Hi @mattucci It’s me @vvo! :smiley:

I have read your three posts, thanks for coming on here. Could you maybe start over and explain visually what you are trying to build? A bit like a specification of the widget you want to build with the behavior it should have, without any Algolia concepts in it. Just give us the UI you would want to build and the behavior it should have on the hits when selected etc…

Getting a more complete specification will help me understand what is it you want to build exactly.

Hey @vvo :slight_smile:

So I’m basically trying to recreate the refinementList widget but using custom markup that a custom widget can allow. (Same widget configured with AND/OR operators)

Currently I’ve created a drop down that opens to display facet selections as check box options. This works with Hierarchical Facets, and I’m trying to get it to work with Disjunctive Facets, but I’m running into problems…

When I go to display the updated list of facets after refinement, hitting multiple items starts to add facets that are combinations of the selected refined items before. You can see the problem here (by cicking on a button and selecting multiple items): https://jsfiddle.net/gmattucc/mhxj33Lf/4/ (excuse the buggyness)

When using disjunctive facets, getFacetValues() and getRefinements() return results that include an item that combine all my selections, where with Conjunctive Facets and Hierarchical Facets, this isn’t the case.

Am I using this incorrectly perhaps?

Hi @mattucci, sorry if this seems overasking but can you provide me a precise reproducible list of steps and your expectations that are not met?

Something like

  • go on …
  • click on …
  • => menu shows
  • click on …
  • expectation X met, item is selected
  • click on…
  • expectation not met, I want Y to be selected

A recipe like that will help me reproduce bad behaviors and then dig into the code to see why it’s hapening like that.

Before we dig into the helper semantics and advanced API semantics, lets align on a visual UI problem and see how to solve it using the helper etc…

Thanks!

Sure! So, imagine the current algolia checkbox filtering, but bound up into a dropdown like this: https://codepen.io/bseth99/pen/fboKH

The steps of the experience would be:

  • Button Labeled with Facet Category
  • Click the Button, drop down appears
  • Select the Facet Filters
  • Results update as you check them off

When configuring the drop down:

  • Have the ability to switch between AND and OR filtering
  • The ability to configure the element for hierarchical facets as well

Hopefully that helps you understand what I’m going for. I’ve spent quite a bit of time trying to figure it out, and if I could just modify the markup of the existing instantsearch facet filtering widget at a high level, it would have saved me hours of time.

Now just to add, as what the problem is with the current demo I showed above.

Currently, this is the problem:

  • Click on facet in drop down
  • Filtering happens
  • Click on a Second filter of the same facet category
  • Incorrectly a new item is added to the list comprised of both facet selections
    What should happen is that the list of returned facet values left over after filtering should be individually defined so I can output them verbatim like I am with hierarchical facets.

getFacetValues() and getRefinements() return results that include an item that combine all my selections, and I’m not sure how I should instead be generating the list of facets.

So, here is a working demo, minus the dropdown functionality, using conjunctive facets: https://jsfiddle.net/gmattucc/49t1030u/

The problem is that multiple selections of the same category return no results, when they should.
For example, in the demo above, under Intakes select January Start then September Start, there are results where items have both, but no results return.

How can I correct this?

@mattucci thanks for digging more into this and asking specific question, love it.

The problem is that multiple selections of the same category return no results,

I did an update, see at the bottom of the JS code here: https://jsfiddle.net/49t1030u/5/

It shows how to properly use the toggleRefinement. You do not need to pass an array, just pass the selected values as they are clicked and that’s it.

Let me know how it goes.

@vvo happy new year and awesome, this makes everything clear now! Thank you so much, I can see the error in how I was using this now. I was passing a list of all selected items to the toggleRefinement, so I was toggling items incorrectly.

Also, I assumed that I couldn’t toggleRefinements within render, but that isn’t the case. This simplified my approach significantly.

I removed some unnecessary code and changed around how I was selectin the checkbox items and now I got it working the way I wanted :slight_smile:
https://jsfiddle.net/gmattucc/49t1030u/

Thanks for your help!

1 Like