Tuotelistojen muotoiluun käytettävät oletusteeman työkalut ja tyylit.

Tuotelistasliderin luominen

Voit luoda oletusteeman CSS-listagridistä sliders.js-pluginin avulla vaakasuuntaisen sliderin. Esimerkiksi oletusteeman tuotesivun ristiinmyyntituotteiden lista on toteutettu sliderin avulla:

Löydät sliders.js-pluginin oletusteeman tiedostosta /scripts/plugins/sliders.js. Lisäksi sliderin tyypin määrittävät muuttujat on asetettu tiedostossa /scripts/custom.js.

Sliderin SASS-tyylit löydät oletusteeman tiedostosta /styles/scss/modules/_sliders.scss.

sliders.js-plugin käyttää taustalla jQueryn Slick-pluginia.

Slider luodaan asettamalla gridilistan containerille data-slider="foo"-attribuutti, jonka arvoksi annetaan halutun sliderin tyyppi. Gridilistaa varten ovat saatavilla seuraavat tyypit (nämä löytyvät tiedostosta /scripts/custom.js):

  • grid-list
  • grid-list-narrow
  • grid-list-wide

Alla näet yksinkertaisen esimerkin tuotelistasliderin luonnista:

{Products(
    before: '
        <h2>Tuotteita</h2>
        <ul class="GridList GridList-Wide" data-slider="grid-list-wide">
    ',
    helper: {{
        <li class="ListItem">
            {ProductListImage}
            <h3>{ProductName}</h3>
            {ProductShortDesc}
        </li>
    }},
    after: '</ul>'
)}

Tuotelistojen ulkoasutyylit

Tuotelistaelementtien ulkoasu määritellään oletusteeman tiedostossa /styles/scss/modules/_product.scss.

Jos haluat muuttaa tuotelistoilla rinnakkain näytettävien elementtien määrää, muuta CSS-listagridin leveyden määrittäviä muuttujia. Esimerkiksi jos haluat että tuotteita näytetään työpöytäkoossa rinnakkain 3 oletusarvoisen 4 sijaan, vaihda elementin .GridList-Wide > .ListItem -leveyttä tiedostossa /styles/scss/common/_grid.scss.