Templateshop - Eine große Auswahl an neuen und modernen Templates für die modified eCommerce Shopsoftware
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: 749
    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)

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

    woodpecker

    • Fördermitglied
    • Beiträge: 47
    • 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

    FräuleinGarn

    • Fördermitglied
    • Beiträge: 3.501
    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: 2.578
    • 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: 749
    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 im ersten Beitrag zu finden: MITS Back-To-Top for Frontend

    MfG Hetfield  8)

    FräuleinGarn

    • Fördermitglied
    • Beiträge: 3.501
    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: 2.578
    • 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: 749
    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)

    FräuleinGarn

    • Fördermitglied
    • Beiträge: 3.501
    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: 1.743
    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

    FräuleinGarn

    • Fördermitglied
    • Beiträge: 3.501
    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: 2.578
    • 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: 10.250
    • 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

    FräuleinGarn

    • Fördermitglied
    • Beiträge: 3.501
    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: 1.743
    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
    719 Aufrufe
    06. Mai 2015, 12:04:07 von Nils
    12 Antworten
    6058 Aufrufe
    27. Februar 2014, 17:07:43 von tromPeter
    13 Antworten
    4191 Aufrufe
    24. August 2011, 15:28:07 von Tomcraft
    anything