Vue-instantsearch: feat: initial-refinement

[rayrutjes]

[rayrutjes]

Hey @julienbourdeau , I think you raised this point.
Can you remember me exactly what you where trying to achieve?

[julienbourdeau]

Well, I'm not sure what I said earlier but I have one thing in mind right now.

I would like to be able to define a template for the refinement list. So for example, I could have color circle for faceting the color, instead of a list of checkboxes.
It's an example, for color this could be separate components in the future.

Is it what we talked about?

[rayrutjes]

No, it was not what you talked about I think, because I just remembered your initial issue thanks to your answer 😂 .
I think you initially wanted to init a search page with a facet active.

[julienbourdeau]

Oh yeah! I remember now :D

[JayFliz]

Hi there.
This is exactly what I want to do :-)
Do you know if it will be added ?
To confirm, I want to be able to preselect a facet on a RefinementList widget.
I'm using Single File Components and Vue.js.

tia

[samouss]

With the version 1 it's not possible, with the version 2 (currently in beta) there is no built-in way but you can use the ais-configure widget to provide any search parameters. You can use this to set an initial refinement on a ais-refinement-list. This is clearly a workaround we want to provide a better API for this. Note that if the prop provided to the ais-configure widget change the values are re-applied no matter what was previously refined.

<template>
  <ais-instant-search [...]>
    <ais-configure v-bind="initial"/>
    <ais-refinement-list attribute="brand"/>
  </ais-instant-search>
</template>

<script>
export default {
  data() {
    return {
      initial: {
        disjunctiveFacetsRefinements: {
          brand: ["Apple"]
        }
      }
    };
  },
};
</script>

[JaopMX]

disjunctiveFacetsRefinements: {
          brand: ["Apple"]
        }

This totally worked for me.
Also I would like to add that some facets may not be in the disjunctiveFacets, in my case i used one with hierarchicalFacets, so the solution would work with hierarchicalFacetsRefinements, it also works with both initial refinements!

[Haroenv]

Yep, menu & hierarchical menu uses hierarchicalFacetsRefinements; refinement list uses disjunctiveFacetsRefinements. Rating and numerical menu use numericalFacetsRefinements

[moosapour-arash]

hi , the workaround provided by @samouss works but how to prevent initial refinements from getting re-apply every-time an item in refinements changes.
i want to initial value happens only once per page-load not every time the refinement list changes
e.g : initial value pre-selects color:red , user select the blue and unselect the red , now if user set another refinement like check:In_stock_only, because refinements list changes, the color:red will get selected again by it self,how to prevent this ?

[Floriswijgergangs]

Is there an example for hierarchicalFacetsRefinements? Categories.lvl0 is working but when I try it with categories.lvl1: "value1 > value2", I'm getting separator errors or forEach javascript errors. Both in the InstantSearch -> getRefinements.js file.
Would like to get the initial hierarchical refinement working.

[Haroenv]

If you are using Vue InstantSearch v2.7.0, you can use ais-state-results to easily find the currently applied search parameters:

<ais-state-results>
  <pre slot-scope="{state}">{{state}}</pre>
</ais-state-results>

You can then see that the hierarchicalFacetsRefinements for a widget which is refined on a level will be like this:

{
  "hierarchicalFacetsRefinements": {
    "hierarchicalCategories.lvl0": [
      "Appliances > Fans"
    ]
  },
}

Thus, it's the value of the deepest refined level, but on the key of the first level.

A sandbox showing this technique is here: https://codesandbox.io/s/vue-instantsearch-v2-starter-spi7n

[pboethig]

this is what you want:
https://www.algolia.com/doc/api-reference/widgets/instantsearch/vue/

Just add a function in data wich prepopulates state

searchFunction(helper) {

helper.state.facetFilters = [["active:inaktiv"], ["storeFilter:Bad Reichenhall"], ["productTypes:Poker", "productTypes:Event"]];
console.log(helper);

            helper.search();
    },