javascript - 使用 Algolia instantsearch.js 有选择地使用不同的范围 slider

Question

对于 Algolia Instantsearch.js，我希望根据查询字符串中传递的 country_code 参数的值有选择地使用不同的 rangeSliders。

如果例如:country_code 是“FR”，我想使用 total_area_meters 范围 slider ，并使用另一个使用欧元的范围 slider 。对于“英国”，我想使用 total_area_ft 和另一个使用磅的范围 slider 。

尽管我在等待(并希望)https://github.com/algolia/instantsearch.js/issues/753要实现，Algolia 支持人员告诉我可以使用帮助程序库:https://github.com/algolia/algoliasearch-helper-js让这个工作。

我有例如:尝试使用以下方法选择性地启用析取面:

search.addWidget({
  init: function (opts) {
    // opts.helper contains the underlying algoliasearchHelper
    if(detected_locale === 'fr'){
        opts.helper.setQueryParameter('disjunctiveFacets', [
            'total_area_meters','price_eur'
            ]); 
//...

虽然这样做还不够:除其他问题外，页面上仍然有 slider 小部件，例如:需要“total_area_feet”和“price_gbp”，这会引发 javascript 错误 - 我需要以某种方式禁用它们，而且还有相当突兀的需要有选择地删除的 url。

例如:如果我的析取面是:total_area_meters:我得到这样的 url:

&nR[total_area_meters][>=][0]=135&nR[total_area_meters][<=][0]=770 - 当我有一个使用脚的国家代码时，需要将其删除。

所以我的问题是:

• 有没有办法通过 js 以编程方式有选择地启用/禁用 instantsearch.js rangeslider 小部件？ (或者我可以以某种方式以编程方式设置它们的值/重置它们以便它们没有查询参数吗？)

• 如果上面的解决方案没有涵盖，是否有任何预建函数可以让我清理 rangeslider url 参数？谢谢!

Answer 1

在 Algolia 的 Tim Carry 的帮助下，我找到了解决方法。它并不完美，但简而言之，我首先将所有 slider 添加到页面中。然后我使用以下方法有选择地隐藏它们:

.hideClass { 
    display: none; 
}
$sliders[i].addClass('hideClass');
// or
$sliders[i].removeClass('hideClass');

这比以下表现要好得多:

$sliders[i].show()
//and
$sliders[i].hide()

取决于 url 中的 country_code。我发现(不幸的是)有必要在每次渲染调用时(不仅仅是在 init() 上)重新发出隐藏/显示命令，例如:

search.addWidget( {
  render: function(opts) {
    show_hide_sliders();
  }
});

可以使用以下方法删除 slider 的所有 url 参数:

helper.removeNumericRefinement(slider_attribute[i]);

只有在国家代码发生变化时才会发布。而且它几乎可以正常工作(尽管需要注意:到目前为止只进行了有限的测试)。希望这对某人有帮助。

编辑:为了回应评论，请注意:在这种情况下，我通过使用 opts.helper 获得了 helper 的句柄(但我可能也使用 search.helper 成功了。)。例如:

search.addWidget( {
  render: function(opts) {
    show_hide_sliders();
    opts.helper. ... // add your helper methods...
  }
});