Skip to main content

Sorting widgets

SortBy​

vs.addWidget(
    vs.widgets.SortBy({
        container: '#yesplz-sort',
        templates: {
          layout: ...
          ...
        },
        items: [
          ...
        ],
    })
);

Options​

activeClass - string Active element class name​

default value - 'is-active'

templates.layout - string​

default value:

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

items - [objects]​

Works for SortBySelect also

items: [
  { label: 'From lowest price', value: 'price:asc' },
  { label: 'From highest price', value: 'price:desc' },
  { label: 'Discount', value: 'sales_percent' },
  { label: 'Best Sellers', value: 'popular' },
  { label: 'Newest', value: 'newest' },
],

SortBySelect​

Simple select box with sorting

vs.addWidget(
    vs.widgets.SortBySelect({
        container: '#yesplz-sort',
        items: [
          ...
        ],
    })
);