Sort By Widget

The Sort By widget allows users to change the order of search results.

Example Usage

The Sort By widget is available for only textsearch results. It does not automatically appear in ai search results.

Text Search

const textsearch = window.yesplz.textsearch();

textsearch.addWidget(
  textsearch.widgets.SortBy({
    container: "#yesplz-sort",
  })
);

Dual Search

const dualsearch = window.yesplz.dualsearch();

dualsearch.addWidget(
  dualsearch.widgets.SortBy({
    container: "#yesplz-sort",
  })
);

Parameters

Name	Type	Description
container	string	CSS selector for the HTML element where the widget will be rendered.
templates	object	Custom templates for rendering the widget.
items	array	Array of sorting options to be displayed.

templates

The templates parameter allows you to customize the HTML structure of the Sort By widget.

Default template:

const DEFAULT_LAYOUT = `
  {{#each items}}
    <a href="#" data-sort="{{this.value}}">{{this.label}}</a>
  {{/each}}
`;

The template uses Handlebars syntax to iterate over the sorting options. It creates a link for each option, setting the data-sort attribute to the option's value and displaying the option's label as the link text.

You can provide a custom template by passing a templates object when initializing the widget:

textsearch.addWidget(
  textsearch.widgets.SortBy({
    container: "#yesplz-sort",
    templates: {
      layout: DEFAULT_LAYOUT,
    },
  })
);

items

The items parameter is an array of objects, each representing a sorting option. Each object should have the following properties:

• label: The text to display for the sorting option.
• value: The value to be used for sorting when this option is selected. The 5 possible values are listed in the default items below.

Default items:

const DEFAULT_ITEMS = [
  { label: "Best Sellers", value: "popular" },
  { label: "Price : Low to High", value: "price:asc" },
  { label: "Price : High to Low", value: "price:desc" },
  { label: "What's New", value: "newest" },
  { label: "Discount : High to Low", value: "sales_percent" },
];