jQuery-koodin käyttäminen verkkokaupassa

Starter Yes
Mini Yes
Active Yes
Pro Yes

Verkkokaupan ulkoasua ja käyttöliittymää voidaan muokata käyttämällä omaa jQuery-koodia. Koodi voidaan lisätä Asetukset > Yleiset asetukset > Lisäasetukset -sivulle, jolloin se vaikuttaa kaikilla sivuilla. Jos koodin halutaan toimivan vain yksittäisellä sivulla, koodi voidaan lisätä sivun kuvaus-kenttään painamalla <html> -nappia sisällön muokkauksessa.

Huomio Koska myös epages-järjestelmä käyttää jQuerya verkkokaupan toiminnoissa, voi virheellisen koodin lisääminen aiheuttaa konfliktin joissain verkkokaupan toiminnoissa (esim tuotesivun tai ostsokorin toiminnassa). jQuerya ei siis pidä ladata uudestaan, vaan se on olemassa jo valmiina. Testaa aina koodin muokkaamisen jälkeen oman koodin toimivuuden lisäksi verkkokaupan normaalit toiminnot (tuotteen lisääminen ostoskoriin, ostoskorin muokkaaminen ja tilaaminen).

Ei näin:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.example.com/jquery-slideshow.js"></script>
<script type="text/javascript">
$("#slideshow").slideshow(); </script>
 

Vaan näin:

<script type="text/javascript" src="http://www.example.com/jquery-slideshow.js"></script>
<script type="text/javascript">
(function($){
$("#slideshow").slideshow();
})(jQuery);
</script>
 

Esimerkkikoodeja

Ylänavigaation lukitseminen sivun yläreunaan

Kaupan ylänavigaatio saadaan pysymään näkyvissä sivun ylälaidassa vaikka sivua vierittäisikin alaspäin.

Ylänavigaation lukitseminen sivun ylälaitaan jQueryllä

<script type="text/javascript">
jQuery(document).ready(function() {
if(jQuery('div.NavBarTop').length){
jQuery('div.NavBarTop').before('<div class="NavBarTopWrap"></div>');
jQuery('div.NavBarTop').appendTo('div.NavBarTopWrap');

var stickyNavTop = jQuery('.NavBarTop').offset().top;

var stickyNav = function(){
var scrollTop = jQuery(window).scrollTop();

if (scrollTop > stickyNavTop) {
jQuery('.NavBarTopWrap').addClass('sticky');
} else {
jQuery('.NavBarTopWrap').removeClass('sticky');
}
};

stickyNav();

jQuery(window).scroll(function() {
stickyNav();
});
}
});
</script>
<style type="text/css">
.sticky { position: fixed !important; top: 0; width: 100%; z-index: 500; }
.sticky .NavBarTop { margin: auto; }
</style>

 

Elementtien siirtely

Kaikkia sivuilla näkyviä elementtejä voidaan siirtää toiseen paikkaan esimerkiksi appendTo -metodilla. Esimerkki: siirretään tuotesivun sosiaalisen median painikkeet tuotesivulla tuotekuvan alta sivun alalaitaan:

Elementtien siirtely appendTo metodilla

<script type="text/javascript">
jQuery(function() {
jQuery("div.SocialMedia").appendTo("div.ContentAreaWrapper");
});
</script>

 

 

Lyhyt kuvausteksti näkyviin tuotesivulla

Tuotteen lyhyt kuvausteksti on tuotesivulla meta-description kentässä, eikä näy kävijälle tällä sivulla (paitsi jos pitkä kuvaus puuttuu). Tällä koodilla saadaan meta-description näkyviin tuotteen nimen alle:

Meta description näkyviin tuotesivulla

<script type="text/javascript">
(function($){
$(document).ready(function(){
var Descr = $('meta[name=description]').attr('content');
if(! Descr){
}
else {
var Descr = Descr.replace(/;/g,',');
$('div.ProductDetails .InfoArea h1').after('<p>' + Descr + '</p>');
}
});
})(jQuery);
</script>

 

 

 

Tilaa rekisteröitymättä oletusvalinnaksi

Tilausprosessin ensimmäisessä vaiheessa asiakas valitsee kolmesta vaihtoehdosta: Kirjaudu sisään/Tilaa rekisteröitymättä/Tilaa ja rekisteröidy. Seuraava koodi avaa "tilaa rekisteröitymättä" valinnan oletuksena. Toimii vain uudessa, vaiheittaisessa tilausprosessissa.

Automaattinen klikkaus jQueryllä

<script type="text/javascript">
jQuery(function() {
jQuery('input[value="NonMember"]').click();
});
</script>

 

 

Lisätään uusi extraBnr-div ylänavigaation alle

Sivun rakenteeseen voidaan tehdä uusia alueita jQuery-koodilla. Esimerkissä luodaan koko sivun levyisen banneri ylänavigaation alle. Jos ylimääräinen div näytetään vain etusivulla, koodi lisätään etusivun sisältöön. Koodin lisäys tehdään painamalla <html> ikonia.

Ylimääräisen bannerin luonti jQueryllä

<script type="text/javascript">
jQuery(function() {
jQuery('div.NavBarTop').after('<div class="extraBnr"></div>');
});
</script>
<style type="text/css">
.extraBnr { width: 100%; height: 250px; background: white; }
</style>

Uuteen "extraBnr" diviin voidaan siirtää esimerkiksi appendTo-metodilla kuvia ja muuta sisältöä:

<script type="text/javascript">
jQuery(function() {
jQuery('div.NavBarTop').after('<div class="extraBnr"></div>');
jQuery('div.extraBnrContent').appendTo('div.extraBnr');
});
</script>
<style type="text/css">
.extraBnr { background: url(/WebRoot/GPL/Shops/17092008-100341/MediaGallery/test/bg-extraBnr.jpg); width: 100%; height: 250px; }
.extraBnrContent { padding: 40px; width: 960px; margin: 0 auto; height: 100%; }
</style>

Sisällön html-koodissa on extraBnrContent-div joka siis siirretään extraBnr-divin sisään:

<div class="extraBnrContent">
<h1><img alt="Laatutuotteiden verkkokauppa" height="132" src="/WebRoot/GPL/Shops/17092008-100341/MediaGallery/iStock_000002034236XSmall.jpg" style="margin-right: 10px; border: 0px none; float: left;" width="186" />Laatutuotteiden verkkokauppa - nopea toimitus, halvat hinnat!</h1>
<p>Oletko jo kanta-asiakas? Liittymällä laatutuotteiden verkkokaupan <a href="?ViewAction=ViewRegistration&amp;ObjectPath=%2FShops%2F17092008-100341">kanta-asiakkaaksi nyt</a> saat liittymistarjouksena 10€ alennuskupongin ensimmäiseen tilaukseesi.</p>
</div>

 


Tuotteisiin veroton hinta verollisen rinnalle

Lasketaan tuotten veroton hinta ja näytetään se tuotesivulla myyntihinnan vieressä. Toimii vain suomen kielellä ja olettaa, että verot 24% kaikissa tuotteissa.

Alv-laskuri jQueryllä

<style type="text/css">
.withouttax {
font-size: 12px;
display: block;
color: #aaa;
}
</style>
<script type="text/javascript">
jQuery.ready(function($){
var prefix = "(Ilman alv: ";
var postfix = " €)";
var percent = 1.24;

// price-value fields
$(".price-value").each(function(i, e) {
var price = parseFloat( $(e).text().replace(" ", "").replace(",", ".") );
if(price) {
var withouttax = price / percent;
fixedwithouttax = withouttax.toFixed(2).replace(",", ".");
$(e).append('<span class="withouttax">'+ prefix + fixedwithouttax + postfix + '</span>');
}
});
});
</script>

 

Tuotteen vaihtoehdot-taulukon ostoskori-nappi isommaksi

Oletuksena tuotteen vaihtoehdoissa (taulukkomuodossa esitettynä) on vain ostoskori-ikoni. Tämä koodi lisää napin "title" tekstin näkyviin ja piilottaa ikonin.

Teksti osta-nappiin

<script type="text/javascript">
jQuery.ready(function($){
$('.ButtonBasket').html($('.ButtonBasket').first().attr('title'));
});
</script>

<style type="text/css">
table.VariationsTable button.ButtonBasket { padding: 0 20px; background: red; color: white; }
</style>

 

 

Siirry sivun ylälaitaan

Sivulle voidaan lisätä "Siirry ylös" linkki, joka tulee näkyviin sen jälkeen kun sivua on vierittänyt alaspäin.

<script type="text/javascript">
(function($){
$(function () {
var scroll_timer;
var displayed = false;
var $message = $('#message a');
var $window = $(window);
var top = $(document.body).children(0).position().top;

$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 1000);
});
});
})(jQuery);
</script>

<style type="text/css">
#message a { display: block; display: none; z-index: 999; opacity: 0.8; position: fixed; top: 100%; margin-top: -180px; left: 90%; margin-left: -160px; width: 300px; height: 150px; padding: 10px; }
</style>

Lisäksi pitää lisätä ulkoasuun html-elementiksi itse linkki. Linkin voi tehdä myös kuvana.

<div id="message"><a href="#top">Ylös</a></div>

  

Pinterest-nappi tuotesivuille

Tuotesivuilla olevien sosiaalisten median nappeihin on mahdollista saada myös Pinterestin PinIt-nappi alla olevalla koodilla.

<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
<script type="text/javascript">
jQuery(function() {
  jQuery('<a href="https://www.pinterest.com/pin/create/button/" data-pin-tall="true"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>').appendTo('div.SocialMedia');
});
</script>

 

 

Lue lisää:

Jaa sisältö