-
Notifications
You must be signed in to change notification settings - Fork 510
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add data attributes to sortBySelector #1587
Comments
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. |
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:
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 :) |
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> |
Not sure there is more to say here. Let's close this for now. |
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 For my use case I'm using Materialize which uses a plugin for styling |
You can use the connector now |
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
The text was updated successfully, but these errors were encountered: