[multipleChoiceList] create widget

[vvo]

This widget needs to be able to render this:

API

Given this html:

<div id="manufacturer"></div>

And this JavaScript:

instant.addWidget(
  instantsearch.widgets.multipleChoiceList({
    container: '#manufacturer',
    facetName: 'manufacturer'
  })
)

Default rendering output (no provided template):

<ul class="as--multipleChoiceList">
  <li><label><input type="checkbox" value="Sony" checked />Sony <span>302</span></label></li>
  <li><label><input type="checkbox" value="Microsoft" />Microsoft <span>120</span></label></li>
</ul>

<label> is important to allow clicking on the "Sony" label rather than just the checkbox. This is also the standard way bootstrap advocates writing checkboxes.

I did not detail css classes but there should be css classes aroud elements for people to style them. Following #47?

Options

• container string or DOMElement
• facetName string
• template string (hogan) or function

Available data when passing your own template

Template will be inserted <li>HERE</li>

• value string
• count number
• selected boolean

Default sort

By default we can sort by name.

Once we are able to sort the facet values (algolia/algoliasearch-helper-js#178) then we can provide the option here.

[vvo]

We need to be able to indicate

instant.addWidget(
  instantsearch.widgets.chooseMany({
    attribute: 'category.name',
    type: 'AND' // conjunctive
    // type: 'OR' // disjunctive
  })
)

cc @maxiloc

[maxiloc]

For me it makes more sense to separate conjunctive and disjunctive into two widgets. As it might not be the same template.

[bobylito]

This component is a list so the name should reflect that. Also the final user make multiple choices. So I propose to rename it to multipleChoiceList

[bobylito]

Humm the and/or question is tricky. On one hand I would say that it's not the user concern, he only wants to do the UI. But on the other hand they might want to do it when (very borderline case) they have arrays for the conjuctive facet attribute...

Imho, for now let's now provide the option and consider it's for disjunctive facetting only.

What do you think? (no strong feelings :P)

[redox]

I think we should really not include a new wording here. All UI components I used were always speaking about "facet" (that's definitely not too technical). I'm OK to not expose the "conjunctive/disjunctive" words which are hard to understand but I would really not use "chooseMany".

Proposal:

instant.addWidget(
  instantsearch.widgets.facetList({
    attribute: 'category.name',
    type: 'checkbox' // link, radio
  })
)

[vvo]

For me it makes more sense to separate conjunctive and disjunctive into two widgets. As it might not be the same template.

@maxiloc You will be able to pass a template to the widget of course.

[vvo]

All UI components I used were always speaking about "facet"

Which one @redox. I am not against having facetList but everything is a facet (slider, switch) so I am not sure it makes more sense.

Also I am against type: 'checkbox' or link, radio. Because it will not answer all use cases. We can have checkboxes by default then provide a template option that will be able to solve all other use cases.

What do you think?

[vvo]

So I propose to rename it to multipleChoiceList

This is a good name and I like it. Very descriptive, no question about the usage of the widget.

I updated the API Proposal (top description of this page) for this widget, please read it before replying.

[bobylito]

Ok for me!

[pixelastic]

As algolia/algoliasearch-helper-js#178 seems to be done, I think we should order by isRefined/count/name instead of just name by default. Seems closer to the most common use case of such a widget.

[redox]

Seems closer to the most common use case of such a widget.

When using checkboxes, I'm still very confused when I click and the lists is reordered putting the refined values on top. But it makes sense to have the ability to do it.

[redox]

I think we should really not include a new wording here

And what about refinementList? 💥

[vvo]

And what about refinementList?

Like 👍

But what about menu, it's just a refinementList also, and facetList is a refinement list and a menu 🎱

[redox]

I would merge all refinements widgets. It's really the same from a lot of POV.

I was a bit confused by the menu naming, which is actually a widget refining on one (and only one) value: if one value is selected and you click another value, it first unselects the first one.

Something like (updated):

// conjunctive faceting: 
instantsearch.widgets.refinementList({
  facetName: 'my_attr'
});

// disjunctive faceting:
instantsearch.widgets.refinementList({
  facetName: 'my_attr',
  disjunctive: true
});

// menu (single value faceting):
instantsearch.widgets.refinementList({
  facetName: 'my_attr',
  multiple: false // not super happy about that one, however
});

[vvo]

As discussed briefly, still not convinced merging both multipleChoiceList and menu (#49) in a single widget would help our user understand and build an instant search.

If I was to build the https://blog.algolia.com/ menu or the http://magento.algolia.com/catalogsearch/result/?q=__empty__ left menu then if I need to do this:

instantsearch.widgets.refinementList({
  attribute: 'my_attr',
  conjunction: false,
  multiple: false // not super happy about that one, however
});

I would be confused.

If I can do this:

instantsearch.widgets.menu({
  facetName: 'categories'
});

Then I would prefer using this API.

After using and implementing multipleChoiceList, I do agree that the name is not the most obvious but it's currently still our best option I find.

[redox]

I'm OK keeping the menu, so now it's just about "disjunctive" VS "conjunctive" in a single refinementList widget :/

[pixelastic]

I would split the disjunctive/conjunctive in two different widgets (at least on the public facing API, so the building blocks are easy to understand, even if the underlying private code is shared).

[vvo]

I would keep a single widget be it refinementList or multipleChoiceList and add this:

instantsearch.widgets.refinementList({
  facetName: 'anAttribute',
  mode: 'AND', // or type: 'AND' or smg like that
});

[vvo]

I would not split because we struggle naming only one widget so two widgets should be hard. If we manage to find two good names then yes otherwise refinementList or multipleChoiceList is ok.

[redox]

refinementList 👍

What about operator instead of mode?

[vvo]

I am ok with refinementList mostly because it does give a better hint on the purpose of the widget (to refine, like any widget but explicitly for this one).

operator seems good too, now multipleChoiceList was found by @bobylito, what do you think!? Agree to move to refinementList?

[pixelastic]

When using checkboxes, I'm still very confused when I click and the lists is reordered putting the refined values on top. But it makes sense to have the ability to do it.

Something like reorderOnSelection?

[redox]

Something like reorderOnSelection?

Not sure how it must look like in the instantsearch.js; but the underlying code should either generate:

sortBy: ['isRefined:desc', 'count:desc', 'name:asc']

or

sortBy: ['count:desc', 'name:asc']

[vvo]

in instantSearch.js we could just provide sortBy option in this widget for example. it works?

[pixelastic]

Agreed for an overridable sortBy option in the widget