Tulostaa listan tuotelistan suodattimista, joiden avulla sivuston kävijät selaavat tuoteominaisuuksia käyttäviä tuotteita.

Kuvaus

Tagin käyttöön liittyy seuraavia palvelupakettikohtaisia rajoituksia:

  • Tagi on käytössä alkaen Basic-paketista.
  • Basic: Tagi tulostaa max. 3 tuotesuodatinta.
  • Advanced ja ylöspäin: Tagi tulostaa oletusarvoisesti max. 10 tuotesuodatinta (jos haluat näyttää enemmän suodattimia, ota yhteyttä MyCashflow'n asiakaspalveluun).

Tagi tulostaa suodatinvalikon vain tuoteominaisuuksille, jotka on merkitty käytettäväksi tuotesuodattimena tuoteattribuutin Näytä tuotesuodattimena kaupassa -asetuksen avulla.

Oletusarvoisesti tagi tulostaa jokaisen suodattimen nimen ja suodatinvalintojen oletustoteutuksen. Tuotesuodattimien rakenne ja ominaisuudet voidaan määritellä tarkemmin tagin helper-attribuutissa käyttämällä tuotesuodattimien tageja.

Tätä tagia käytetään vain tuotelistojen suodattimien luontiin esim. tuotelistan sivupohjassa. Tuoteominaisuuksien lista laaditaan {ProductFeatures}-tagin avulla.

Lue myös tarkemmat ohjeet tuotesuodattimien toteuttamiseen teemassa.

Syntaksi

{ProductListFilters(
    helper: string
)}

Näkyvyys

Toimii näkyvyydessä: globaali

Näkyvyyshelper-attribuutissa: product-list-filter

Tagia käytetään vain tuotelistojen yhteydessä.

Voit käyttää tagia esimerkiksi seuraavissa sivupohjissa, mutta tagi on käytettävissä missä tahansa sivupohjassa tuotelistan yhteydessä:

Etusivuthemes/shop/THEME/homepage.html
Kampanjathemes/shop/THEME/campaign-list.html
Näyteikkunathemes/shop/THEME/category-front.html
Tuotelistathemes/shop/THEME/product-list.html
Tuotemerkkithemes/shop/THEME/brand-list.html

Tuotelistan suodattimien toteuttaminen

Alla näet yksinkertaisen tuotesuodattimien toteutuksen tuoteryhmän tuotelistan yhteyteen:

{ProductListFilters(
  before: '<div class="ProductListFilters">',
  helper: {{
      {Filtername(before: '<span class="FilterName {FilterClass}">', after: '</span>')}
      {FilterOptions(
        before: '<ul class="FilterOptions">',
        helper: {{
          <li>
            <a href="{FilterOptionSelectUrl}">{FilterOptionName} ({FilterOptionResultCount})</a>
          </li>
        }},
        after: '</ul>'
      )}
  }},
  after: '</div>'
)}
{Products}

Suodattimet lisätään ennen tuotelistaa käyttämällä {ProductListFilters}-tagia.

Listalle tulostetaan jokaisen suodattimen nimi ({FilterName}) ja valittavissa olevat arvot ({FilterOptions}).

Jokaisesta valittavissa olevasta arvosta tulostetaan:

Tässä esimerkissä ei toteuteta suodattimien poistamista käytöstä. Katso tätä varten tarkemmat ohjeet tuotesuodattimien toteuttamiseen teemassa.

Attribuutit

helper:

Määrittää yksittäisen listaelementin sisällön ja tulostusmuodon.

Sallitut arvot: Interface- ja HTML-merkkaus, joka määrittää tulostuksen merkkauksen ja sisällön.

helper-attribuuttia on mahdollista käyttää kahdella tavalla:

  • voit kirjoittaa halutun merkkauksen suoraan attribuutin arvoksi tai
  • voit antaa attribuutin arvoksi viittauksen tiedostoon, joka sisältää halutun merkkauksen.

    Anna viittaus suhteessa teeman juurihakemistoon.

Katso myös helper-attribuutin tarkemmat käyttöohjeet.

after/before:

after- ja before-attribuuteilla voit määrittää sisällön, joka tulostuu ennen tagin tuottamaa sisältöä tai sen jälkeen.

Sallitut arvot: HTML- ja Interface-merkkaus.

Esim.:

  • before: '<p>Tämä merkkaus näkyy ennen tagin omaa sisältöä.</p>'
  • after: '<p>Tämä taas näkyy tagin oman sisällön jälkeen.</p>'

Mikäli tagi ei tuota mitään sisältöä, myöskään after- ja before-attribuuttien sisältö ei tulostu.

escape:

Asettaa tulostuvassa sisällössä pakomerkin ennen lainausmerkkejä.

Attribuutin tarkoitus on helpottaa tagin palauttaman sisällön käyttämistä JavaScriptin avulla.

Sallitut arvot: true/false. Oletusarvo false.

or:

Määrittää vaihtoehtoisen sisällön, joka näkyy mikäli tagi ei itse tuota mitään sisältöä.

Sallitut arvot: HTML- ja Interface-merkkaus.

Esim. or: 'Sisältöä ei löytynyt.'