Add OR operator between 2 components

I need to create filter like this:
Screenshot from 2020-05-07 16-21-53

I think that for input I should use ais-range-input and ais-toggle-refinement for checkbox, but I need logic when user types from 100$ and enable checkbox - output should be price >= 100 OR without_price = true(or maybe price = 0) . Now it price >= 100 AND without_price = true(or maybe price = 0), I need something like :operator but between components.

How can I do it with this components or need to create own?

Hi @dev22, unfortunately Algolia does not allow or (disjunction) between two different data types, in this case number and boolean. Two solutions are possible here:

  1. make the price 0 for those attributes, and make a custom widget which sets filters: price:0 OR price > 10

  2. make price the size of the maximum number, then add to as either max - 1 or max

You test see this limitation here: https://www.algolia.com/doc/api-reference/api-parameters/filters/#filters-syntax-validator (with A:true OR A > 10 as example filter)

Hello @haroen, one more question, I choose 1 solution, now I create custom widget with connectRange connector, but it use refine from min to max:

methods: {
    refine({min, max}) {
        this.state.refine([min, max]);
    },
},

How can I use this refine with OR filter or which connector can I choose for filters: price:0 OR price > 10? I can not find solution it source code and examples.

I see solution that if checkbox checked - I can set min to 0, it could be solution for me, I think.

For using that you need to go to an underlying level of InstantSearch. A straightforward way is using configure:

<template>
  // other things
  <ais-configure :filters="(inclusive ? 'price:0 OR' : '') + 'price >' + min"
</template>