使用 Algolia instantsearch.js 有选择地使用不同的范围滑块

Question

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

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

虽然我正在等待（并希望）实现 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'
            ]); 
//...

虽然这样做还不够：除其他问题外，页面上仍然存在滑块小部件，例如：需要 'total_area_feet 和 'price_gbp' 这会引发 javascript 错误 - 我需要以某种方式禁用它们，而且还有相当突兀需要选择性删除的网址。

例如：如果我的分离方面是：total_area_meters：我得到一个这样的网址：

&nR[total_area_meters][>=][0]=135&nR[total_area_meters][<=][0]=770 - 当我有一个使用脚的 country_code 时，需要删除它。

所以我的问题是：

• 有没有办法通过 js 以编程方式选择性地启用/禁用 Instantsearch.js 范围滑块小部件？ （或者我可以以某种方式以编程方式设置它们的值/重置它们，使它们没有查询参数？）

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

Answer 1

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

.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();
  }
});

可以使用以下方法删除滑块的所有 url 参数：

helper.removeNumericRefinement(slider_attribute[i]);

仅在国家代码更改时发布。 而且它似乎几乎可以正常工作（尽管需要注意：到目前为止仅进行了有限的测试）。希望这对某人有帮助。

编辑： 为了响应 cmets，请注意：在这种情况下，我通过使用 opts.helper 获得了助手的句柄（但我可能也使用 search.helper 也成功了。）。例如：

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