Add data attributes to sortBySelector

[synonymous1984]

Hi there,

Is there a way to add additional data attributes to a sortBySelector? Would be nice to have this option cause this would allow you to use e.g. select2 for building the dropdown which allows to use the same styling if already implemented in a site.

I´ve tried to make a workaround by abusing the css param but without success :)

Best

[bobylito]

Hi @synonymous1984 thanks for this issue 👍

The recommended way to integrate a third party library is to create a custom widget. A widget is just an object that will have up to 3 methods, like that:

var myCustomWidget = {
  getConfiguration: function(currentSearchParameters) {},
  init: function(opts) {},
  render: function(opts) {}
}

When integrating a library like select2, you are like to only need to implement the init. This method is called before the first search. It receives in the opts object the helper that will let you modify the search parameters:

  {
    init: function(opts) {
      var helper = opts.helper;
      var input = $('#my-searchbox');
      input.click(function() { helper.setQuery(input.value).search(); });
    }
  }

We have more resources about custom widgets on the website. Also we have a dedicated documentation if you want to dig in the helper with examples.

Let me know if you have other questions.

[synonymous1984]

Hi bobylito,

Thanks for your respond. I we have a misunderstandig here :) All I want to do is simply add two data-attributes to the select element of the sort-by selector.

In my case this is a proprietary solution I´m using which dynamically adjusts the layout of the select box:

<select name="o" class="sort--field action--field" data-auto-submit="true" data-class="sort--select">
<option value="1" selected="selected">Erscheinungsdatum</option>
<option value="2">Beliebtheit</option>
<option value="3">Niedrigster Preis</option>
<option value="4">Höchster Preis</option>
<option value="5">Artikelbezeichnung</option>
</select>

You can see the data-auto and data-class attributes here. The behaviour should stay as it is with the sortBySelector.

I´m working on an (open source) Algolia plugin for Shopware, which is a fast growing E-Commerce solution here in Europe. So any help would be welcome :)

[vvo]

Hi @synonymous1984 right now the instantsearch V1 API is not made to allow completely revamping the DOM output of our widgets (controlling the DOM rendering of the widgets while binding events).

That's why you will have to create your own widget for that, for now.

The example given by @bobylito is the way to go. Here's an almost working example:

<select name="o" class="sort--field action--field" data-auto-submit="true" data-class="sort--select">
  <option value="an_index" selected="selected">Erscheinungsdatum</option>
  <option value="some_other_index1">Beliebtheit</option>
  <option value="some_other_index2">Niedrigster Preis</option>
  <option value="some_other_index3">Höchster Preis</option>
  <option value="some_other_index4">Artikelbezeichnung</option>
</select>

<script>
var myCustomSelect = {
  init: function(opts) {
    var helper = opts.helper;
    document.querySelector('#hello').addEventListener('change', function(e) {
      helper.setIndex(e.target.value).search(); // change the index, do a new search
    })
  }
};

instantsearch.addWidget(myCustomSelect);
</script>

[bobylito]

Not sure there is more to say here. Let's close this for now.

[chadokruse]

Is the above solution (e.g. custom widget) still the recommended solution in v2 of Instantsearch to initialize third party plugins?

For most of the widgets we can now use the templates API in v2 to handle third party plugins. However, widgets like sortBySelector do not (yet?) have this feature.

For my use case I'm using Materialize which uses a plugin for styling select elements (among others).

[Haroenv]

You can use the connector now connectSortBySelector as explained in that example @chadokruse