vue-instantsearch
vue-instantsearch copied to clipboard
algolia
feat: initial-refinement
Hey @julienbourdeau , I think you raised this point. Can you remember me exactly what you where trying to achieve?
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?
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.
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
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>
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!
Yep, menu & hierarchical menu uses hierarchicalFacetsRefinements; refinement list uses disjunctiveFacetsRefinements. Rating and numerical menu use numericalFacetsRefinements
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 ?
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.
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
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();
},
