알고리아 Managing Results(3-20)

UI Sorting Widgets

https://www.algolia.com/doc/guides/managing-results/refine-results/sorting/how-to/use-sorting-ui-widget/

UI sorting widgets | Algolia

 

 

Using replicas with different sorting strategies allows you to provide a way for users to change the sorting on the front end. For example, imagine you have an ecommerce website, and by default, you want to sort search results from cheapest to most expensive. You might want to provide a dropdown or toggle switch to let users sort from most expensive to cheapest.

Because you have one replica index per sorting strategy, you need to change what index Algolia must search into when the user changes the sorting.

While you could handle it yourself, it’s easier to use one of the InstantSearch libraries and leverage the built-in sortBy and relevantSort widgets.

 

정렬 전략이 다른 복제본을 사용하면 사용자가 프런트 엔드에서 정렬을 변경할 수 있습니다. 예를 들어 전자 상거래 웹 사이트가 있고 기본적으로 검색 결과를 가장 저렴한 것부터 가장 비싼 것까지 정렬하려고 한다고 가정해 보십시오. 사용자가 가장 비싼 것부터 가장 싼 것까지 정렬할 수 있도록 드롭다운 또는 토글 스위치를 제공할 수 있습니다.
정렬 전략당 하나의 복제본 색인을 가지고 있으므로, 사용자가 정렬을 변경할 때 Algolia가 검색해야 하는 색인을 변경해야 합니다.
직접 처리할 수 있지만 InstantSearch 라이브러리 중 하나를 사용하고 내장된 sortBy 및 relatedSort 위젯을 활용하는 것이 더 쉽습니다.

Setting up Replicas#

Before you implement the search, you need to have replicas for each sorting strategy you want to provide.

검색을 구현하기 전에, 제공할 각 정렬 전략에 대한 복제본이 있어야 합니다.

 

Sorting widget

Sort dropdown with sortBy

Dropdowns are a familiar widget, common in ecommerce scenarios and power user workflows.InstantSearch provides sorting dropdowns via the sortBy widget.

드롭다운은 전자상거래 시나리오 및 파워 유저 워크플로우에서 흔히 볼 수 있는 친숙한 위젯입니다.InstantSearch는 sortBy 위젯을 통해 정렬 드롭다운을 제공합니다.

search.addWidgets([
  instantsearch.widgets.sortBy({
    container: '#sort-by-container',
    items: [
      { value: 'products', label: 'Most relevant' },
      { value: 'products_price_desc', label: 'Highest price' }
    ]
  })
]);

Relevance sort toggle with relevantSort

If you’re using Relevant sort you can use the relevantSort widget to let users toggle between relevant and regular sorting. The relevantSort widget comes with recommended patterns when using Relevant sort, such as displaying the number of sorted results out of the total number of results, and letting users see more results.

 

 관련 정렬을 사용하여 관련 정렬 토글

관련 정렬을 사용하는 경우 관련 정렬 위젯을 사용하여 사용자가 관련 정렬과 일반 정렬 사이를 전환할 수 있습니다. 관련 정렬 위젯은 관련 정렬을 사용할 때 권장되는 패턴(예: 총 결과 수 중 정렬된 결과 수를 표시하고 사용자가 더 많은 결과를 볼 수 있음)과 함께 제공됩니다.

search.addWidgets([
  instantsearch.widgets.relevantSort({
    container: '#relevant-sort',
    templates: {
      button({ isRelevantSorted }) {
        return isRelevantSorted ? 'See all results' : 'See relevant results';
      },
    },
  });
]);