Tulostaa tuotesuodattimen arvojen valintatyökalut.

Kuvaus

Tagi on käytössä alkaen Basic-paketista.

Lue myös tarkemmat ohjeet tuotesuodattimien toteuttamiseen teemassa.

Oletusarvoisesti tagi tulostaa <ul>-listan valittavissa olevista suodattimen arvoista. Voit muotoilla valintatyökalut haluamallasi tavalla helper-attribuutissa.

Syntaksi

{FilterOptions(
    helper: string
)}

Näkyvyys

Toimii näkyvyydessä: product-list-filter

Näkyvyyshelper-attribuutissa: product-list-filter-option

Tagia käytetään vain {ProductListFilters}-tagin helper-attribuutissa.

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.'