Sort and change views of catalogues items with flexible layout system

SortView is a snippet for Evolution CMS that provides a flexible interface for content display and sorting control, designed to integrate seamlessly with eFilter and DocLister.
The snippet is ideal for product catalogs, blogs, galleries, and any other section of the website that requires flexible content sorting and display.

Key Features

• Seamless integration with any DocLister-based snippets
• Flexible template system
• Bootstrap integration (default classes)

The snippet offers four main controls:

• Sorting (e.g., by title, price, date)
• Sort direction (ascending/descending)
• Display mode (grid/list)
• Number of items per page

Each control can be displayed as a standard select or, in the case of sorting and view, as buttons, also supporting the use of icons (e.g., Font Awesome). The interface is completely customizable through a placeholder system that allows you to:

• Show/hide individual controls
• Customize appearance through CSS classes
• Reorganize control placement
• Use custom layouts via chunks

---

Parameters

Core Parameters

• &tplGrid: Template for grid view layout (default: empty)
• &tplList: Template for list view layout (default: empty)
• &template: Main layout template. Can use placeholders for controls positioning (default: bootstrap layout)
• &defaultSort: Default sort field (default: menuindex)
• &defaultOrder: Default sort direction - ASC or DESC (default: ASC)
• &defaultView: Default view mode - grid or list (default: grid)
• &defaultDisplay: Default number of items per page (default: 10)

Display Modes

• &viewMode: View switch mode - select or buttons (default: select)
• &sortOrderMode: Sort order switch mode - select or buttons (default: select)

Show/Hide Components

• &showSortBy: Show/hide sort by control (default: true)
• &showSortOrder: Show/hide sort order control (default: true)
• &showView: Show/hide view mode control (default: true)
• &showDisplay: Show/hide items per page control (default: true)
• &showReset: Show/hide reset button (default: false)

Labels

• &gridLabel: Label for grid view option (default: Grid)
• &listLabel: Label for list view option (default: List)
• &ASCLabel: Label for ascending order (default: Ascending)
• &DESCLabel: Label for descending order (default: Descending)
• &displayLabel: Label for display items control (default: Show:)
• &resetLabel: Label for reset button (default: Reset)

Button Titles

• &gridTitle: Title attribute for grid view button (default: Grid)
• &listTitle: Title attribute for list view button (default: List)
• &ASCTitle: Title attribute for ascending order button (default: Ascending)
• &DESCTitle: Title attribute for descending order button (default: Descending)
• &resetTitle: Title attribute for reset button (default: Reset all filters)

CSS Classes

• &formClass: Class for form element (default: form-inline justify-content-end)
• &selectClass: Class for select elements (default: form-control form-control-sm)
• &btnClass: Class for buttons (default: btn btn-outline-secondary btn-sm)
• &btnActiveClass: Additional class for active buttons (default: active)
• &btnGroupClass: Class for button groups (default: btn-group)
• &blockClass: Class for control blocks (default: form-group mr-2)
• &resetBtnClass: Class for reset button (default: same as btnClass)

Sort Options

• &sortOptions: Comma-separated list of sort fields (default: pagetitle,menuindex,price)
• &sortOptionsLabels: Comma-separated list of labels for sort fields (default: empty)
• &displayOptions: Double-pipe separated list of display options with optional labels (format: value==label) (default: 5||10||20||30||40||50)

---

Examples

Basic call

[!SortView?
&sortOptions=`pagetitle,menuindex,price`
&sortOptionsLabels=`Name,Order,Price`
&tplGrid=`productGridTpl`
&tplList=`productListTpl`
!]

Advanced call with select forms

[!SortView?
&sortOptions=`pagetitle,menuindex,price`
&sortOptionsLabels=`Name,Order,Price`
&defaultSort=`pagetitle`
&displayOptions=`5||10||20||30||40||50`
&tplGrid=`productGridTpl`
&tplList=`productListTpl`
&template=`@CODE:
<div class="sortview-container mb-4">
[+sv_form_start+]
[+sv_sortby_block+]
[+sv_sortorder_block+]
[+sv_view_block+]
[+sv_display_block+]
[+sv_form_end+]
</div>
`
!]

Advanced call with sort and view buttons

[!SortView?
&viewMode=`buttons`
&gridLabel=`<i class="fa fa-th-large" aria-hidden="true"></i>`
&listLabel=`<i class="fa fa-list" aria-hidden="true"></i>`
&sortOrderMode=`buttons`
&ASCLabel=`<i class="fa fa-sort-amount-up-alt"></i>`
&DESCLabel=`<i class="fa fa-sort-amount-down"></i>`
&btnClass=`btn btn-sm btn-light mx-1`
&btnActiveClass=`active btn-primary`
&sortOptions=`pagetitle,menuindex,price`
&sortOptionsLabels=`Name,Order,Price`
&defaultSort=`pagetitle`
&displayOptions=`5||10||20||30||40||50`
&defaultDisplay=`5`
&showReset=`1`
&resetLabel=`<i class="fa fa-refresh"></i>`
&resetTitle=`Reset all filters`
&resetBtnClass=`btn btn-light btn-reset btn-sm`
&tplGrid=`productGridTpl`
&tplList=`productListTpl`
&template=`@CODE: <div class="sortview-container mb-4">
[+sv_form_start+]
[+sv_sortby_block+]
[+sv_sortorder_block+]
[+sv_display_block+]
[+sv_view_block+]
[+sv_reset_block+]
[+sv_form_end+]
</div>`
!]

---

Integration with DocLister-based snippets

SortView is designed for seamless integration with DocLister-based snippets. It sets placeholders (sv_sortBy, sv_sortOrder, sv_tpl, sv_display) that can be directly used in DocLister's parameters. This makes it particularly effective with snippets like eFilter, Commerce, and any other DocLister-based solution. Simply pass these placeholders to the corresponding parameters in your DocLister call:

Integration with Doclister

[!DocLister? 
    &display=`[+sv_display+]`
    &tpl=`[+sv_tpl+]`
    &sortBy=`[+sv_sortBy+]`
    &sortDir=`[+sv_sortOrder+]`
...
!]

Integration with eFilter

[!eFilterResult? 
    &display=`[+sv_display+]`
    &tpl=`[+sv_tpl+]`
    &sortBy=`[+sv_sortBy+]`
    &sortOrder=`[+sv_sortOrder+]`
...
!]

---

Other Snippets for Evolution CMS