使用Algolia Instantsearch.js選擇性地使用不同范圍的滑塊

Question

通過Algolia Instantsearch.js，我希望根據查詢字符串中傳遞的country_code參數的值來選擇性地使用不同的rangeSliders。

如果例如：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小部件？ （或者我可以以某種方式通過編程方式設置它們的值/重置它們，以便它們沒有查詢參數嗎？）

• 如果上述解決方案未涵蓋，是否有任何預構建的函數供我清理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()

取決於網址中的country_code。 我發現（不幸地）有必要在每個渲染調用上（而不只是在init() ）重新發出隱藏/顯示命令，例如：

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

可以使用以下命令刪除滑塊的所有url參數：

helper.removeNumericRefinement(slider_attribute[i]);

僅在country_code發生更改時才發出。 它似乎幾乎起作用了（盡管警告：到目前為止只有有限的測試）。 希望這對某人有幫助。

編輯：要對評論作出回應，請注意：在這種情況下，我通過使用opts.helper獲得了關於助手的句柄（但我也可能也成功使用了search.helper。）。 例如：

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