Tässä artikkelissa käydään läpi tuotesuodattimien laatiminen tuotelistojen yhteyteen MyCashflow-teemoissa.
Tämä artikkeli koskee kokeellista ominaisuutta Tuotesuodattimet.
Tuen lisääminen tuotesuodattimille teemassa
Tuotesuodattimien vaikutukset tuotelistoihin
Kun tuotesuodattimet ovat käytössä verkkokaupassa ja niille on lisätty tuki verkkokaupan teemassa, {Products}
-tagilta poistuu käytöstä useita attribuutteja, joiden avulla määritetään listan sisältö.
Tuotesuodattimia käyttävien listojen sisältöä hallitaan kaupan asetuksissa.
Seuraavat attribuutit jäävät käyttöön {Products}
-tagille, kun tuotesuodattimet ovat käytössä:
type
list_type
list_classes
classes
helper
{Products}
-tagin aliakset (esim. {CategoryProducts}
, {DiscountProducts}
, jne.) toimivat samoin kuin aiemminkin. Näitä tageja ei ole mahdollista käyttää tuotesuodattimien kanssa.
Tuoteominaisuuksien näyttäminen tuotesivulla
MyCashflow'n sisäinen Barebones-oletusteema sisältää valmiin tuen ominaisuudelle.
Tuotteen ominaisuuksien arvot on mahdollista asettaa näkymään tuotesivulla tuotesuodattimien Näytä tuoteominaisuus 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äänhelper
-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 merkkauksenhelper
-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.
Barebones-teeman tuotesuodattimet
Alla näet tuotesuodattimien oletustoteutuksen Barebones-teeman tuotelistasivulla:
...
<!-- 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="{ProductListFiltersClearUrl}" class="RemoveFilter">{%ProductFiltersRemove}</a></li>
</ul>',
helper: 'helpers/filter-tag'
)}
<!-- Tuotelista jota suodatetaan -->
{Products(
subcategories: 'true',
limit: '40|100',
pagination: 'true',
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.