@eunjae-lee/instantsearch-widget-sortby-ul v1.1.0

InstantSearch.js widget displaying a list of indices, allowing a user to change the way hits are sorted. Equivalent of the offcial sortby widget using <ul><li> markups instead of <select>.

Summary

• Demo
• Installation
• Usage
• Options
• Compatibility
• About InstantSearch.js
• Contributors & Licence

Get started

Demo

Demo on CodeSandbox.

Install

npm install @eunjae-lee/instantsearch-widget-sortby-ul
# or
yarn add @eunjae-lee/instantsearch-widget-sortby-ul

Usage

import instantsearch from 'instantsearch.js';
import algoliasearch from 'algoliasearch/lite';
import { sortBy } from '@eunjae-lee/instantsearch-widget-sortby-ul';

const searchClient = algoliasearch('appId', 'apiKey');

const search = instantsearch({
  indexName: 'indexName',
  searchClient,
});

search.addWidgets([
  sortBy({
    container: '#sort-by' // or document.querySelector('#sort-by')
    items: [
      { value: 'instant_search', label: 'Most relevant' },
      { value: 'instant_search_price_asc', label: 'Lowest price' },
      { value: 'instant_search_price_desc', label: 'Highest price' },
    ],
  }),
]);

search.start();

Options

container

string | HTMLElement | required

The element to insert the widget into.

This can be either a valid CSS Selector:

sortBy({
  container: '#sort-by',
  // ...
});

or an HTMLElement:

sortBy({
  container: document.querySelector('#sort-by'),
  // ...
});

items

object[] | required

The list of indices to search in, with each item:

• label: string: the label of the index to display.
• value: string: the name of the index to target.

sortBy({
  items: [
    { label: 'Featured', value: 'instant_search' },
    { label: 'Price (asc)', value: 'instant_search_price_asc' },
    { label: 'Price (desc)', value: 'instant_search_price_desc' },
  ],
  // ...
});