Implementing product list pagination tools

These instructions go through how to implement pagination tools for product lists.

In MyCashflow, the store theme enables you to add pagination tools for product lists, with support for the following features:

• choosing the page size for lists (i.e., how many products will be shown on a single page)
• sorting tools for lists
• a pagination menu.

The pagination tools are implemented as a <form> element containing pagination tags. Below, you can see an example of the structure of a pagination form in the context of a product list:

{Products(
    pagination: true,
    classes: 'first||',
    limit: '30|15|60|90',
    sort: 'manual|name_asc|released_desc|price_asc',
    before: '
        <form action="{CurrentUrl}" method="get" id="PaginationSortForm">
        {PaginationStatus}
            <div class="FormItem GroupItem">
                {PaginationFormParameters(
                    name: 'keyword'
                )}
                <div>
                    {PaginationSort}
                </div>
                <div>
                    {PaginationLimit}
                </div>
                <div>
                    <button type="submit">{%Send}</button
                </div>
            </div>
        </form>
    ',
    after: '{PaginationPages(items: 7)}',
    helper: 'helpers/listproduct'
)}

The elements and Interface tags featured in the example:

• The {Products} tag prints the product list. The pagination:true attribute within the tag turns pagination on and enables pagination tools to be shown.

  In the example, the product list uses product filters, which only function with the {Products} tag. Other product list tags, such as {CategoryProducts}, are not compatible with product filters.

• The pagination form itself is created with the <form> element contained in the product list tag's before attribute.

  When the values on the form are changed, its action="{CurrentUrl}" and method="GET" attributes will direct the user back to the same page, which, after having been refreshed, applies the new pagination settings chosen by the user.

• {PaginationStatus} prints the pagination settings that the visitor has selected (e.g., Showing products 25–50 / 200).
• The {PaginationFormParameters} tag prints the product list's pagination parameters (length, sorting order, etc.) as hidden input fields that define the pagination applied in a given situation.

  The {PaginationFormParameters} tag is an obligatory part of the pagination form. The pagination tools will not work without it.

• The {PaginationLimit} tag prints a menu that allows the visitor to choose the length of a single page in the product list.
  The values available in the drop-down menu depend on whether or not the product list uses product filters:

  • If product filters are in use, the options in the menu will be defined in the theme's theme.xml configuration file.
  • If product filters are not in use, the options are determined by the product list tag's limit attribute.
• {PaginationSort} prints a menu that allows the visitor to choose the sorting criterion for the product list (e.g., alphabetical or by price). The available choices depend on the product list tag's sort attribute.
• Finally, the {PaginationPages} tag prints the page change tools defined in the after attribute after the product list. The number of visible page buttons can be defined by using the items attribute.