Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:

Autor Thema: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template  (Gelesen 190865 mal)

Offline Karl1

  • Viel Schreiber
  • *****
  • Beiträge: 526
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #900 am: 05. Januar 2019, 15:12:57 »
Hallo Timm,
scheinbar ist das von dir beschriebene Verhalten bekannt.
Hab jetzt in einigen Foren darüber gelesen, dass das Problem nur bei iPhones (iOS) besteht.

Leider kann ich nicht testen, könntest du das übernehmen?
Hier Lösungsvorschläge aus dem Netz:
1. In die general_bottom.js.php (evtl. auch als CSS in die stylesheet.css)
Code: Javascript  [Auswählen]
$('body').css('overflow','hidden');
$('body').css('position','fixed');

2. https://stackoverflow.com/questions/21024774/twitter-bootstrap-3-modal-on-mobile-scroll-issues

3. https://stackoverflow.com/questions/12067802/modal-box-on-iphone-no-scroll

Gruß Karl

Offline fishnet

  • Fördermitglied
  • *****
  • Beiträge: 4.635
  • Geschlecht: Männlich
    • Teile Beitrag
    • Fishnet Services
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #901 am: 05. Januar 2019, 20:22:26 »
Zitat
Leider kann ich nicht testen

falls das an einem fehlenden iphone liegt:

(Klugscheissermodus an)
Browserstack: 130 Minuten kostenlos die Website auf mobile Ansichten testen
(Klugscheissermodus aus)

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.852
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #902 am: 05. Januar 2019, 20:25:37 »
Hallo Karl

Vorab: das komische ist, dass ich mit deinem Template und meiner Seite nicht so extreme Probleme habe das  Lieferpopup zu scrollen, wie auf den anderen Seiten (sel**t-schrei***n.de,naut**art.de und rc-a**dy.de). Allerdings läuft es auch nicht wirklich rund. Also immer gehts nicht. Vor allem wenn man den Browser schließt und wieder öffnet, dann weiß er nicht, ob er das Popup oder den Hintergrund scrollen soll. Auch wenn ich zb etwas vom Text des Popups markiere und dann bewege, dann bewegt sich die Markierung, aber nicht der Text, als wenn er was vom Hintergrund markiert hätte. Aber bei meiner Seite konnte man das irgendwie mit einmal oder zweimal tippen immer umgehen. Ist aber keine Lösung für den Normalnutzer. Da sollte es vernünftig funktionieren.

Wenn ich den Code von dir in die generell_bottom.js.php packe, dann kann ich weder auf dem Desktop noch auf dem Handy die komplette Seite scrollen. Und overflow: hidden und position fixed allein in der stylesheet.css hat nichts gebracht.

Aus einem deiner Links habe ich mal folgendes in die stylesheet gepackt (andere Sachen auch probiert). Der erste Teil ist von dir, damit man weiß wo.
Code: CSS  [Auswählen]
@media screen and (max-width: 767px) {
  .top span.glyphicon, .top2 .dropdown-toggle {
    font-size: 1.2em;
  }
.top .navbar-nav {
    margin: 0;
}
.modal {
            height: 500px; /* Set a default max height of the modal (adjusted later)*/
            position: fixed; /* Display modal in the centre of your screen */
            overflow-y: scroll; /*  Ensure that the modal is scroll-able */
            -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
        }
        .modal.fade.in{
            top: 5px; /* Use more screen real estate */
        }
        .modal-body{
            /* Increase the max height of the modal body to try & avoid both it,
             * and the modal container having scroll bars which results in odd behavior */

            max-height: 2400px;
        }  
}
@media (max-width: 480px) and (max-height: 500px){.modal{ height: 450px}}
    @media (max-width: 480px) and (max-height: 450px){.modal{ height: 400px}}
    @media (max-width: 480px) and (max-height: 400px){.modal{ height: 350px}}
    @media (max-width: 480px) and (max-height: 350px){.modal{ height: 300px}}
    @media (max-width: 480px) and (max-height: 300px){.modal{ height: 250px}}
    @media (max-width: 480px) and (max-height: 250px){.modal{ height: 200px}}
    @media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}

Damit scheint es besser zu funktionieren. Sieht aber ziemlich blöd aus, weil das Fenster dann zu kurz ist und oben an der Adminleiste klebt.

Aber das hat mich vielleicht auf den Grund des Problems gebracht. Die Popups sind auf einem Androidtelefon nicht seitenfüllend. Auf dem Iphone hingegen schon (was eh nicht so schön aussieht). Und das scheint Probleme zu machen. Im responsive tpl modified geht das Popup auch nicht bis ganz zum Seitenende oben und unten und es funktioniert, obwohl man es auch dort erzwingen kann, dass sich der Hintergrund bewegt, wenn man sich im oberen oder unteren Teil des Popups an der Grenze zum Hintergrund befindet. Da kann er sich auch nicht entscheiden, was er scrollen soll. Vermutung: Man muss dem Popup eine gewisse maximale Höhe abhängig von der Höhe des Bildschirms geben, damit oben und unten etwas Platz bleibt.

Da mein Testshop eine 1zu1 Kopie meiner Seite ist in der einige Module eingebaut sind und deshalb zb keine Produktseiten mit deinem Template sichtbar sind (und ich ungern den Aufwand betreiben möchte die da alle einzubauen nur zum testen), wäre es super, wenn eine mögliche Lösung vielleicht in einem Testshop von dir oder Hanspeter integriert werden würde und ich dann mit dem Iphone gegentesten kann. Und so könnten es auch mehr Leute, vielleicht auch einige Shopbesitzer, die dein Template nutzen, gegentesten.

So sieht es mit dem Code von oben aus und funktioniert, ist aber noch unschön:
[ Für Gäste sind keine Dateianhänge sichtbar ]

So sieht es ohne Änderung auf dem Iphone aus (zu wenig Platz oben und unten)
[ Für Gäste sind keine Dateianhänge sichtbar ]

So sieht es ohne Änderung auf einem Android aus (unten mehr Platz und deshalb wahrscheinlich scrollbar)
[ Für Gäste sind keine Dateianhänge sichtbar ]

So sieht es mit dem tpl_modified_responsive aus auf dem Iphone (oben und unten Platz und scrollbar)
[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß Timm

Offline Karl1

  • Viel Schreiber
  • *****
  • Beiträge: 526
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #903 am: 07. Januar 2019, 20:29:28 »
Hallo Zusammen,
folgende Änderungen sorgen für eine bessere Performance, beim Scrollen von Popups, auf iOS-Geräten.

Ersetze in der Datei templates/bootstrap3/javascript/general_bottom.js.php
Code: Javascript  [Auswählen]
                        var windowheight = $(window).height()-225;
mit
Code: Javascript  [Auswählen]
                        var windowheight = $(window).height()-200;

Füge in der templates/bootstrap3/stylesheet.css hinzu
Code: CSS  [Auswählen]
/* Hack für iOS */
.modal-dialog {
        margin: 10px auto;
        z-index:9999;
}
.modal-open {
        overflow-y: auto !important;
}
.modal-header {
        padding: 10px;
}
.modal-footer {
        padding: 3px;
}

Herzlichen Dank an Timm, für die Hilfe!

Gruß Karl

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.852
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #904 am: 07. Januar 2019, 21:22:19 »
Hallo Karl,

entschuldige bitte, dass ich es nicht geschrieben habe, bevor du eine Lösung hier gepostet hast. Aber mich stört folgendes dann doch ziemlich, konnte mich aber nicht vorher melden:

Wenn man ganz nach unten scrollt und dann auf den Schließen Button klickt, dann wird das Popup nicht geschlossen, sondern die Safarileiste erscheint, wohinter er sich dann versteckt. Man muss dann nochmal das Popup nach oben schieben, um den Schließen Button zu betätigen.

Das tritt aber nur in Safari auf und nicht in Firefox oder Chrome, weil Safari zusätzlich automatisch diese Leiste anzeigt sobald man im unteren Bereich drückt. Und diese Funktion geht vor allem anderen (auf jeder Seite), egal ob da ein Button ist oder nicht. Firefox und Chrome haben diese Funktion nicht. Deren untere Leisten werden nur angezeigt, wenn man auf der Seite wieder nach oben geht, wie es auch bei Safari der Fall ist.

So etwa sieht es ja mit der neuen Lösung aus
[ Für Gäste sind keine Dateianhänge sichtbar ]

Und so wenn man unten einmal auf den Schließen Button drückt
[ Für Gäste sind keine Dateianhänge sichtbar ]

Um zu verdeutlichen wo die Linie ist unterhalb der jeder Klick dazu führt, dass die Leiste erscheint und alles dahinter versteckt (ab dem Wort "funktionieren")
[ Für Gäste sind keine Dateianhänge sichtbar ]

Die einzige Möglichkeit die ich sehe das zu umgehen, wäre das Fenster nicht ganz bis unten anzuzeigen, wie es beim tpl_modified_responsive auch der Fall ist. Oder halt damit zu leben.

Vielleicht ist das auch zu perfektionistisch, aber mich stören solche Sachen.

Gruß Timm

Offline Karl1

  • Viel Schreiber
  • *****
  • Beiträge: 526
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #905 am: 12. Januar 2019, 11:42:26 »
Hallo,
Timm hat weiter getestet und zusammen haben wir eine akzeptable Lösung für eine bessere Performance, beim Scrollen von Popups, auf iOS-Geräten gefunden.

Die Änderung in der Datei templates/bootstrap3/javascript/general_bottom.js.php muss nicht gemacht werden - die Zeile kann so bleiben.
Code: Javascript  [Auswählen]
                       var windowheight = $(window).height()-225;

Dagegen hat sich unser Vorschlag für die Datei templates/bootstrap3/stylesheet.css wie folgt geändert.
Code: CSS  [Auswählen]
/* Hack für iOS */
.modal-dialog {
    margin: 10px auto;
    z-index:9999;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}
.modal-open {
    overflow-y: auto !important;
}
.modal-header {
    padding: 10px;
}
.modal-footer {
    padding: 3px;
}

Gruß Karl

Offline vilsa

  • Fördermitglied
  • *****
  • Beiträge: 68
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #906 am: 13. Januar 2019, 19:27:05 »
Es reicht schon aus, den Aufruf der Box "Kategorien" in der /templates/bootstrap3/source/boxes.php auszukommentieren:

Code: PHP  [Auswählen]
  //require_once(DIR_FS_BOXES . 'categories.php');

Dann wird diese Box in der linken Navigation auch gar nicht mehr geladen.

Und das Top-Menü lässt sich entfernen, wenn man in der index.html diesen Teil entfernt:

Code: XML  [Auswählen]
        {* BEGINN Superfish, Responsivemenü- oder Mmenü- und Sidebarlinks*}
        <nav id="navbar" class="top2 navbar navbar-{$smarty.const.TOP2_NAVBAR}{if $smarty.const.SUPERFISHMENU === false} visible-xs visible-sm{/if}">
            <div class="canvasmenu container-fluid">
                {if $smarty.const.MMENU == true}<a class="navbar-brand" href="#menu"><span class="visible-xs visible-sm pull-left"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>&nbsp;&nbsp;</span>{#heading_mmenu#}</a>{/if}
                {if $smarty.const.RESPONSIVEMENU == true && $smarty.const.MMENU == false}<a class="navbar-brand menu-btn menu-btn--left pull-left" href="#"><span class="visible-xs visible-sm"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>&nbsp;&nbsp;{#heading_responsivemenu#}</span></a>{/if}
                {if !isset($fullcontent) && $fullcontent != true}<a class="navbar-brand menu-btn menu-btn--right pull-right" href="#"><span class="visible-xs visible-sm">{#heading_sidebar#}&nbsp;&nbsp;<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></span></a>{/if}
            </div>
            {if $smarty.const.SUPERFISHMENU === true}
            <div class="fullmenu container-fluid">
                <div class="navbar-header"><a class="navbar-brand" href="{$index}"><span class="glyphicon glyphicon-home"></span></a></div>
                {$box_CATEGORIES_SUPERFISH}
            </div>
            {/if}
        </nav>
        {* ENDE Superfish, Responsivemenü und Mmenü *}

So wie ich das beim Überfliegen sehe, wird dieses Menü aber bei responsiver Ansicht herangezogen, was im Umkehrschluss bedeutet, dass man auf seinem Smartphone dann nicht mehr navigieren kann.

Hallo,

ich habe das Auskommentieren des Superfish probiert, aber dann läuft die Seite nicht mehr (weiße Seite).
Siehe Anhang (Code Screenshot).

Kann kann mir jemand sagen, wie ich die horizontale Navigation anpassen bzw. abschalten kann? So wie sie jetzt ist, ist sie n "bisschen" groß und ausladend.
Ich habe gelesen, man solle im Template den Superfish-Code auskommentieren, aber dann geht bei mir nix mehr. Gibts dazu eine Anleitung?

Was ich fein finde ist, dass bei mouseover die Unterkategorien ausklappen. Kann man das für die linksseitige Navigation auch einschalten?

Für Anregungen und Tipps wäre ich dankbar.

Offline hpzeller

  • Experte
  • *****
  • Beiträge: 3.015
  • Geschlecht: Männlich
    • Teile Beitrag
    • xos-shop.com | XOS-Shop ist ein umfangreiches "Open Source Webshop-System", welches per Webinterface administriert wird und an die Bedürfnisse des Betreibers angepasst werden kann.
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #907 am: 13. Januar 2019, 23:51:53 »
[...]
Kann kann mir jemand sagen, wie ich die horizontale Navigation anpassen bzw. abschalten kann? So wie sie jetzt ist, ist sie n "bisschen" groß und ausladend.
Ich habe gelesen, man solle im Template den Superfish-Code auskommentieren, aber dann geht bei mir nix mehr. Gibts dazu eine Anleitung?
[...]

In der Datei templates/bootstrap3/config/config.php kann man das Superfishmenü bei ca. Zeile 60 abschalten

Code: PHP  [Auswählen]
  // Superfishmenü
  define('SUPERFISHMENU', true); // Superfishmenü anzeigen = true, ansonsten false

und bei ca. Zeile 100 anpassen.

Code: PHP  [Auswählen]
$SUPERFISH_MEGACATEGORIES = array();



[...]
Was ich fein finde ist, dass bei mouseover die Unterkategorien ausklappen. Kann man das für die linksseitige Navigation auch einschalten?
[...]

Leider nicht.

Gruss
Hanspeter

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.852
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #908 am: 14. Januar 2019, 11:05:01 »
Nachtrag, weil ich nur auf dem iPhone getestet habe und nicht mit einem iPad.

Code: CSS  [Auswählen]
/* Hack für iOS */
.modal-dialog {
    margin: 10px auto;
    z-index:9999;
    max-height: calc(100vh - 70px);
    overflow-y: auto;

Die 70px sind auf einem Iphone X etwas mehr als die untere Navigationsleiste in Safari, wodurch man durch klicken auf den schließen Button nicht erst die untere Safari Navigationsleiste öffnet und nochmal runterscrollen muss in der Box um den Button zu treffen.

Könnte mal jemand mit einem iPad testen, ob das da auch ausreicht? Falls die Leiste da mehr Pixel hat, dann müsste man den Wert dementsprechend etwas erhöhen.

Gruß Timm

Offline bitzshopper

  • Fördermitglied
  • *****
  • Beiträge: 16
  • Geschlecht: Männlich
    • Teile Beitrag
    • Tabletopbitz Shop
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #909 am: 14. Januar 2019, 13:03:44 »
Hallo Karl,

ich wollte einfach mal danke für ein tolles Template sagen, das ich jetzt seit etwa einem Monat nutzen darf. Vielen Dank auch an hpzeller.

Offline vilsa

  • Fördermitglied
  • *****
  • Beiträge: 68
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #910 am: 14. Januar 2019, 17:22:23 »
[...]
Kann kann mir jemand sagen, wie ich die horizontale Navigation anpassen bzw. abschalten kann? So wie sie jetzt ist, ist sie n "bisschen" groß und ausladend.
Ich habe gelesen, man solle im Template den Superfish-Code auskommentieren, aber dann geht bei mir nix mehr. Gibts dazu eine Anleitung?
[...]

In der Datei templates/bootstrap3/config/config.php kann man das Superfishmenü bei ca. Zeile 60 abschalten

Code: PHP  [Auswählen]
  // Superfishmenü
  define('SUPERFISHMENU', true); // Superfishmenü anzeigen = true, ansonsten false

und bei ca. Zeile 100 anpassen.

Code: PHP  [Auswählen]
$SUPERFISH_MEGACATEGORIES = array();



[...]
Was ich fein finde ist, dass bei mouseover die Unterkategorien ausklappen. Kann man das für die linksseitige Navigation auch einschalten?
[...]

Leider nicht.

Gruss
Hanspeter

Dank dir vielmals. Nutzt du die Superfish Navigation oder die linksseitige, klassische?

Offline vilsa

  • Fördermitglied
  • *****
  • Beiträge: 68
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #911 am: 14. Januar 2019, 17:45:25 »
Hat jemand von euch Wissenden eine Idee, wieso die glyphicons in Firefox unter OSX (beides aktuellste Version) nicht angezeigt werden, im Safari aber ohne Probleme? Konnte über die Suchfunktion und Onlinerecherche nichts herausfinden.

*edit* von Zauberhand erledigt... wieso auch immer.

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.852
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #912 am: 14. Januar 2019, 18:12:07 »
Die Zauberei ist aber weg, sobald du den Browsercache löschst und die Seite erstmalig neu öffnest. Kannst du ja mal auf einem anderen Gerät testen. Geht erst nach dem ersten Klick im Shop weg.

Liegt ziemlich sicher an falsch eingerichtetem SSL bzw falsch oder gar nicht eingerichteten Weiterleitungen in der .htaccess. Denn beim zweiten Klick im Shop werden dann immer die Links aus der configure.php genommen und die Icons werden dann richtig angezeigt. Beim ersten Shopaufruf kann die Adresse aber anders sein, als in der configure.php weil nicht weitergeleitet wurde und dann kommt es zu solchen Hieroglyphen.

Gruß Timm

Offline vilsa

  • Fördermitglied
  • *****
  • Beiträge: 68
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #913 am: 14. Januar 2019, 18:29:58 »
Gibt es da eine Anleitung, wie man die htaccess korrekt einrichten müsste? Ich hoste den Shop bei All Inkl., da gab es wohl eine Besonderheit bei der SSL Nutzung.

Ich habe bei All Inkl. SSL aktiviert, aber nicht erzwungen. Ist ein bisschen blöd, weil ich erst nach einem Click im Shop zur https Variante komme und nicht direkt. In einer Anleitung hier stand, man solle SSL nicht erzwingen bei All Inkl.

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.852
    • Teile Beitrag
Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template
« Antwort #914 am: 14. Januar 2019, 18:33:55 »
Soll man nirgends erzwingen-ist also richtig. In der includes/configure.php müssen beide Pfade mit https angegeben werden.

Wenn dort die Adresse mit www angegeben wird, dann in der .htaccess

Code: XML  [Auswählen]
##-- redirect to https www-domain, when www is missing and no subdomain given and not using an ssl-proxy
  #RewriteCond %{HTTP_HOST} !^www\. [NC]
  #RewriteCond %{HTTP_HOST} !\.(.*)\. [NC]
  #RewriteCond %{HTTP_HOST} !^localhost [NC]
  #RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  #RewriteCond %{SERVER_PORT} !^443$
  #RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

ändern zu

Code: XML  [Auswählen]
##-- redirect to https www-domain, when www is missing and no subdomain given and not using an ssl-proxy
  RewriteCond %{HTTP_HOST} !^www\. [NC]
  RewriteCond %{HTTP_HOST} !\.(.*)\. [NC]
  RewriteCond %{HTTP_HOST} !^localhost [NC]
  RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  RewriteCond %{SERVER_PORT} !^443$
  RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Ansonsten halt bei der Stelle redirect to https non www die # entfernen. Muss halt nur in beiden Dateien gleich sein.

Wiki Anleitung SSL einrichten

Gruß Timm

Werbung / Banner buchen

Teile per facebook Teile per linkedin Teile per twitter