Filtering using opening hours + hook up to InstantSearch toggle

Hi there!

I’m facing 2 issues at the moment and hoping someone can help out!

I’m building a search UI for a business directory which will include a “Open Now” toggle to filter only businesses which are currently open (based on current time).

To facilitate this I’ve transformed all opening hour times to be indexed in minutes (eg: 09:00 = 540, 17:30 = 1050). The data is then saved as an array and pushed to Algolia (and added to attributesForFaceting as “filter only”):

Example data structure:

'opening_hours' => [
  'monday' => [
    'start' => 540,
    'end' => 1050,
  ],
  ...
];

Issue 1 (SOLVED)

Before getting to hooking this up to a toggle input, I wanted to test the filter to make sure the correct data is getting returned. However, I can’t seem to get the filter working correctly:

Example filter using 18:00 as the time:

opening_hours.monday.start < 1080 AND opening_hours.monday.end > 1080

Strangely, this filter will still return the above example business which closes at 17:30 (1050). When filtering using a single filter (no AND), results seem to be correct. Am I doing something wrong here, or can I not perform boolean operators using two numeric filters like this?

UPDATE: just solved this, was using numericFilters and looks like this needed to be normal filters.

Issue 2
Once the above filter is working, how can I hook this up to a single checkbox input using InstantSearch.js? I’ve been using the built-in widgets so far and wanted to use the toggleRefinement widget here. Is that possible or should I use something else/build something custom?

Thanks!

Ended up solving Issue 2 using a custom widget. Would still love to hear if this is possible using the existing widgets!

In case anyone with similar requirements comes across this, here’s what I did:

HTML

<label>
    Open Now:
    <input id="search-open-now" type="checkbox">
</label>

JS

const search = instantsearch({
    indexName: 'index_name',
    searchClient: algoliasearch(...), // API keys
});

search.addWidgets([
    {
        init({ helper }) {
            const input = document.querySelector('#search-open-now');
            const filter = 'opening_hours.monday.start < 1080 AND opening_hours.monday.end > 1080';
    
            input.addEventListener('change', ({ target }) => {
                helper.setQueryParameter('filters', target.checked ? filter : '').search();
            });
        }
    },

    // ...other widgets
]);

search.start();