Viele Shopware User nutzen für ebenfalls viele Features Plugins, welche aber in vielen Fällen auch relativ einfach über das Theme selbst umzusetzen sind. Da ich für einen Kunden vor nicht all zu langer Zeit einen kleinen Scroll to Top Button umgesetzt habe, möchte ich euch das natürlich nicht vorenthalten und euch zeigen, wie Ihr simpel über euer Shopware Theme einen solchen Button umsetzen könnnt.

Zunächst benötigen wir wie immer natürlich unser eigen angelegtes Theme, welches wir im Theme Manager anlegen. Als Abhängigkeit wählen wir natürlich wie immer das Responsive Theme aus.

Als erstes erstellen wir unseren Link, welcher den Besucher wieder nach oben befördern soll. Diesen setzen wir in unsere index.tpl ein. Hierzu legen wir also in unserem eigenen Theme die Datei /frontend/index/index.tpl an.

Der Link sollte ganz unten nach unserem gesamten Content kommen. Wenn wir uns einmal die originale Shopware index.tpl aus dem Bare Theme anschauen, haben wir hier den Block frontend_index_page_wrap

Dieser Block schließt den gesamten Content ein – Wir hängen unsern Scroll to top Link als nach diesem Block. Damit sieht unsere index.tpl wie folgt aus:

frontend/index/index.tpl

{extends file="parent:frontend/index/index.tpl"}

{block name="frontend_index_page_wrap" append}
<a class="cd-top" href="#0">Top</a>
{/block}

Less Anpassungen / Styling

Wir müssen unseren Button natürlich noch entsprechend positionieren, als auch stylen. Dafür legen wir uns zunächst einmal eine eigene Less Datei an – Nennen wir diese einmal scroll.less.
Okay, lege also nun die Datei scroll.less in frontend/_public/src/less/_modules an. Der Inhalt sieht hier wie folgt aus:

.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: @brand-primary url(../../img/cd-top-arrow.svg) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
}
.cd-top.cd-fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5;
}
.no-touch .cd-top:hover {
    background-color: @brand-primary;
    opacity: 1;
}
@media only screen and (min-width: 768px) {
    .cd-top {
        right: 20px;
        bottom: 20px;
    }
}
@media only screen and (min-width: 1024px) {
    .cd-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 30px;
    }
}

Die Breite des Buttons könnt Ihr natürlich anpassen wie Ihr möchtet. Wir Ihr seht binden wir hier ebenfalls ein .svg Bild ein – also eine Vektor Grafik. Diese kannst du dir hier runterladen - Download SVG Grafik. Danach lädst du die Datei nach frontend/_public/src/img.
Zu guter letzt müssen wir unsere scroll.less noch in unsere all.less importieren, damit Shopware diese auch kompilieren kann. Sollte die Datei all.less noch nicht in /frontend/_public/src/less existieren, legt diese an. Unsere scroll.less importieren wir einfach indem wir in unsere all.less @import "modules/scroll"; schreiben. Damit kann Shopware nun unsere scroll.less Datei kompilieren.

Geht einmal im Shopware Backend in den Theme Manager und weist das Theme neu zu, damit Shopware dieses kompilieren kann. Wenn Ihr danach das Frontend aktualisiert, solltet Ihr den Button bereits unten rechts in der Ecke sehen. Allerdings noch ohne Funktion. Hierzu benötigen wir nun noch etwas Javascript.

Javascript Datei

Okay hauchen wir dem Button die eigentliche Funktion ein. Legt die Datei scroll.jsin /frontend/_public/src/js an mit folgendem Inhalt

jQuery(document).ready(function($){

    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 300,
    //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
    offset_opacity = 1200,
    //duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,
    //grab the "back to top" link
    $back_to_top = $('.cd-top');

    //hide or show the "back to top" link
    $(window).scroll(function(){
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollTop() > offset_opacity ) {
            $back_to_top.addClass('cd-fade-out');
        }
    });

    //smooth scroll to top
    $back_to_top.on('click', function(event){
        event.preventDefault();
            $('body,html').animate({
                scrollTop: 0 ,
            }, scroll_top_duration
        );
    });

});

Javascript Datei in Shopware laden

Damit Shopware unsere neu angelegte Javascript Datei ebenfalls kompilieren kann, müssen wir Shopware mitteilen, dass wir diese angelegt haben. Dazu öffnen wir einmal unsere Theme.php in unserem Theme root Verzeichnis. Hier fügen wir nun innerhalb der PHP Class folgendes ein:

protected $javascript = [
  'src/js/scroll.js'
];

Am besten ganz am Ende der Class.

Shopware Theme neu kompilieren

Das war es eigentlich auch schon. Nun gehen wir noch einmal in dem Shopware Theme Manager und weisen unser Theme noch einmal erneut zu, sodass dieses kompiliert werden kann. Im Frontend solltet Ihr nun den Scroll to top Button haben, welcher euch wieder nach oben bringt, sobald Ihr etwas runter gescrollt habt.

Shopware Onlinekurs Jetzt kostenlos anmelden.