Tässä artikkelissa käydään läpi tuotesuodattimien laatiminen tuotelistojen yhteyteen MyCashflow-teemoissa.

Tuen lisääminen tuotesuodattimille teemassa

  1. Ota Tuotesuodattimet-ominaisuus käyttöön hallintatyökalun sivulla Asetukset > Kokeelliset ominaisuudet.
  2. Määritä tarvittavat suodattimet, niiden arvot ja tuotteiden ominaisuudet.

    Lue lisää suodattimien hallinnasta ja ominaisuuksien käyttämisestä tuotteilla.

    Tuotesuodattimet eivät tule käyttöön verkkokaupassa, mikäli vähintään yksi niistä ei ole näkyvillä.

  3. Lisää theme.xml-tiedostoon <ProductListFilters supported="true"/> -asetus.

    Tuotesuodatinasetuksen käyttöönotto muuttaa {Products}-tagin toimintaa. Lue lisää seuraavasta kappaleesta.

  4. Lisää teemaan {ProductListFilters}-tagi ennen tarvittavia tuotelistoja.

    Tagi on käytössä kaikilla sivuilla, mutta sitä on syytä käyttää varsinkin tuoteryhmien ja -merkkien sekä kampanjoiden päätuotelistoilla.

    Katso myös lista tuotesuodattimien tageista ja malli Barebonesin tuotesuodattimien toteutuksesta.

    {ProductListFilters}-tageja voi olla samalla sivulla vain yhden tuotelistan yhteydessä.

    Tuotesuodattimet on mahdollista lisätä vain {Products}-tagin avulla laadittujen tuotelistojen yhteyteen.

    Voit hyödyntää suodattimien toteutuksessa hakutulossivun suodattimia (jos nämä on toteutettu verkkokaupan teemassa).

    Hakutulossivun tagit toimivat saman periaatteen mukaisesti. Muuta vain tagien nimet, niin voit säästää aikaa ja vaivaa toteutuksessa.

  5. Muotoile suodattimet haluamallasi tavalla.

    Voit käyttää Barebonesin filters.js-pluginia ja valmiita SCSS-tyylejä suodattimien muotoiluun.

ProductListFilters-asetus

Kun teeman asetuksissa on määritetty <ProductListFilters supported="true"/> -asetus, {Products}-tagi toimii eri tavalla kuin normaalisti:

  • filters-attribuutti ei toimi. Tuotelistoille sisällytetään myös vain ostettavissa olevia tuotteita (varastosta loppuneet ja hinnattomat tuotteet jätetään pois).
  • Käytössä aina subcategories: true
  • Käytössä aina pagination: true
  • limit-attribuutti ei määritä sivukokoja. Sivukoot määritellään jatkossa teeman asetuksissa.

{Products}-tagin aliakset (esim. {CategoryProducts}, {DiscountProducts}, jne.) toimivat samoin kuin aiemminkin. Näitä tageja ei ole mahdollista käyttää tuotesuodattimien kanssa.

Barebones-teeman tuotesuodattimet

Alla näet tuotesuodattimien oletustoteutuksen Barebones-teeman tuotelistasivulla:

product-list.html
...
<!-- Valittavissa olevat suodattimet pudotusvalikkoina -->
{ProductListFilters(
  before: '<div class="ProductListFilters">',
  after: '</div>',
  helper: '{{
    {FilterOptions(
      before: '
        <div class="FilterGroup">
          <a class="FilterGroupName" href="#FilterList-{FilterClass}" tabindex="0">{FilterName}</a>
          <div id="FilterList-{FilterClass}" class="FilterList" tabindex="-1">',
      after: '
          </div>
        </div>'
    )}
  }}'
)}

<!-- Valitut suodattimet ja niiden poistolinkit -->
{ProductListFilters(
  before: '
    <label>{%ProductFiltersSelected}: </label>
    <ul class="FilterTags">',
  after: '
      <li class="ClearAllFilters"><a href="{CategoryUrl}" class="RemoveFilter">{%ProductFiltersRemove}</a></li>
    </ul>',
  helper: {{
    {FilterOptions(
      helper: '{{
        {FilterOptionRemoveUrl(
          before: '<li><a href="',
          after: '" class="RemoveFilter">{FilterOptionName}</a></li>'
        )}
      }}'
    )}
  }}
)}

<!-- Tuotelista jota suodatetaan -->
{Products(
  type: 'normal',
  before: '
    <div class="List ProductList">
      <div class="GridList">',
  after: '
      </div>
    </div>
    {Helper(file: 'helpers/pagination')}',
  helper: 'helpers/list-product',
  or: '<div class="Notification">0 {%Products}</div>'
)}
...

Barebonesin toteutuksessa on kaksi erillistä suodatinlistaa:

  • Ensimmäisen avulla laaditaan pudotusvalikot, joista kävijä voi valita haluamiensa suodattimien arvot.
  • Toisen avulla näytetään valitut arvot, ja mahdollisuus poistaa käytöstä yksittäisiä arvoja tai kaikki.

Lisäksi Barebones-teema sisältää filter.js-pluginin, joka muotoilee tuotesuodatinlistat pudotusvalikoiksi.

Lue lisää filters.js-pluginista.