Instantsearch.js: Can i use sortBySelector like a hierarchicalMenu?

[oscarhandsome]

I have filters on the site, and it's using sortBySelector:

<select data-reactroot="" class="ais-sort-by-selector">
  <option class="ais-sort-by-selector--item navbar-nav" value="sa">Sort by</option>
...other options....
</select>

works perfect but i need filter in the hierarchicalMenu can i convert it to?

<ul class="navbar-nav">
  <li class="nav-item">
    <div class="nav-link">Popular</div>
   </li>
...other li tags....
</ul>

Where can I see the example? https://prnt.sc/l69xrt
or this is unreal?

[Haroenv]

Is this what you mean? https://codepen.io/Haroenv/pen/wrrrKj

[oscarhandsome]

@Haroenv looks good but i think this is not what i want
i need this block https://prnt.sc/l69xrt
my select works prefect here
but i need ul li for sorting like here

[Haroenv]

Then you need to follow the link I gave you and replace “select” by “ul”, “option” by “li”.

[oscarhandsome]

@Haroenv Hello, could you please copy to jsfiddle your exaple? https://prnt.sc/l6z90r

[Haroenv]

Sorry, I don't have access to codepen either; but here's a similar example, done with menu: https://jsfiddle.net/z5eoh1ov/

[oscarhandsome]

@Haroenv this is code based on ES6?

[Haroenv]

no, it seems to be mostly ES5 from what I saw. You can use babel to transform anyway :)

[oscarhandsome]

@Haroenv yeah but i have thousands line of another code,

[Haroenv]

I mean transforming only that bit, babel has a repl you can do this in for example: https://babeljs.io/repl#?babili=false&browsers=last%202%20versions&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBBCmBDATsAFjAvDAlpKiYUCK6AFAN4BQMMiADvQJIAmAXDAOQA2iU8YYAE9OAGhp16OANLwhHTgDYARvAAMAVgDsigGa7FARmCaAzCw26AnIlMAmOxvh3EVtbp1iJeFvAAeAHKIALbwCnjQhFAA-iSoaF60AK7I3ADKQoIcUMhJ8FQAvgCUANxUVHHoAHSILCwA6jgsAObwUGQRBESVaFUA7k2txFVoOMSUVACQoESIePDICgDEo8SJMPzB9Lz8EBzUtLTwW1DyXAEgMMjwEEnca-KHuJsKADzHAHwAEmMwFBQgZQAK3gwCgTAAIgUCq8APSffb_aKjZpobg4VFQABKNzuUCqYBC8CqADdENw8tCCpwJAVCkVSuVYbCYMAktAQMEYAADa5gXzIABiYG5G0ufIFGzQ8FZ7KgnJgAFkBEkYAMWm0qLokoIoDhwFcBALhWRlWAkjj-Qs8M0APL0PXgCCiXAQQU4ZDQS0Cm1FP7eXQwDpuj1eo3WsDNP0HQ5mi3h5A2-2OyD9QZtAAKKBCECqMwI82QF18EieIygwW4ZE4rwQ3FBUA-cLrDc4jNLSpV3ojdod-tT6qGWeQObz4ALYAWxfyT1oVV0PmrLbBbY7c_A1fQhFaYhg2t1_bI8BJAig0bXsa7CaTfadVWuC8nR5PRCqBGQQ1J5LyjNnMGKZS0HSEhksgMAgLekBYJ25rdomkbJv2uZjMcubBAwZD7mCh4ocE55PNcUApGAzzHFUOAQDij7wCwF4APxcK8EEpjAZIUvAmAAEScDAADUpHBF-7F8VwnFwPA9ZgjRHw8fxuFVLwqjcCJNawsx_YyRebzqQabF5FxskCUJeQqZxMkifJikSSpcI6WAMmAf-v4wBIzJ0HUdDcMpdm4EQly1hJDYfBIMzQIa1EsEwmzQXGcE3imyGbLmj4sB00WYB8RkUVR8wsM5dm5jqECjLo7QSJMD65VFxwdpMDE1j5ekcdxImVZOkWbMZMr8ZwZlpPAMrktwtmQZpf7aZBrHfs1Q1icu_AsB8_WDV5I0pmNMDtrQsXXghkG5oOmbZsEub5nMk5FiAJZlilS6BSuRQduWlZkAVjLAW5MyTmCPISgswqivKMGqtwIDNDgwBUKBsocsEcbQZ0UQ9GOYDffKnoo2jcZkH9QpgO2yO1A06btGysPYzGZ2FtOHAACTVksoTmm2jx0FAOQ4MoST8EEoQKKMCykKMwDkgAwnw8DNCAiY3ApJLcGoNLFI9FRIPEVSRMg7SlEAA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=true&timeTravel=false&sourceType=script&lineWrap=false&presets=es2015-loose&prettier=true&targets=&version=6.26.0&envVersion=1.6.2

[oscarhandsome]

@Haroenv i know what is babel, but i have thousand line of code, this is can be bad for project,
thank you
i will try
at first i need understand how i will transform sort by select to ul li from your example...

[oscarhandsome]

@Haroenv
i still not resolved this item
but i'm tried, and got issue

Uncaught TypeError: Cannot read property 'connectMenu' of undefined at scritp.js?v=1.95:228

do you know what it can be?

can be this issue from old version instantsearch.js 1.8.16 ?

thank you for answers.

[Haroenv]

yes, connectors are only available in InstantSearch v2 :)