rechtstexte für onlineshop
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: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template

    Karl1

    • Experte
    • Beiträge: 1.879
    Hallo Zusammen,
    ich stell hier mir mal eine Anleitung ein, wie ich Bootstrap ändere.

    In der Anleitung habe ich als Beispiel das Bootswatch-Theme "Paper" verwendet.
    Als Ausgangstheme würde ich aber immer das "Default" bevorzugen.

    Gruß Karl

    [EDIT Tomcraft 15.06.2017: Anleitung in Beitrag 1 ergänzt.]
    Managed Server

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Hallo Karl,

    zu deiner Antwort #10, das ist natürlich suboptimal den Browser erst einmal den Cookiehinweis anzeigen zu lassen um ihn gleich wieder zu entfernen, wesentlich besser ist da dein Lösungsvorschlag.

    PS:
    Wozu dient eigentlich das komprimierte Skript '/templates/bootstrap3/javascript/eu_cookie.js', für den implementierten Cookiehinweis wird es ja nicht benötigt?

    Hier noch eine Alternative zum implementierten Cookiehinweis:
    In /templates/bootstrap3/javascript/general_bottom.js.php ab ca. Zeile 77 folgenden Code

    Code: PHP  [Auswählen]
            <?php if (!isset($_COOKIE['eucookie'])): ?>
            // EU-Cookie
          if (!navigator.cookieEnabled) {
            $("#eucookielaw").remove();
          }
                function SetCookie(c_name,value,expiredays) {
                    var exdate=new Date()
                    exdate.setDate(exdate.getDate()+expiredays)
                    document.cookie=c_name+ "=" +escape(value)+";path=/"+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
                }
                if( document.cookie.indexOf("eucookie") ===-1 ){
                    $("#eucookielaw").show();
                }
                $("#set_cookie").click(function () {
                    SetCookie('eucookie','eucookie',365)
                    $("#eucookielaw").remove();
                });
            <?php endif; ?>
     

    mit diesem ersetzen

    Code: PHP  [Auswählen]
        // START Creare's 'Implied Consent' EU Cookie Law Banner          
            <?php $complianceCookieName = 'eucookie'; if (!isset($_COOKIE[$complianceCookieName])): ?>
        if (navigator.cookieEnabled) {
       
            (function ($) {
                $.fn.cookieConsent = function(options) {
           
                    var settings = $.extend({          
                        // Number of days before the cookie expires, and the banner reappears
                        cookieDuration : 120,      
                        // Name of our cookie
                        cookieName: '<?php echo $complianceCookieName; ?>',      
                        // Value of cookie
                        cookieValue: 'on',      
                        // Path of cookie
                        cookiePath: '/',                  
                        // Message banner message
                        bannerMessage: "This website uses cookies. These essential cookies are used to track important logical information for the smooth operation of the site.",      
                        // Message banner dismiss button
                        bannerButtonText: "OK",      
                        // Link to your cookie policy.
                        bannerLinkURL: "cookie_policy.html",      
                        // Link text
                        bannerLinkText: "<b>Read more</b>",
                        // Class banner
                        bannerClass: "alert alert-info alert-dismissible text-center",
                        // Style banner
                        bannerStyle: "position: fixed; width: 100%; opacity: 1; margin: 0px; left: 0px; bottom: 0px; padding: 10px; z-index: 1000; text-align: center; display: none;", // Anzeige unten ganze Breite
                        // bannerStyle: "position: fixed; width: 100%; opacity: 1; margin: 0px; bottom: 0px; padding: 10px; z-index: 1000; text-align: center; display: none; width: 300px; min-width: 300px; max-width: 90%; right: 20px; bottom: 20px; overflow: auto;", // Anzeige unten rechts          
                        // Class banner dismiss button
                        bannerButtonClass: "btn btn-success btn-xs",
                        // Style banner dismiss button
                        bannerButtonStyle: "margin: 4px 0 4px 24px; cursor: pointer;",          
                        // Class banner link
                        bannerLinkClass: "iframe text-success",
                        // Style banner link
                        bannerLinkStyle: "margin-left: 8px;",                      
                        // Target banner link
                        bannerLinkTarget: "_blank"                    
                    }, options);        
                   
                    function checkCookie(name) {
                        var nameEQ = name + "="
                        var ca = document.cookie.split(';')
                        for(var i = 0; i < ca.length; i++) {
                            var c = ca[i]
                            while (c.charAt(0)==' ')
                                c = c.substring(1, c.length)
                            if (c.indexOf(nameEQ) == 0)
                                return c.substring(nameEQ.length, c.length)
                        }
                        return null
                    };      
                           
                    if (checkCookie(settings.cookieName) != settings.cookieValue) {
                      $("body").append(
                        '<div id="cookieChoiceInfo" class="' + settings.bannerClass + '" style="' + settings.bannerStyle + '">' +
                        settings.bannerMessage +
                        ' <a href="' + settings.bannerLinkURL + '" class="' + settings.bannerLinkClass + '" style="' + settings.bannerLinkStyle + '" target="' + settings.bannerLinkTarget + '">' + settings.bannerLinkText + '</a> ' +
                        '<button type="button" id="cookieChoiceDismiss" class="' + settings.bannerButtonClass + '" style="' + settings.bannerButtonStyle + '">' + settings.bannerButtonText + '</button>' +          
                        '</div>'
                      );        
                      $("#cookieChoiceInfo").slideDown();
                    }    
           
                    $("#cookieChoiceDismiss").on("click", function () {      
                      var expires = ""
                      if (settings.cookieDuration) {
                          var date = new Date()
                          date.setTime(date.getTime() + (settings.cookieDuration*24*60*60*1000))
                          expires = "; expires=" + date.toGMTString()
                      }
                      document.cookie = settings.cookieName + "=" + settings.cookieValue + expires + "; path=" + settings.cookiePath;
                      $("#cookieChoiceInfo").slideUp();
                    });
                               
                };
            }(jQuery));
       
            $(document).cookieConsent({
              bannerMessage: "<?php $smarty->configLoad('lang_' . $_SESSION['language'] . '.custom'); echo $smarty->getConfigVars('eu_cookie_txt');  ?>",
              bannerLinkText: "<?php echo $smarty->getConfigVars('eu_cookie_link'); ?>",
              bannerButtonText: "<?php echo $smarty->getConfigVars('eu_cookie_confirm'); ?>",
              bannerLinkURL: "<?php  echo xtc_href_link(FILENAME_POPUP_CONTENT, 'coID=' . EU_COOKIE_CONTENT); ?>"
            });
        }
            <?php endif; ?>
        // END Creare's 'Implied Consent' EU Cookie Law Banner
     

    und in '/templates/bootstrap3/config/config.php'

    Code: PHP  [Auswählen]
      define('EU_COOKIE', true); // Hinweis EU-COOKIE anzeigen = true, ansonsten false

    auf false setzen.

    Es stehen im Skript oben dann diese zwei Ausgabealternativen zur Verfügung.

    Code: PHP  [Auswählen]
                        // bannerStyle: "position: fixed; width: 100%; opacity: 1; margin: 0px; left: 0px; bottom: 0px; padding: 10px; z-index: 1000; text-align: center; display: none;", // Anzeige unten ganze Breite
                        bannerStyle: "position: fixed; width: 100%; opacity: 1; margin: 0px; bottom: 0px; padding: 10px; z-index: 1000; text-align: center; display: none; width: 300px; min-width: 300px; max-width: 90%; right: 20px; bottom: 20px; overflow: auto;", // Anzeige unten rechts
     

    Das Resultat sollte dann so aussehen.

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

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

    Gruss
    Hanspeter

    Timm

    • Fördermitglied
    • Beiträge: 6.258
    Danke für die ausführliche, bebilderte Anleitung.

    Karl1

    • Experte
    • Beiträge: 1.879
    Hallo Hanspeter,
    die Datei '/templates/bootstrap3/javascript/eu_cookie.js' wird wirklich nicht benötigt, ist ein Testrelikt.

    Dein EU-Cookie-Vorschlag sieht super aus.
    Ähnliches kann man ohne Code-Änderung mit etwas CSS erreichen.
    Ich finde es schön, wenn man weiterhin in der config.php die Wahl hat den Hinweis ein- oder auszuschalten.

    Schreibt man in die stylesheet.css
    Code: CSS  [Auswählen]
    #eucookielaw {
        bottom: 0;
        margin-bottom: 0;
        position: fixed;
        right: 0;
        width: 20%;
        z-index: 999999;
    }
     

    oder

    Code: CSS  [Auswählen]
    #eucookielaw {
        bottom: 0;
        margin-bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 999999;
    }

    dann wird die BOX "EU_COOKIE" unten rechts oder aber unten auf gesamter Breite dargestellt.

    Das kann dann jeder für sich entscheiden.

    Gruß Karl

    web28

    • modified Team
    • Beiträge: 9.404
    Erst einaml ein Kompliment für das Template und die viele Arbeit.

    Verbessrungsvorschlag für stylesheet.min.css bzw. der stylesheet.css

    Diese sollten im selben Verzeichnis liegen, ansonsten stimmen realitive Bezüge nicht mehr.

    Beispiel:
    Code: CSS  [Auswählen]
    /* meine Icons */
    @font-face {
      font-family: 'my_icons';
      src: url('./fonts/my_icons.eot');
      src: url('./fonts/my_icons.eot#iefix') format('embedded-opentype'),
           url('./fonts/my_icons.woff2') format('woff2'),
           url('./fonts/my_icons.woff') format('woff'),
           url('./fonts/my_icons.ttf') format('truetype'),
           url('./fonts/my_icons.svg?#my_icons') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    Mit ./fonts wird auf das übergeordnete Verzeichnis referenziert. Damit das funktioniert gibt es im Template 2 mal den fonts Ordner (font und css/fonts)

    Besser wäre die stylesheets.css auch in das css Verzeichnis zu legen.

    Gruss Web28

    Timm

    • Fördermitglied
    • Beiträge: 6.258
    Das der cookiehinweis nicht angezeigt wurde, lag an meinen ublock einstellungen. Er funkttioniert, wenn ublock für die seite deaktiviert ist.

    Karl1

    • Experte
    • Beiträge: 1.879
    Hallo Web28,
    danke für dein Kompliment.

    Ich hatte anfangs die stylesheet.css auch schon mal im Ordner /css.
    Hab dann wieder alles so verschoben wie es jetzt ist.

    Meine Überlegung diesbezüglich:
    In älteren Shop-Versionen war man nur eine stylesheet.css im Templateordner gewohnt - Anpassungen hat man in dieser Datei erledigt.
    Für die Shop-Version 2.0 gibt es keine Dokumentation.
    Dass die Komprimierung im Adminbereich ein- und auszuschalten ist, ist vielen nicht bekannt.
    Vielen wird auch nicht bekannt sein, dass die stylesheet.min.css automatisch neu erzeugt wird, wenn die "filemtimes" nicht übereinstimmen.

    Damit nicht an der stylesheet.min.css "geschraubt" wird habe ich die im CSS-Ordner "versteckt".

    Aus diesem Grund musste der zweite Ordner /fonts her, damit die relativen Bezüge mit und ohne Komprimierung wieder stimmen.

    Gruß Karl

    web28

    • modified Team
    • Beiträge: 9.404
    Das gleiche Problem mit den relativen Bezügen gilt auch für die CSS Dateien im bootstrap Verzeichnis.

    Gruss Web28

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Das der cookiehinweis nicht angezeigt wurde, lag an meinen ublock einstellungen. Er funkttioniert, wenn ublock für die seite deaktiviert ist.

    Merkwürdig, ich habe auch uBlock Origin in meinem Firefox, der cookiehinweis wird aber trotzdem korrekt angezeigt und ich kann ihn auch weg klicken.

    Hier habe ich es getestet -> https://(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))/modified2021/

    Gruss
    Hanspeter

    Timm

    • Fördermitglied
    • Beiträge: 6.258
    Das der cookiehinweis nicht angezeigt wurde, lag an meinen ublock einstellungen. Er funkttioniert, wenn ublock für die seite deaktiviert ist.

    Merkwürdig, ich habe auch uBlock Origin in meinem Firefox, der cookiehinweis wird aber trotzdem korrekt angezeigt und ich kann ihn auch weg klicken.

    Hier habe ich es getestet -> https://(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))/modified2021/

    Gruss
    Hanspeter
    Hallo Hanspeter

    Hatte es nach diesem blog konfiguriert https://www.kuketz-blog.de/ublock-origin-schutz-gegen-tracker-und-werbung/, der im thema Browser-AddOns, Anti-Adds und Anti-Tracking von noriddle als Lektüre empfohlen wurde. Habs  heut erst gemerkt, als auf meiner eigenen Seite kein Cookiehinweis mehr sichtbar war in firefox, nachdem ich cookies und cache gelöscht hatte, wegen einer anderen Einstellung, die ich testen wollte.

    Durch ausschalten von ublock gehts. Welche Einstellung es ist, kann ich noch nicht sagen. Die mit den Externe Schriftarten blocken, hatte ich schon vorher abgeschaltet, weil die Buttons nicht mehr richtig dargestellt wurden.

    Kommt die krass niedrige parsetime in deinem Testshop nur von den wenigen Produkten, die integriert sind? Eher nicht. Selbt mit leerem shop komm ich glaub ich nicht annähernd auf Werte von 0,1 Sek. SSD Datenbank?

    Gruß Timm

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    [...]
    Kommt die krass niedrige parsetime in deinem Testshop nur von den wenigen Produkten, die integriert sind? Eher nicht. Selbt mit leerem shop komm ich glaub ich nicht annähernd auf Werte von 0,1 Sek. SSD Datenbank?
    [...]

    Nein die krass niedrige Parstime ist wohl eher der Uhrzeit zu der du die Seite angesurft hast geschuldet, eigentlich ist die Performance bei Uberspace eher niedrig, denn erstens läuft PHP über F-CGI was bedeutet das beim ersten Seitenaufruf eines Besuchers erst eine neu Instanz von PHP erzeugt werden muss und dies dauert ca. 2-3 Sekunden und zweitens ist meine Domain mit etwa 350 anderen auf dem gleichen Server gehostet, dafür kostet der Webspace aber auch nur 1 Euro pro Monat und man kann alles über die Shell administrieren.

    Gruss
    Hanspeter

    Timm

    • Fördermitglied
    • Beiträge: 6.258
    Nein die krass niedrige Parstime ist wohl eher der Uhrzeit zu der du die Seite angesurft hast geschuldet, eigentlich ist die Performance bei Uberspace eher niedrig, denn erstens läuft PHP über F-CGI was bedeutet das beim ersten Seitenaufruf eines Besuchers erst eine neu Instanz von PHP erzeugt werden muss und dies dauert ca. 2-3 Sekunden und zweitens ist meine Domain mit etwa 350 anderen auf dem gleichen Server gehostet, dafür kostet der Webspace aber auch nur 1 Euro pro Monat und man kann alles über die Shell administrieren.
    Auch jetzt ist sie noch weit unter 0,2sek. Dann ist das Bootstrap Template einfach schneller.

    Zitat
    mobil geht ein Bild das 835px breit ist weit über den Seitenrand, obwohl die Breite der Seite (div class="homesite clearfix mb") mit 847px angegeben ist in der desktopvariante-müsste er das Bild nicht mit verkleinern, wenn ich das Browserfenster verkleinere?
    Du hast recht. Bilder die über den Content Manager eingefügt werden besitzen die Bootstrap-Klasse class="img-responive" nicht.
    Als Abhilfe kann man diese Anweisung img {display: block; height: auto; max-width: 100%;} in die templates/bootstrap3/stylesheet.css einfügen.
    Das hilft nicht so ganz, weil das Bild dann total verzerrt ist.

    Das gleiche gilt für den Banner. Kann man auch im demoshop von @hpzeller sehen. Der geht in der mobilen Ansicht weit über den Seitenrand hinaus.

    Gruß Timm

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    [...]
    Dein EU-Cookie-Vorschlag sieht super aus.
    Ähnliches kann man ohne Code-Änderung mit etwas CSS erreichen.
    Ich finde es schön, wenn man weiterhin in der config.php die Wahl hat den Hinweis ein- oder auszuschalten.

    Schreibt man in die stylesheet.css
    Code: CSS  [Auswählen]
    #eucookielaw {
        bottom: 0;
        margin-bottom: 0;
        position: fixed;
        right: 0;
        width: 20%;
        z-index: 999999;
    }
     

    oder

    Code: CSS  [Auswählen]
    #eucookielaw {
        bottom: 0;
        margin-bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 999999;
    }

    dann wird die BOX "EU_COOKIE" unten rechts oder aber unten auf gesamter Breite dargestellt.
    [...]

    Anstatt dieser Regel

    Code: CSS  [Auswählen]
    #eucookielaw {
        bottom: 0;
        margin-bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 999999;
    }
     

    würde ich folgende Regel einfügen

    Code: CSS  [Auswählen]
    #eucookielaw {
        bottom: 0;
        margin-bottom: 0;
        position: fixed;
        text-align: center;
        left: 0;
        width: 100%;
        z-index: 999999;
    }
     

    sonst verschwindet der Button [Eiverstanden] in der Desktop-Ansicht.

    Gruss
    Hanspeter

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    [...]
    Auch jetzt ist sie noch weit unter 0,2sek. Dann ist das Bootstrap Template einfach schneller.
    [...]

    Ok, wenn du 0,2 Sekunden für die paar Produkte im Shop als sehr schnell ansiehst.

    Gruss
    Hanspeter

    Timm

    • Fördermitglied
    • Beiträge: 6.258
    [...]
    Auch jetzt ist sie noch weit unter 0,2sek. Dann ist das Bootstrap Template einfach schneller.
    [...]

    Ok, wenn du 0,2 Sekunden für die paar Produkte im Shop als sehr schnell ansiehst.

    Gruss
    Hanspeter
    :-? Also selbst wenn ich bei mir auf contentseiten wie Widerruf, Impressum etc klicke komm ich auf durchschnittlich 0,6sek. Und da sind doch die Produkte egal, oder? Liegt das vielleicht an der php 5.4 version?

    EDIT: Wenn ich auf das Bootstrap Template wechsel komm ich auch auf 0,25sek. Krass-macht das responsive template von modified echt mehr als das doppelte aus. Da ist aber auch die stylesheet.css 10mal so lang.
    2035 Antworten
    364821 Aufrufe
    Heute um 01:23:35 von Onlineshopper
    179 Antworten
    12872 Aufrufe
    14. September 2024, 10:13:46 von kotzbrocken
    1228 Antworten
    652838 Aufrufe
    11. März 2020, 16:11:33 von Baschtl
    1 Antworten
    3299 Aufrufe
    24. April 2018, 09:36:44 von lukass