Nivo Sliderin lisääminen verkkokaupan etusivulle

Tekniset tiedotKoodausohjeet › Nivo Sliderin lisääminen verkkokaupan etusivulle

Taustaa

Liukuvat kuvat voidaan lisätä verkkokaupan etusivulle usealla eri tavalla. Yhteistä kaikille tavoille on se, että ne käyttävät HTML-sivunkuvauskieltä, CSS-tyylimäärittelyjä ja JavaScript-komentosarjakieltä. Asennamme tässä malliesimerkissä Nivo Slider ↗ -sliderin.

Toteutusohjeet (vaihe 1)

  • Lataa Nivo Slider ↗ klikkaamalla oikealta Download ZIP -painiketta.
  • Pura Nivo-Slider-master.zip -tiedosto omalle tietokoneellesi.
  • Siirry Nivo-Slider-master-kansioon. Löydät sieltä toisen Nivo-Slider-master-kansion. Nimeä se uudelleen nivoslider-nimiseksi.
  • Voit halutessasi poistaa nivoslider-kansiosta demo-kansion. Se on tehty tässä esimerkissä tarpeettomaksi.
  • Siirrä nivoslider-kansio sisältöineen FTP-ohjelmalla kotisivutilan kansioon, jossa verkkokaupan etusivun index.php -tiedosto sijaitsee.

Toteutusohjeet (vaihe 2)

Tässä malliesimerkissä liukuvia kuvia on neljä kappaletta. Luo omalle tietokoneellesi alla mainitut kuvatiedostot. Sopivat mitat ovat esimerkiksi 1000 x 300 px. Kuvat saavat olla ylisuuria, mutta eivät liian pieniä. Siirrä kuvat FTP-ohjelmalla kotisivutilassa olevaan nivoslider-kansioon.

  • liukuva0.jpg
  • liukuva1.jpg
  • liukuva2.jpg
  • liukuva3.jpg

Toteutusohjeet (vaihe 3)

  • Kirjaudu verkkokaupan hallintaliittymään (demo).
  • Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "HTML5".
  • Syötä nimeksi "Nivo Slider (tyylit)" tai mitä tahansa.
  • Valitse Sivu-kohdasta "Etusivu".
  • Valitse Sijainti-kohdasta "Verkkokaupassa </head> ennen".
  • Lisää Koodi-kohtaan:
    <link rel="stylesheet" href="nivoslider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivoslider/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivoslider/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivoslider/themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivoslider/nivo-slider.css" type="text/css" media="screen" />
    
  • Klikkaa Tallenna-painiketta.

  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "HTML5".
  • Syötä nimeksi "Nivo Slider (kuvat)" tai mitä tahansa.
  • Valitse Sivu-kohdasta "Etusivu".
  • Valitse Sijainti-kohdasta "Verkkokaupassa #tc_content_middle jälkeen (suosittu)".
  • Lisää Koodi-kohtaan:
    <div class="slider-wrapper theme-default">
    <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider"> 
    <a href="p273-exo-hedelmasalaatti-fi.html"><img src="nivoslider/liukuva0.jpg" data-thumb="nivoslider/liukuva0.jpg" alt="" title="#htmlcaption0" /></a>
    <a href="p265-valaistu-lelukurpitsa-fi.html"><img src="nivoslider/liukuva1.jpg" data-thumb="nivoslider/liukuva1.jpg" alt="" title="#htmlcaption1" /></a>
    <a href="p283-vihannessalaatti-fi.html"><img src="nivoslider/liukuva2.jpg" data-thumb="nivoslider/liukuva2.jpg" alt="" data-transition="slideInLeft" title="#htmlcaption2" /></a> 
    <a href="c1-yrtit-p1-fi.html"><img src="nivoslider/liukuva3.jpg" data-thumb="nivoslider/liukuva3.jpg" alt="" title="#htmlcaption3" /></a>
    </div>  
    <div id="htmlcaption0" class="nivo-html-caption">Exo-hedelmäsalaatti 5,99 €/kg</div>
    <div id="htmlcaption1" class="nivo-html-caption">Valaistu lelukurpitsa tilattavissa 1.4.2016 alkaen!</div>
    <div id="htmlcaption2" class="nivo-html-caption">Tuore vihannessalaatti 4,99 €/kg, katso myös muut <a href="c12-salaatit-p1-fi.html">salaatit</a></div>
    <div id="htmlcaption3" class="nivo-html-caption">Meiltä myös yrttejä.</div>
    </div>
    
  • Klikkaa Tallenna-painiketta.

  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "JavaScript/HTML5".
  • Syötä nimeksi "Nivo Slider (JavaScript)" tai mitä tahansa.
  • Valitse Sivu-kohdasta "Etusivu".
  • Valitse Sijainti-kohdasta "Verkkokaupassa </body> ennen".
  • Lisää Koodi-kohtaan:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="nivoslider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
      $('#slider').nivoSlider({controlNav: false, animSpeed: 400, pauseTime: 3000});
    });
    </script>
    
  • Klikkaa Tallenna-painiketta.
Halutessasi voit merkitä kuvat, linkit tai koko slider-wrapperin <fi> ja <en> -tageilla.

Poikkeukset tyylimäärittelyihin (vapaaehtoista)

  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "CSS3".
  • Syötä nimeksi "Nivo Slider (poikkeukset)" tai mitä tahansa.
  • Valitse Sivu-kohdasta "Etusivu" (ei merkitystä).
  • Lisää Koodi-kohtaan:
    .slider-wrapper {
     margin-bottom: 25px; 
    }
    
    .theme-default .nivoSlider {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    
    .nivo-caption {
      opacity: 0.7 !important;
      vertical-align: middle !important;
      font: 100%/1.4 Open Sans, Verdana, sans-serif !important;
      border-radius: 3px;
    }
    
  • Klikkaa Tallenna-painiketta.
Vaihtoehtoisesti voit muokata suoraan nivoslider-kansiossa olevia tyylitiedostoja.

Vastuunrajoitus

Näillä ohjeilla ja koodiesimerkeillä ei ole minkäänlaista toimivuustakuuta. Emme vastaa välittömistä, välillisistä, satunnaisista tai epäsuorista vahingoista, menetyksistä, korvauksista, tai kolmannen osapuolen esittämistä vaatimuksista, jotka johtuvat näiden ohjeiden tai koodiesimerkkien noudattamisesta.

Scroll to Top