Voit luoda verkkokauppaasi esimerkiksi etusivulle bannerikarusellin, jossa näytetään ajoitetusti vaihtuvia bannereita.

Johdanto

Tässä artikkelissa neuvotaan bannerikarusellin luominen Barebones-teeman sliders.js-pluginin avulla ja ilman sitä, jos verkkokauppasi teema ei ole rakennettu Barebones-teeman päälle. Voit kuitenkin lisätä sliders.js-pluginin myös omaan teemaasi, vaikka se ei sisältäisi muita Barebonesin komponentteja.

Jälkimmäisessä osiossa käytetään jQueryn Slick-pluginia bannerikarusellin toteuttamiseen. Voit kuitenkin käyttää mitä tahansa muutakin tarkoitukseen sopivaa pluginia, sillä bannerilistan HTML-merkkausta on mahdollista muokata hyvin joustavasti. Myös Barebonesin sliders.js käyttää taustalla Slick-pluginia.

Bannerikarusellin luominen Barebonesin työkaluilla

Tässä kappaleessa käydään läpi sliders.js-pluginin käyttäminen bannerikarusellin luomiseen.

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.

Karusellin luominen tapahtuu samalla tavalla kuin tuotelistasliderin, eli bannerien containerille annetaan data-slider="foo"-attribuutti, jonka arvoksi annetaan halutun sliderin tyyppi.

Bannereita varten pluginissa on määritelty seuraavat tyypit:

  • banners-wide
  • banners-side

Alla näet esimerkin bannerikarusellin toteuttamisesta pluginin avulla:

{Banners(
    name: 'ryhman-koodi',
    before: '<ul data-slider="banners-wide">',
    helper: {{
        <li style="background: url({BannerImageURL});">
            {BannerName(
                before: '<h2>',
                after: '</h2>
            )}
            {BannerText}
        </li>
    }},
    after: '</ul>'
)}

Varmista myös että plugin on alustettu /scripts/custom.js-tiedostossa. Alla näet esimerkin pluginin alustamisesta yllä näkyvälle merkkaukselle:

MCF.Sliders.init({
    'banners-wide': {
        autoplay: true,
        autoplaySpeed: 5000,
        slidesToShow: 1
    }
})

Voit käyttää alustuksessa kaikkia Slick-pluginin asetuksia. Lue lisää asetuksista Slickin dokumentaatiossa.

Bannerikarusellin luominen ilman Barebonesin työkaluja

Tässä kappaleessa neuvotaan bannerikarusellin luominen jQueryn Slick-pluginin avulla.

Tämän artikkelin JavaScript-esimerkeissä käytetään jQuery-kirjaston funktioita. Varmista että jQuery on lisätty sivulle, jos käytät tämän artikkelin skriptejä omassa teemassasi.

Voit lisätä jQueryn sivulle käyttämällä {SupportScripts}-tagia.

Aluksi tulostetaan bannerit seuraavan Interface-merkkauksen avulla:

{Banners(
    name: 'testiryhma',
    before: '<div class="carousel-container">',
    helper: {{
        <div class="carousel-item">
            <a href="{BannerURL}">
                {BannerImage}
                {BannerText}
            </a>
        </div>
    }},
    after: '</div>'
)}

Lisää Slick-plugin sivulle sijoittamalla seuraava tagi ennen sulkevaa </body>-tagia:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

Voit lisätä myös slickin omat CSS-tyylit sivun <head>-osioon, jolloin säästät vaivaa bannerien ulkoasun suunnittelussa:

<link rel="stylesheet"type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet"type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

Kun pluginin JavaScriptit on lisätty sivulle, alusta slick-plugin bannerikarusellin sisältävälle elementille seuraavan koodin avulla:

$(".carousel-container").slick({
    autoplay: true
});

autoplay-asetuksella asetetaan karuselli käyntiin heti sivunlatauksen jälkeen. Lisätietoja Slickin asetuksista löydät pluginin omasta dokumentaatiosta. Voit esimerkiksi säätää bannerien vaihdon ajoitusta tai painikkeiden merkkausta.

Näin saat verkkokaupassa helposti käyttöön monipuolisesti muokattavan bannerikarusellin, jota voit käyttää millä tahansa sivulla. Jos sinulle jäi kysymyksiä aiheeseen liittyen, ota asia puheeksi MyCashflow'n asiakaspalvelun kanssa.