Sort results is not working after customizing style of sort select menu

I have updated the sort select menu using Jquery selectric plugin.

This is the old code which was working:

<span class="ais-sort-orders-container">
 <select class="ais-sort-by-selector">
  <option class="ais-sort-by-selector--item" value="shopify_tshproducts">Relevance</option>
  <option class="ais-sort-by-selector--item" value="shopify_tshproducts_price_asc">Price Low -&gt; 
   High</option>
  <option class="ais-sort-by-selector--item" value="shopify_tshproducts_price_desc">Price High -&gt; 
    Low</option>
  </select>
</span>

This is the updated code that is not working.

<span class="ais-sort-orders-container">
 <div class="selectric-wrapper selectric-ais-sort-by-selector selectric-hover selectric-below">
  <div class="selectric-hide-select">
   <select class="ais-sort-by-selector" tabindex="-1">
    <option class="ais-sort-by-selector--item" value="shopify_tshproducts">Relevance</option>
    <option class="ais-sort-by-selector--item" value="shopify_tshproducts_price_asc">Price Low -&gt; High</option>
    <option class="ais-sort-by-selector--item" value="shopify_tshproducts_price_desc">Price High - &gt; Low</option>
   </select>
  </div>
  <div class="selectric">
   <span class="label">Price Low -&gt; High</span><b class="button">▾</b>
  </div>
  <div class="selectric-items" tabindex="-1" style="width: 187px;">
   <div class="selectric-scroll">
    <ul>
      <li data-index="0" class="ais-sort-by-selector--item">Relevance</li>
      <li data-index="1" class="ais-sort-by-selector--item highlighted selected" value="shopify_tshproducts_price_desc">Price Low -&gt; High</li>
      <li data-index="2" class="ais-sort-by-selector--item last">Price High -&gt; Low</li>
    </ul>
   </div>
  </div>
  <input class="selectric-input" tabindex="0">
 </div>
</span>

Any idea why updated code is not working even it includes the same CSS classes and values?

Hi @yudechen,

Thanks for contacting Algolia. In all honesty, we are unsure of why this is occurring. Once you begin to introduce other variables such as other third-party code libraries, we can no longer guarantee that the Algolia functionality will remain the same.

Do you need the selectric plugin or would you be able to continue to your production site without it, and continue using Algolia?

Hi @ajay.david
Thank you for your time with us.

I understand but we needed the select plugin.

We got sort order value by adding click event of the select menu and replace the URL with the new sort order value(idx).

For example.
Old URL:
https://store.myshopify.com/search?q=redshoe&hPP=12&idx=shopify_xproducts&p=0&is_v=1

Redirect to new URL:
https://store.myshopify.com/search?q=redshoe&hPP=12&idx=shopify_xproducts_price_asc&p=0&is_v=1

We are not sure this is the correct way but it worked for us.
Thank you.

1 Like