How to set RefinementList order by connector

Hi,
I want to change the RefinementList default order.
But the RefinementList API doesn’t contain “orderBy” Props.
I think connector can do this.
Can anyone help me? Give a example please.
Thanks

Hi @terranhl8,

You’re right to change the default RefinementList order you’ll need to use the connectRefinementList connector.

When using this connector, you’ll have access to the list of items through the props, and then you can sort them according to your needs. More details about connectors can be find on our dedicated guide.

Here is an simple example showing you how to sort by count and label using the orderBy function of Lodash.

const ConnectedRefinementList = connectRefinementList(props => {
  const sortedItems = orderBy(props.items, ['count', 'label'], ['desc', 'asc']);
  const values = sortedItems.map(item => <li key={item.value}>
    <label>
      <input type="checkbox" checked={item.isRefined} onChange={() => props.refine(item.value)}/>
      {item.label} - {item.count}
    </label>
  </li>);
  return (
    <div>
      <ul>{values}</ul>
    </div>
  );
});

Then use it like this:

<ConnectedRefinementList attributeName="attributeName"/>

You might be interested by following this thread. We are currently discussing the fact to add a new API entry for our widgets to be able to perform those kind of behavior without the need of a connector. You’re more than welcome to participate :slight_smile:

2 Likes

There’s now an official way to re-order items at the Widget level without having to connect a new widget: transformItems

1 Like