Tässä artikkelissa käydään läpi sivutustyökalujen toteuttaminen tuotelistoille.

MyCashflow'ssa voit lisätä kaupan teemassa tuotelistoille sivutustyökalut, jotka sisältävät

  • listan sivukoon valinnan (montako tuotetta yhdellä sivulla näytetään)
  • listan järjestelytyökalut
  • sivunvaihtovalikon.

Sivutustyökalut laaditaan <form>-elementtinä, jonka sisällä käytetään sivutustageja. Alla on esimerkki sivutuslomakkeen rakenteesta tuotelistan yhteydessä:

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

Esimerkissä käytetyt elementit ja Interface-tagit:

  • {Products} -tagi tulostaa tuotelistan. Tagin pagination:true -attribuutin avulla asetetaan sivutus päälle ja mahdollistetaan sivutustyökalujen näyttäminen.

    Esimerkin tuotelistalla ovat käytössä tuotesuodattimet, jotka toimivat vain {Products}-tagin kanssa. Muut tuotelistatagit, kuten {CategoryProducts}, eivät ole yhteensopivia tuotesuodattimien kanssa.

  • Tuotelistatagin before-attribuutissa laaditaan itse sivutuslomake käyttämällä <form>-elementtiä.

    Lomakkeen action="{CurrentUrl}" ja method="GET" -attribuutit ohjaavat lomakkeen arvojen vaihtuessa käyttäjän takaisin samalle sivulle, jossa sivunlatauksen jälkeen ovat käytössä hänen valitsemansa uudet sivutusasetukset.

  • {PaginationStatus} tulostaa tiedon kävijän valitsemista sivutusasetuksista (esim. Näytetään tuotteet 25-50 / 200).
  • {PaginationFormParameters} tulostaa sivutusparametrit (tuotelistan valittu järjestys, pituus jne.) piilotettuina syötekenttinä, joiden perusteella kulloinkin käytössä oleva sivutus määrittyy.

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

  • {PaginationLimit} -tagi tulostaa valikon, josta kävijä voi valita tuotelistan yksittäisen sivun pituuden.
    Pudotusvalikossa saatavilla olevat arvot riippuvat siitä, onko tuotelistalla käytössä tuotesuodattimia:
    • Jos tuotesuodattimet ovat käytössä, valikon vaihtoehdot määritetään teeman theme.xml-asetustiedostossa.
    • Jos tuotesuodattimia ei ole käytössä, valikon vaihtoehdot määrittyvät tuotelistatagin limit-attribuutin perusteella.
  • {PaginationSort} tulostaa valikon, josta kävijä voi valita tuotelistan järjestyksen (esim. aakkosittain, hinnan mukaan). Valittavissa olevat vaihtoehdot riippuvat tuotelistatagin sort-attribuutista.
  • Lopuksi {PaginationPages}-tagin avulla 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.