具有多个索引和多个分页小部件的 Algolia Instantsearch

Question

我已经使用 1 个搜索输入和多个索引以及多个 stats/pagination 小部件实现了 instantsearch.js。除了分页小部件外，一切似乎都正常工作。

这是代码笔https://codepen.io/flrrrhoffpauir/pen/EEpWre

collections.addWidget(
    instantsearch.widgets.pagination({
        container: '#collections-search-pagination',
        showFirstLast: false,
        labels: {
            next: '>',
            previous: '<',
        },
        cssClasses: {
            root: 'search-pagination'
        }
    })
}

search.addWidget(
    instantsearch.widgets.pagination({
        container: '#stories-search-pagination',
        showFirstLast: false,
        labels: {
            next: '>',
            previous: '<',
        },
        cssClasses: {
            root: 'search-pagination'
        }
    })
}

如果您搜索“martin”，然后单击“故事”选项卡，您可以看到结果并且分页功能正常。如果您现在单击 Collections 选项卡，您可以看到分页小部件根据统计小部件返回的结果数量具有正确的页数，但是当您单击转到第 2 页时，您只是滚动到页面顶部，但不加载第 2 页数据。

我怎样才能在页面上同时获得两个或多个分页小部件并且它们都能正常工作？

这就是我创建多索引搜索的目的，但它们不包括多个分页小部件：https://jsfiddle.net/j9nwpz34/49/

Answer 1

searchFunction实现应该传输所有需要同步的信息。例如，在您的情况下，您有一个要在 InstantSearch 实例之间同步的分页小部件，因此您要在查询参数之上传输分页属性。

var search = instantsearch(
{
  /* appId: '',
  apiKey: '', 
  indexName: 'movies',*/
  searchFunction: function(helper) {
    var query = movies.helper.state.query;
    var page = movies.helper.state.page;
    products.helper.setQuery(query);
    products.helper.setPage(page)
    products.helper.search();
    helper.search();
  },
  searchParameters: {
    hitsPerPage: 3
  }
});

我修改了 JSFiddle to match your need. You can learn more about this state by going to the JS Helper documentation（InstantSearch.js 的内部状态管理）。

更新基于jsFiddle provided：

示例的其余部分仍然有效。但是，需要注意的一点是，如果您在帮助程序中进行修改，它将重置页面。在提供的 fiddle 中，您在集合 searchFunction 中进行了这样的更改。您将始终设置查询，这将始终将页面重置为 0。因此出现错误。

这是一个fixed fiddle

具有多个索引和多个分页小部件的 Algolia Instantsearch

Algolia Instantsearch with Multiple Indices and Multiple Pagination Widgets

pagination

algolia

instantsearch.js