在查詢后向搜索命中添加屬性並在 InstantSearch.js 中動態重新呈現

Question

我正在為具有普通 JavaScript 實現的網上商店的產品設置 InstantSearch icw Algolia。 我能夠遵循所有文檔，但我遇到了一個問題，即我們有特定於客戶群體的價格，以及諸如實時庫存信息之類的東西（需要再次撥打 API 電話）。

我希望在獲得搜索結果后從我們自己的后端理想地加載這些屬性。

我認為這只是在收到搜索結果后對其進行操作並僅重新呈現前端的問題（無需再次調用 Algolia 搜索 API 獲取新結果）。

這有點棘手。 transformItems 功能是可能的，但我希望已經顯示結果並將其他數據加載到命中模板中，而不是在顯示命中結果之前。

所以我最終得到了一個自定義小部件，我可以在那里訪問和操作結果，但這里的問題是我不知道如何將這些更改反映到呈現的模板中。

我的小部件的代碼（嘗試將每個股票編號設置為9）如下：

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

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

數據已更改，但從模板生成的 html 並未反映命中對象的任何更改。

那么，如何在更改命中數據后觸發重新呈現，而不觸發新的搜索查詢？

我在文檔中的任何地方都找不到 function 來執行此操作。

謝謝！

Answer 1

hits 小部件中有 transformItems function，可讓您根據需要轉換、刪除或重新排序項目。 它在項目顯示之前被調用。

如果我使用你的例子，它會是這樣的：

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

當然，您可以在其中某處添加 API 電話。

vanilla JS 庫的文檔：