Bruk av jQuery-kode i nettbutikken

Starter Yes
Mini Yes
Active Yes
Pro Yes

Nettbutikkens design og layout kan endres med jQuery-kode. Koden kan legges til ved å velge Innstillinger > Generelle innstillinger > Avanserte innstillinger hvis koden skal gjelde for alle sider i butikken. Hvis kun en spesifikk side skal endres, legges koden til i feltet for beskriving for den spesifikke siden ved å klikka på <html>-knappen.

Obs! Siden ePages bruker jQuery i e-handelsprogrammet, kan den nye koden skape konflikter i nettbutikken (f.eks. på produktsidene eller i handlekurven). jQuery trenger derfor ikke lades igjen om den allerede finnes. Når du har gjort endringer i koden bør du alltid teste butikkens vanlige funksjoner i tillegg til den nye koden (å legge til produkter i handlekurven, endinger i handlekurven og bestilling).



Ikke på denne måten:

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

 

Heller ikke på denne måten:

<script type="text/javascript" src="http://www.example.com/jquery-slideshow.js"></script>

<script type="text/javascript">

(function($){

  $("#slideshow").slideshow();

})(jQuery);

</script>

 

Eksempelkoder

Lås topmenyen øverst på siden

Butikkens topmeny kan låses sånn at den vises øverst på siden når man beveger seg nedover.

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

 

Flytte elementer

Alle elementer som vises på siden kan flyttes med f.eks. appendTo funksjonen. Denne eksempelkoden flytter produktsidens sosiale medier knapper til nederst på produktsiden:

<script type="text/javascript">

jQuery(function() {

  jQuery("div.SocialMedia").appendTo("div.ContentAreaWrapper");

});

</script>

 

Vis den korte beskrivelsen på produktsiden

Produktenes korte beskrivelse er i vanligvis bare en meta-beskrivelse og vises ikke for kundene. Med dennne koden kan du vise meta-beskrivelsen på produktsiden under produktnavnet:

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

 

"Bestill uten å registrere deg" som standardvalg

I første steget av kassen velger kunden mellom tre valg: Innlogging for registrerte kunder/Bestill uten å registrere deg/Bestill og registrer deg som kunde. Med denne koden åpnes det første steget med "Bestill uten å registrere deg" som standardvalg. Koden fungerer bare for den nye bestillingsprosessen i individuelle steg.

<script type="text/javascript">

jQuery(function() {

 jQuery('input[value="NonMember"]').click();

});

</script>

 

Legg til et nytt område under toppmenyen

Med jQuery-kode kan man legge til nye områder i sidens utforming. I dette eksempelet lager vi en banner under toppmenyen som er lika bred som siden. Hvis du vil at banneren bare skal vises på startsiden så legger du koden til i startsidens innhold. Koden legges til ved å klikke på <html>-knappen.

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

Med f.eks. appendTo funksjonen kan det legges til bilder og annet innhold i banneren:

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

I innholdets html-kode finnes extraBnrContent-div der legger du til hva som skal vises i banneren:

<div class="extraBnrContent">

    <h1><img alt="Webbutik med kvalitetsprodukter" height="132" src="/WebRoot/GPL/Shops/17092008-100341/MediaGallery/iStock_000002034236XSmall.jpg" style="margin-right: 10px; border: 0px none; float: left;" width="186" />Webbutik med kvalitetsprodukter - snabb leverans och låga priser!</h1>

    <p>Ær du redan registrerad? När du <a href="?ViewAction=ViewRegistration&amp;ObjectPath=%2FShops%2F17092008-100341">registrerar dig</a> hos oss får du en rabattkupong på 100kr som du kan använda första gången du shoppar!</p>

</div>

 

Produktpriser uten MVA

Denne koden regner ut prisen uten mva og viser det ved siden av originalprisen for produktene. Dette fungerer bare når språket er norsk og alle produkter har 25% moms.

<style type="text/css">

.withouttax {

font-size: 12px;

display: block;

color: #aaa;

}

</style>

<script type="text/javascript">

jQuery.ready(function($){

var prefix = "(Uten MVA ";

var postfix = " kr)";

var percent = 1.25;

 

// 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>

 

Større kjøpeknappen i listevisningen for produktvarianter

Som standard vises bare handlekurvikonet for produkter med varianter (når variantene vises i en liste). Denne koden legger til teksten for knappens "title" og skjuler ikonet.

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

 

Lenk til toppen av siden

Man kan legge til en "Tilbake til toppen"-lenke som vises når man går ned på siden.

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

Selve lenken legges til som et html-element i designen. Lenken kan også væra et bilde.

<div id="message"><a href="#top">Till toppen</a></div>

 

Les mer:

Share on social media