Back to Top – Button für den OXID eShop

 5. Januar 2014

Back to Top Button

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

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.


Diesen Artikel teilen:
Share on FacebookPin on PinterestShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone


6 Gedanken zu „Back to Top – Button für den OXID eShop

    • Moondust
    • Sorry, mein Fehler… funktioniert doch… hatte statt vor das Script vor gepackt… kann ja dann auch nicht funktionieren… Aber jetzt gehts !!

    • riefi
    • habe die Version 4.8.5 und wollte dort diesen Retour Button einbauen lt. Anleitung unter
      http://wiki.oxidforge.org/Tutorials/…eShop_einbauen

      aber irgendwie ist hier ein Knoten darin. Es will nicht funktionieren.
      Hat dazu jemand einen Tipp für mich. TMP habe ich schon geleert.

      Danke!
      VG Andreas

    • Josef A. Puckl Artikelautor
    • Hallo Andreas,

      unter dem von dir geposteten Link steht nichts außer „There is currently no text in this page“. Ich nehme aber an, es handelt sich um die Anleitung über diesen Kommentaren, da du hier postest?

      Alleine anhand der Fehlerbeschreibung „es funktioniert nicht“ kann man hier nicht weiterhelfen.
      Poste bitte einen Link zum betreffenden Shop, dann werden Sie geholfen 😉

    • Riefi
    • Hallo Herr Puckl, danke für die Rückmeldung! Ich habe das Script und den Link in diesem Blog genau nach Anleitung im Live Shop und auch auf meinem Demo Shop (xampp) eingebaut. Mehrmal kontrolliert und ich finde den Fehler einfach nicht. Mit Copy and Past eingefügt. Ich seh den Wald vor lauter Bäume nicht mehr und komm nicht darauf wo ich das vergeigt habe. Vielleicht haben Sie noch einen Tip für mich. Besten Dank im Voraus. Andreas

Kommentare sind geschlossen.