Tässä artikkelissa esitellään sivutustyökalujen toteuttaminen tuotelistoille käyttämällä esimerkkinä MyCashflow'n oletusteeman tuotelistaa.

Sivutustyökalujen merkkaus ja sisältö on mahdollista määrittää erittäin yksityiskohtaisesti. Työkalut toteutetaan <form>-elementtinä, joka sijoitetaan halutun tuotelistan before-attribuuttiin. Sivutuksen kaikki osat tulostetaan yksittäisillä tageilla, jotka on esitelty tässä artikkelissa.

Tuotelista itse tulostetaan esimerkissä {Products}-tagilla, mutta sen tilalla voitaisiin käyttää mitä tahansa muutakin tuotelistan tulostavaa tagia. Tagille määritetään attribuutti pagination: true, joka asettaa sivutuksen päälle – ilman tätä attribuuttia sivutusta ei näytetä lainkaan.

{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'
)}

Tuotelistan limit-attribuutilla määritellään arvot, joiden halutaan näkyvän {PaginationLimit}-tagin tulostamassa valikossa. Samaan tapaan määritellään sort-attribuutilla arvot {PaginationSort}-valikolle.

Seuraavaksi toteutetaan sivutuksen asetuslomake (listan pituuden ja järjestyksen valinta) tagin before-attribuutissa. Lomakkeelle annetaan attribuutit action="{CurrentUrl}" ja method="GET". Tällöin lomakkeen arvojen vaihtuessa käyttäjä ohjataan takaisin samalle sivulle, ja vain listan ominaisuudet muuttuvat.

Aluksi lomakkeelle tulostetaan sivutuksen tila (monennellako sivulla käyttäjä kulloinkin on) käyttämällä {PaginationStatus}-tagia.

Tämän jälkeen tulostetaan sivutusparametrit käyttämällä {PaginationFormParameters}-tagia. Tagi tulostaa lomakkeen asetukset (järjestys, pituus, jne.) piilotettuina syötekenttinä, joiden perusteella sivutus määritellään.

{PaginationFormParameters}-tagi on sivutuslomakkeen pakollinen osa. Ilman tagia sivutustyökalut eivät toimi.

Parametrien jälkeen tulostetaan aiemmin mainitut listan pituus- ja järjestysvalikot, joiden arvot määräytyvät tuotelistan limit- ja sort-attribuuttien perusteella.

Lopuksi tulostetaan tuotelistan perään after-attribuutissa sivunvaihtotyökalut käyttämällä {PaginationPages}-tagia. items-attribuutilla voidaan asettaa näytettävien sivupainikkeiden määrä.

Jos sinulle jäi kysymyksiä aiheeseen liittyen, ota asia puheeksi MyCashflow'n asiakaspalvelun kanssa.