Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: MODUL: MITS Back-To-Top for Admin and Frontend

    Hetfield

    • modified Team
    • Beiträge: 937
    MODUL: MITS Back-To-Top for Admin and Frontend
    am: 01. August 2017, 15:36:28
    Hallo zusammen!

    Dieses Mini-Modul ist ein nützliches kleines Helferlein für den Adminbereich. Es fügt im Adminbereich einen "Nach oben scrollen"-Button ein, der beim nach unten scrollen automatisch engeblendet wird. So entfällt das lästige wieder nach oben scrollen mit der Maus. Für alle Anwender, welche die "Pos1"-Taste nicht mögen. :-D

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Zusätzlich gibt es das Helferlein auch für das Frontend. Hier kann es je nach Template eventuell notwendig sein, dass die CSS-Anweisungen angepasst werden müssen.

    Beide Module sind übrigens für die Shopversion ab 2.x und sind updatesicher.

    MfG Hetfield  8-)

    [EDIT Tomcraft 02.08.2017: Neues Modul v1.0 mit Font Awesome ergänzt.]
    [EDIT Tomcraft 30.01.2019: Neues Modul v1.01 mit Font Awesome ergänzt.]
    [EDIT Tomcraft 30.09.2020: Neues Modul v1.02 mit Font Awesome ab Shopversion 2.0.5.0 ergänzt.]
    [EDIT Hetfield 01.10.2020: Neues Modul v1.03 mit Font Awesome 4 und 5 für alle Shopversionen bis 2.0.5.1 ergänzt.]

    Linkback: https://www.modified-shop.org/forum/index.php?topic=37550.0

    woodpecker

    • Fördermitglied
    • Beiträge: 60
    • Geschlecht:
    Re: MODUL: MITS Back-To-Top for Admin
    Antwort #1 am: 01. August 2017, 16:21:57
    Super, vielen Dank   :thx:

    Sonnige Grüße
    Rene

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: MODUL: MITS Back-To-Top for Admin
    Antwort #2 am: 01. August 2017, 22:09:25
    Danke dafür. Gibts das hier im Forum auch als Frontend Variante? Über die Suchfunktion mit "Back to top" nichts gefunden.

    Oder muss quasi der selbe Code nur in einen anderen Ordner, damit es im Frontend funktionieren würde? Im Code selbst steht ja nichts davon, dass es nur im Backend funktioniert. Deshalb geh ich davon aus, dass es am Ordner liegt, wo es gespeichert wird.

    Gruss Timm

    awids

    • Experte
    • Beiträge: 3.782
    • Geschlecht:
    Re: MODUL: MITS Back-To-Top for Admin
    Antwort #3 am: 01. August 2017, 22:28:27
    index.html (Ende, vor "{if ($smarty.const.TRACKING_COUNT_ADMIN_ACTIVE == 'true'..."):

    Code: PHP  [Auswählen]
    <button onclick="topFunction()" id="myBtn" title="nach oben"><i class="fa fa-arrow-up "></i></button>

    general_bottom.js.php (beliebige Stelle, z. B. nach "<?php require DIR_FS_CATALOG . DIR_TMPL_JS . 'get_states.js.php'; ?>"):

    Code: PHP  [Auswählen]
    <script type="text/javascript">
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    function topFunction() {
        document.body.scrollTop = 0; // Chrome, Safari and Opera
        document.documentElement.scrollTop = 0; // IE and Firefox
    }
    </script>

    stylesheet.css (z. B. ans Ende):

    Code: CSS  [Auswählen]
    #myBtn {
        display: none; /* Hidden by default */
        position: fixed; /* Fixed/sticky position */
        bottom: 20px; /* Place the button at the bottom of the page */
        right: 20px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        border: none; /* Remove borders */
        outline: none; /* Remove outline */
        background-color: #EE7600; /* Set a background color */
        color: white; /* Text color */
        cursor: pointer; /* Add a mouse pointer on hover */
        padding: 10px 14px; /* Some padding */
        border-radius: 10px; /* Rounded corners */
    }

    #myBtn:hover {
        background-color: #eee; /* Add a dark-grey background on hover */
        color: #333; /* Text color */
    }

    CSS lässt sich bekanntlich immer stylen. ;-)

    Demo

    Hetfield

    • modified Team
    • Beiträge: 937
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #4 am: 02. August 2017, 09:15:40
    Danke dafür. Gibts das hier im Forum auch als Frontend Variante? Über die Suchfunktion mit "Back to top" nichts gefunden.

    Oder muss quasi der selbe Code nur in einen anderen Ordner, damit es im Frontend funktionieren würde? Im Code selbst steht ja nichts davon, dass es nur im Backend funktioniert. Deshalb geh ich davon aus, dass es am Ordner liegt, wo es gespeichert wird.

    Gruss Timm

    Hier noch die Frontend-Variante. Es muss tatsächlich nur der Code anders platziert werden und man hat den "Nach oben"-Button updatesicher auch im Frontend.

    Das Modul für das Frontend ist auch in Beitrag 1 zu finden.

    MfG Hetfield  8)

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #5 am: 02. August 2017, 10:40:52
    Ich danke euch beiden für die schnelle Hilfe. Beides schöne Lösungen.   :king:

    Vorteil Hetfield:
    updatesicher
    fade in fade out des Pfeils
    kein abruptes hochscrollen, dass der Kunde auch sieht, was passiert (könnte nur noch etwas schneller sein)

    Vorteil awids:
    Einbindung der font awesome bibliothek; dadurch keine imagedatei; schärferes, leicht austauschbares icon

    Könnte man das nicht beides kombinieren?

    Gruss Timm

    awids

    • Experte
    • Beiträge: 3.782
    • Geschlecht:
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #6 am: 02. August 2017, 11:00:39
    Hab Hetfields Lösung weder heruntergeladen, noch installiert, bin aber sicher, dass man es auch auf CSS (und Font-Awesome) ummodeln kann. Das Modul wurde vor deiner Fragestellung ja nur für den Admin-Bereich erstellt, wo Font-Awesome nicht zur Verfügung steht. Und dies nur für einen einzigen Button zu integrieren, finde selbst ich "too much". :-)

    Zu deinem Klammersatz: In dem Modul ist sicher irgendwo Javascript enthalten, wo man die Geschwindigkeit des Scrolls einstellen können müsste.

    Hetfield

    • modified Team
    • Beiträge: 937
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #7 am: 02. August 2017, 11:08:00
    Ich danke euch beiden für die schnelle Hilfe. Beides schöne Lösungen.   :king:

    Vorteil Hetfield:
    updatesicher
    fade in fade out des Pfeils
    kein abruptes hochscrollen, dass der Kunde auch sieht, was passiert (könnte nur noch etwas schneller sein)

    Vorteil awids:
    Einbindung der font awesome bibliothek; dadurch keine imagedatei; schärferes, leicht austauschbares icon

    Könnte man das nicht beides kombinieren?

    Gruss Timm

    Bei awids Lösung wird vorausgesetzt, dass font-awesome vorhanden ist. Ist allerdings nicht bei jedem Template der Fall. Deshalb lieber eine leicht austauschbare Grafik. Allerdings kann man das ja auch anpassen. Im Anhang deshalb eine Variante mit font-awesome und etwas schneller beim Scrollen.

    MfG Hetfield  8)

    [EDIT Tomcraft 02.08.2017: Modul in Beitrag 1 ergänzt.]

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #8 am: 02. August 2017, 11:33:36
    Ich bin begeistert.  :-B

    Gruss Timm

    karsta.de

    • Experte
    • Beiträge: 3.056
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #9 am: 02. August 2017, 15:24:30
    Ich hätte so einen "back to top" Button gerne hier im Forum. Hatte gehofft, dass er einfach mal irgendwann eingebaut wird. Aber das ist bisher leider nicht geschehen.

    BG kgd

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #10 am: 02. August 2017, 15:28:53
    :good:

    Vor allem wenn man übers handy hier liest wäre das sinnvoll.

    Wie das eingebaut wird, steht ja hier im Thread  :flee-mrgreen:

    awids

    • Experte
    • Beiträge: 3.782
    • Geschlecht:
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #11 am: 02. August 2017, 15:31:04
    Man müsste das bereits integrierte und am Ende eines jeden Beitrages (bei den Seitenzahlen) verfügbare "back to top" nur nach dem vorliegenden Beispiel an den Seitenrand holen, damit man von jeder Position aus wieder "back to top" kommt.  :mhhh:

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #12 am: 03. August 2017, 19:13:59
    Hier noch meine (komprimierte) Variante die alte IE-Browser beachtet und konfigurierbar ist
    und keine Grafik und kein Font-Icon benutzt: ;-)

    Javascript:

    Code: Javascript  [Auswählen]
    //BOC conf
    var ss = 220; //start to show when x px scrolled down
    var fi = 1000; //fade in time
    var st = 0; //scroll to
    var sti = 800; //scroll time
    //EOC conf
    function getIEversion(){var a=-1;if("Microsoft Internet Explorer"==navigator.appName){var b=navigator.userAgent,c=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");null!=c.exec(b)&&(a=parseFloat(RegExp.$1))}return a}$(function(){$(window).scroll(function(){var a=$(this).scrollTop(),b=getIEversion();b>-1&&8>=b?a>ss?$("#to-top").show():$("#to-top").hide():a>ss?$("#to-top").fadeIn(fi):$("#to-top").fadeOut(fi)}),$("#to-top").click(function(){$("body,html").animate({scrollTop:st},sti)})});

    HTML:

    Code: XML  [Auswählen]
    <p id="to-top" title="to top">&and;</p>

    (Das Zeichen &and; sieht so aus ∧ .)

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    CSS:

    Code: CSS  [Auswählen]
    #to-top {
        display: none;
        width: 25px;
        height: 25px;
        line-height: 20px;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        position: fixed;
        bottom: 20px;
        right: 20px;
        color: #800;
        text-shadow: 0 0 1px #B82D2D;
        border: 2px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 6px #767676 inset, 0 0 8px #767676;
        background: rgba(255,255,255,.6);
        cursor: pointer;
    }
    #to-top:hover {color:#008020;}

    (Die line-height muß je nach Schriftart justiert werden.)

    Gruß,
    noRiddle

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #13 am: 30. Januar 2019, 12:05:11
    @Hetfield
    Diese Zeile

    Code: PHP  [Auswählen]
    <style type="text/css">

    im Modul

    Code: PHP  [Auswählen]
    <?php
    /**
     * --------------------------------------------------------------
     * File: mits_totop.php
     * Created by PhpStorm
     * Date: 01.08.2017
     * Time: 14:27
     *
     * Author: Hetfield
     * Copyright: (c) 2017 - MerZ IT-SerVice
     * Web: https://www.merz-it-service.de
     * Contact: info@merz-it-service.de
     *
     * Released under the GNU General Public License
     * --------------------------------------------------------------
     */

    ?>
    <script type="text/javascript">
        $(document).ready(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 80) {
                    $('.mits_scrollicon').fadeIn();
                } else {
                    $('.mits_scrollicon').fadeOut();
                }
            });
            $('.mits_scrollicon').click(function () {
                $("html, body").animate({scrollTop: 0}, 400);
                return false;
            });
        });
    </script>
    <style type="text/css">
        .mits_scrollicon{padding:0.4em;text-align:center;text-decoration:none;-moz-border-radius:0.2em;-webkit-border-radius:0.2em;border-radius:0.2em;background:#ccc;opacity:0.5;position:fixed;bottom:3em;right:2em;display:none;border:0.1em solid #333;}
        .mits_scrollicon img{height:2em;width:2em}
            .mits_scrollicon i{font-size:20px}
    </style>
    <a href="#top" class="mits_scrollicon">
            <i class="fa fa-arrow-up "></i>
        <?php //echo xtc_image(DIR_WS_IMAGES.'totop.png'); ?>
    </a>

    führt zu einem error im w3c Validator

    Zitat
    Error: Element style not allowed as child of element body in this context.

    Kann man das ändern?

    Gruß Timm

    karsta.de

    • Experte
    • Beiträge: 3.056
    Re: MODUL: MITS Back-To-Top for Admin and Frontend
    Antwort #14 am: 30. Januar 2019, 15:34:50
    Eigentlich kann man den Style an der Stelle komplett rausnehmen. Erstelle eine neue css-Datei mit deinem Style und lege diese dann in den Ordner admin\includes\css. Erstelle eine weitere php-Datei (z.B. scroll-to-top.php) mit folgendem Inhalt:
    Code: PHP  [Auswählen]
    <?php
    echo '<link rel="stylesheet" type="text/css" href="includes/css/scroll-to-top.css" />'. PHP_EOL;

    hinterlege diese in den Ordner admin\includes\extra\css. So wird der Style wie alle anderen Styles im <head> eingefügt.

    [edit] Mein Vorschlag ist für den Admin-Bereich. Das Modul von @Hetfield habe ich mir jetzt nicht angesehen.

    BG kgd
    2 Antworten
    1525 Aufrufe
    06. Mai 2015, 12:04:07 von Nils
    12 Antworten
    8124 Aufrufe
    27. Februar 2014, 17:07:43 von tromPeter
    4 Antworten
    2128 Aufrufe
    24. November 2020, 09:40:09 von Hetfield
               
    anything