在查询后向搜索命中添加属性并在 InstantSearch.js 中动态重新呈现

Question

I am setting up InstantSearch icw Algolia for products of a webshop with the plain JavaScript implementation. I am able to follow all the documentation, but I am running into the problem that we have prices specific to customer groups, and things like live stock information (need to do another API call for that).

These attributes I would like to ideally load after getting search results, from our own back-end.

I thought it would simply be a matter of manipulating the search results after receiving them and re-rendering only the front-end (without calling the Algolia search API again for new results).

This is a bit tricky. The transformItems functionality is possible, but I want to already display the results and load the other data into the hit templates after, not before displaying the hit results.

So I end up with a custom widget, and I can access and manipulate the results there, but here the problem is that I don't know how to reflect these changes into the rendered templates.

The code of my widget (trying to set each stock number to 9) is as follows:

{
    render: function(data) {
        const hits = data.results.hits;

        hits.forEach(hit => {
            hit.stock = 9
        });
    }
}

The data is changed, but the generated html from the templates does not reflect any changes to the hit objects.

So how could I trigger a re-render after altering the hits data, without triggering a new search query?

I could not find a function to do this anywhere in the documentation.

Thanks!

Answer 1

There is the transformItems function in the hits widget that allows you to transform, remove or reorder items as you wish. It is called before items displaying.

If I use your example, it would be something like this:

transformItems(items) {
  return items.map(item => ({
    ...item,
    stock: 9,
  }));
}

Of course you can add you API call somewhere in that.

The documentation for the vanilla JS library:

https://www.algolia.com/doc/api-reference/widgets/hits/js/#widget-param-transformitems