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 tarvittaessa lisää teeman asetuksista.

    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.

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

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

Lue lisää filters.js-pluginista.