Vue Instant Search

Hi. I am using Vue InstantSearch and I need to filter the data that are being displayed so that every url (e.g. /category/mobiles) displays only the entries with a specific category_id (which I will provide).

Is there any way to do that? The user will still be able to filter the data (using refinement lists, by color size etc.) but only the entries that have a specific category_id.

Hope I explained it clearly :smiley:

Hi @chrys,
I plan to add this to the docs: https://github.com/algolia/vue-instantsearch/issues/139

In your case, it depends on if you have existing facets registered.

The easiest way would be to add the category_id to your records.
The add that attribute to the attributes to facet in the Algolia dashboard.

The you will need to manually instantiate the search store, register the facet and refine on the current category_id.

Here is an example:

Let me know if that helps.
We will also investigate the possibility to do this in a more declarative way.

1 Like

Thanks a lot, I will give it a try! :slight_smile:

It would be really nice if we could just use the following syntax, or similar

<ais-index :category_id="100">
    ....
</ais-index>

It would be something along those lines @chrys, but we need a little more information than that.
There are 3 concepts hidden behind our components:

  • conjunctive facets
  • disjunctive faceting
  • tree faceting

If the facet is already added, then something close to your syntax could work.
But I think that in your case, you do not have a component listing the categories, so which means you first need to add it.

I will investigate and see what we can do.

So I am trying to make this work without luck.

This is my .vue file: https://pastebin.com/9BEMas9L

and this is how I use the component

<product-list :category_id="{{ $category->id }}">

But for some reason I am getting no results. The XHR request returns empty.

When I hard code the โ€˜this.category_idโ€™ to an integer, it displays the listing correctly, so I assume my problem is when passing the category_id to the component.

Vue chrome extension displays ProductList the prop correctly though. So the problem should be between the component and the ais-index.

Any ideas?

Yes, I can see one small issue.
this is not available yet when you call it on line 20.

Can you try this instead?

import {
    createFromAlgoliaCredentials,
    FACET_OR,
} from 'vue-instantsearch';

const store = createFromAlgoliaCredentials(
    'XXX',
    'XXXX'
);
store.indexName = 'products';

export default {
    props: ['category_id'],
    data() {
        return { searchStore: store }
    },
    created() {
        this.searchStore.addFacet('category_id', FACET_OR);
        this.searchStore.addFacetRefinement('category_id', this.category_id);
    }
}
3 Likes

Amazing!! Thank you very much @rayrutjes!! It works now!

2 Likes

Please feel free to ping me again.
This kind of feedback will help us make sure the library heads in the right direction in terms of use of use.

Happy coding!

Cheers,

I see one issue with the code shared above. If you were to use the Clear component, it would also clear the refined category.

Let me know if that turns out to be an issue in your case and weโ€™ll find a workaround.

The clear component is not important for me.
Thanks again for your help :slight_smile:

1 Like