How to Filter by ranges with Radio Button

Hi,
we have built a filter option via Radio Buttons to let the customer see delivery times, e.g.:

  • Up to 1 Week
  • Up to 2 Weeks
  • Up to 1 Month
    etc.

Now, if you select one of them it only selects hits with that particular value but not with values smaller or equal to it. E.g. if you select “Up to 2 weeks” it should also include the “Up to 1 Week” items - currently it doesnt. Before I start to build a (hacky) TS native solution myself, I wanted to ask if anyone has an elegant and comprehensive way of solving this problem at hand? I am sure this problem has come up (and has been solved) many times before.

We pass in the values from Algolia as strings unfortunately, so there is no frontend adjustment being made at this point.

Any help is highly appreciated.

Thanks so much!

Hi @bew.fra

I don’t know how your data is structured (values etc.) but it seems like Filter By Numeric Value which provides < , <= , = , != , >= and > operators, or Filter By String with the OR or NOT operators might work for you.

Note: I haven’t tried this myself as the current dataset I am working with doesn’t require such filtering.

Hi,
We had a similar requirement; books that came/will come available (Verschijningsdatum):

Periode

The attribute Verschijningsdatum is send to Algolia as a number: yyyymmddhh24miss.
So, today would be sent as 20210715000000.

We use instantsearch.js for building.

The filter is of type numericMenu. We set the (date) values for the different periods and transform them into numberm, in the same format as Verschijningsdatum and use these values in the filter-items (filter-options).

Our code (no javascript-guru’s here):

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|| Verschijningsperiode
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
function addDays(date, days) {
  const copy = new Date(Number(date))
  copy.setDate(date.getDate() + days)
  return copy
}
const _vandaag = new Date();
const _afgelopenWeek = addDays(_vandaag, - 7);
const _komendeWeek = addDays(_vandaag, + 7);
const _afgelopenMaand = addDays(_vandaag, - 31);
const _komendeMaand = addDays(_vandaag, + 31);
const _afgelopenKartaal = addDays(_vandaag, - 90);
const _afgelopenHalfJaar = addDays(_vandaag, - 181);

const _vandaagFilter = _vandaag.getFullYear().toString()   + ('0'+(_vandaag.getMonth()+1).toString()).slice(-2)   + ('0'+_vandaag.getDate().toString()).slice(-2)   + '000000';
const _komendeWeekFilter   = _komendeWeek.getFullYear().toString()   + ('0'+(_komendeWeek.getMonth()+1).toString()).slice(-2)   + ('0'+_komendeWeek.getDate().toString()).slice(-2)   + '000000';
const _komendeMaandFilter = _komendeMaand.getFullYear().toString() + ('0'+(_komendeMaand.getMonth()+1).toString()).slice(-2) + ('0'+_komendeMaand.getDate().toString()).slice(-2) + '000000';
const _afgelopenWeekFilter   = _afgelopenWeek.getFullYear().toString()   + ('0'+(_afgelopenWeek.getMonth()+1).toString()).slice(-2)   + ('0'+_afgelopenWeek.getDate().toString()).slice(-2)   + '000000';
const _afgelopenMaandFilter = _afgelopenMaand.getFullYear().toString() + ('0'+(_afgelopenMaand.getMonth()+1).toString()).slice(-2) + ('0'+_afgelopenMaand.getDate().toString()).slice(-2) + '000000';
const _afgelopenKwartaalFilter = _afgelopenKartaal.getFullYear().toString() + ('0'+(_afgelopenKartaal.getMonth()+1).toString()).slice(-2) + ('0'+_afgelopenKartaal.getDate().toString()).slice(-2) + '000000';
const _afgelopenHalfJaarFilter = _afgelopenHalfJaar.getFullYear().toString() + ('0'+(_afgelopenHalfJaar.getMonth()+1).toString()).slice(-2) + ('0'+_afgelopenHalfJaar.getDate().toString()).slice(-2) + '000000';

const verschijningsperiodeFilter =  numericMenuWithPanelPeriode({
  container: '#verschijningsdatum',
  attribute: 'Verschijningsdatum',
  items: [
    { label: 'Alles'}, 
    { label: 'Komende maand', start: _vandaagFilter, end: _komendeMaandFilter },
    { label: 'Komende week',  start: _vandaagFilter,  end: _komendeWeekFilter },
    { label: 'Afgelopen week', start: _afgelopenWeekFilter, end: _vandaagFilter },
    { label: 'Afgelopen maand', start: _afgelopenMaandFilter, end: _vandaagFilter },
    { label: 'Afgelopen 3 maanden', start: _afgelopenKwartaalFilter, end: _vandaagFilter },
    { label: 'Afgelopen 6 maanden', start: _afgelopenHalfJaarFilter, end: _vandaagFilter }
  ],
  cssClasses: {
    root: 'cb-Filter-container cb-Verschijningsperiode'
  },    
  templates: {
    item: `     
        <label class="{{cssClasses.label}}">
         <input type="radio" class="ais-NumericMenu-radio" name="NumericMenu" id="{{label}}" value="{{label}}" {{#isRefined}}checked{{/isRefined}}>
         <span class="ais-NumericMenu-labelText" style="{{#isRefined}}font-weight: bold{{/isRefined}}">{{label}}</span>
        </label>
    `
  }
1 Like