Question

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

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

虽然我等待（并希望）实施https://github.com/algolia/instantsearch.js/issues/753，但Algolia支持人员告诉我，可能会使用帮助程序库：{ {3}}让这个工作。

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

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

虽然这样做还不够：除了其他问题之外，页面上还有滑块小部件，例如：要求＆＃39; total_area_feet，以及＆＃39; price_gbp＆＃39;这会引发javascript错误 - 我需要以某种方式禁用它们，并且还需要有选择地删除相当突兀的URL。

例如：如果我的析取方面是：total_area_meters：我得到这样的网址：

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

所以我对此的疑问是：

有没有办法通过js以编程方式有选择地启用/禁用instantsearch.js rangelider小部件？（或者我可以以某种方式以编程方式设置它们的值/重置它们以使它们没有查询参数？）
如果上面的解决方案没有涵盖，是否有任何预先构建的功能可以清理rangelider 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()

取决于网址中的country_code。我发现（不幸的是）必须在每个渲染调用上重新发出隐藏/显示命令（不只是在init()上），例如：

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

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

helper.removeNumericRefinement(slider_attribute[i]);

仅在country_code更改时才会发出。它几乎可以起作用（尽管需要注意：到目前为止只有有限的测试）。希望这对某人有帮助。

编辑：为了回应这些评论，请注意：在这种情况下，我通过使用opts.helper获得了帮助程序的句柄（但我可能也成功使用了search.helper）。 e.g：

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

使用Algolia instantsearch.js

1 个答案: