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

Tuen lisääminen tuotesuodattimille teemassa

  1. Mene hallintatyökalun sivulle Tuotteet > Tuoteominaisuudet.
  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.

    Alla näet esimerkin teeman asetuksista, joihin on lisätty tuki tuotesuodattimille.

    ...
<Features>  
    <ProductListFilters supported="true"/>
    <BrandProductListFilters supported="true"/>
    <CampaignProductListFilters supported="true"/> 
</Features>
...

    Jos haluat käyttää tuotesuodattimia myös tuotemerkki- ja kampanjasivuilla, lisää myös seuraavat asetukset:

    • <BrandProductListFilters supported="true"/>
    • <CampaignProductListFilters supported="true"/>

    Lue lisää teeman asetuksista.

  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.

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

Tuoteominaisuuksien näyttäminen tuotesivulla

MyCashflow'n sisäinen oletusteema sisältää valmiin tuen ominaisuudelle.

Tuotteen ominaisuuksien arvot on mahdollista asettaa näkymään tuotesivulla tuotesuodattimien Näytä tuoteominaisuutena tuotesivulla -asetuksen avulla.

Lisää seuraava merkkaus tuotteen sivupohjassa kohtaan, jossa haluat näyttää tuoteominaisuudet:

{ProductFeatures(
  helper: {{
    {ProductAttributeValues(
      before: {{ <p class="ProductAttribute-{ProductAttributeId}"> }},
      after: {{ </p> }}
    )}
  }}
)}

Alla esimerkin osat selitettynä:

  • Tuotteen ominaisuudet sisältävä lista laaditaan {ProductFeatures}-tagilla. Jokaisen ominaisuuden esitysmuoto määritellään helper-attribuutissa.
  • {ProductAttributeValues} tulostaa oletusarvoisesti ominaisuuden arvot pilkuilla eroteltuna listana.

    Voit myös itse määrittää erotinmerkin käyttämällä separator-attribuuttia tai määrittää jokaisen arvon merkkauksen helper-attribuutin avulla.

  • {ProductAttributeId} tagilla lisätään jokaisen ominaisuuden kohdalle ominaisuuden tunniste, joka määritellään hallintatyökalussa. Tietoa voidaan käyttää esimerkiksi CSS-tyylien tai skriptien laadintaan.