toggleRefinement with numericFilter

[Spone]

Hello,

I'm trying to use a toggleRefinement to enable or disable a numericFilter. The use case is that I want to have a checkbox "Registrations open", that filters hits based on a registerUntil attribute, that contains a Unix timestamp.

Another use case would be a checkbox "Finished events" that filters hits based on their date (ie if date < now).

In terms of code, I would expect something like this to work:

const now = Math.floor(Date.now() / 1000);

instantsearch.widgets.toggleRefinement({
   container: '#registrations-toggle-refinement',
   attribute: 'registerUntil',
   on: '>' + now,
   off: '<=' + now,
   templates: {
     labelText: 'Registrations open',
   },
});

What do you think? Is there a way to achieve this with the current toggleRefinement implementation? If not, what would be your recommended approach?

[Haroenv]

ToggleRefinement is meant to set specifically disjunctive facet refinements, not numeric refinements. The way to go then would be a numeric menu like this:

  instantsearch.widgets.numericMenu({
    container: '#price-list',
    attribute: 'price',
    items: [
      { label: 'past', start: Math.floor(Date.now() / 1000) },
      { label: 'future', end: Math.floor(Date.now() / 1000) },
    ],
  })

https://codesandbox.io/s/green-darkness-7h5kj?file=/src/app.js

If the rendering should be a single "checkbox", that could be implemented using the connector, however note that unlike toggle refinement, numeric refinement can't have a default value

Sorry for the late reply here, it looks like discussions didn't show up in our issue tracking tool!

[Spone]

Thanks for the reply.

I ended up creating a custom widget for that. It's the first time I'm doing so with the latest instantsearch.js, so if you have suggestions I'm all ears!

// toggle_numeric_refinement.js

const widget = widgetOpts => {
  const fragment = document.createRange().createContextualFragment(`
    <label>
      <input type="checkbox" value="true" />
      ${widgetOpts.templates.labelText}
    </label>
  `);
  const input = fragment.querySelector("input");
  const attr = widgetOpts.attribute;

  return {
    init(initOpts) {
      widgetOpts.container.appendChild(fragment);

      input.addEventListener("change", e => {
        const checked = e.target.checked;
        const refinement = checked ? widgetOpts.on : widgetOpts.off;

        initOpts.helper
          .clearRefinements(attr)
          .addNumericRefinement(attr, refinement[0], refinement[1])
          .search();
      });
    },
    render(renderOpts) {
      const isRefined = renderOpts.helper.getNumericRefinement(attr, widgetOpts.on[0]);

      if (!isRefined) {
        input.checked = false;
      }
    },
    dispose() {
      const rootEl = input.closest("label");
      rootEl.parentNode.removeChild(rootEl);
    }
  };
};

export default widget;

Then I use it like this:

import toggleNumericRefinement from "./widgets/toggle_numeric_refinement";

const now = Math.floor(Date.now() / 1000);

search.addWidget(toggleNumericRefinement({
  attribute: "date",
  on: ["<=", now],
  off: [">", now],
  templates: {
    labelText: "finished events"
  },
  container
});

search.addWidget(toggleNumericRefinement({
  attribute: "registrationEndDate",
  on: [">", now],
  off: ["<=", now],
  templates: {
    labelText: "registrations open"
  },
  container
})

[Haroenv]

This is an interesting custom widget, and definitely would work for most use cases. Personally I'd edge on making a custom connector first and then a widget, so the facet logic isn't mixed with the UI logic, but if it's not meant to be reused many times, it should be okay.

If you want the widget to work in routing, you'll want to implement getWidgetUiState (map from helper state to a flat object) and getWidgetSearchParameters (the opposite). In dispose you also will want to clear the helper state related to this refinement in case the widget gets unmounted.

If you implement a getWidgetRenderState function where you return an isRefined boolean and refine function (toggles between off and on value) and use that in render and init, it would make the code more reusable.

Also note that what you currently have, has pretty much the same downside as I said with numeric menu, which is that it starts with "all values", then toggles between "future" and "past", and not between "future" and "all values". This could of course be on purpose, but a single checkbox will never be able to efficiently portray those three states.

We are currently working on improving the custom widget documentation, so will definitely keep you updated once that's updated!