Back to Top - Button für den OXID eShop

Back to Top Button

Mittlerweile wird auf vielen Webseiten ein Back to Top - Button angeboten, um nach dem Lesen längerer Texte wieder mit einen Mausklick ganz nach oben zu springen. Das Mausrad wird geschont, Zeit und Energie wird gespart, das Surferlebnis wird insgesamt spürbar verbessert. In vielen CMS gehört der Button bereits zum guten Ton, warum also im OXID eShop darauf verzichten? Der Einbau ist auch für Ungeübte einfach und schnell realisierbar - versprochen ;) Back to Top - Buttons gibt es viele im Web, am schönsten sind die, die erst dann eingeblendet werden, wenn bereits etwas nach unten gescrollt wurde und die dann geschmeidig zum Seitenanfang hochscrollen. Nach kurzer Suche wurde im WordPressplugin "LB_Back to Top" ein unter GPLv2 veröffentlichtes, sehr schlankes Script gefunden, das die geforderten Anforderungen erfüllt und mit ein paar Anpassungen unkompliziert im OXID eShop integriert werden konnte.

1. Script und Link:

In der Datei application/views/azure/tpl/layout/base.tpl bitte vor </body> folgenden Code einfügen:

<script>
jQuery(document).ready(function($){
 $(window).scroll(function(){
 if ($(this).scrollTop() > 400) {
 $('#upbtn') .fadeIn();
 } else {
 $('#upbtn') .fadeOut();
 }
 });
 $('#upbtn').on('click', function(){
 $('html, body').animate({scrollTop:0}, 200);
 return false;
 });
});
</script>

<a href="#page" id="upbtn" title="Nach oben"></a>

2. Button-Bild:

Das Button-Bild "nachoben.png" bitte einfach in den img-Order des Themes (zB. out/azure/img) kopieren. Es können beliebige eigene Bilder (60x60px) oder auch das Bild rechts (Rechtsklick→Bild speichern unter) verwendet werden.

3. CSS-Klassen:

Dann fehlt nur noch folgendes in der CSS-Datei des Themes (einfach am Ende einfügen). Im Standard-Azure-Theme ist diese unter out/azure/src/css/oxid.css zu finden:

#upbtn{height:60px;width:60px;position:fixed;bottom:100px;margin-right:50%;right:-532px;text-indent:-9999px;display:none;background:url("../../img/nachoben.png");}

4. jQuery Version (nicht bei Shopversion 4.8 erforderlich!)

Für Shopversion 4.8 und höher ist keine Änderung erforderlich. In Shopversion 4.7 sollte jQuery v1.7.2 eingesetzt werden. Ersetzen Sie einfach den Inhalt der Datei out/themename/src/js/libs/jquery.min.js mit dem Inhalt dieser Internetseite: http://code.jquery.com/jquery-1.7.2.min.js Idealerweise sollte ein Childtheme verwendet werden, um den Shop updatesicher zu gestalten.