TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template

[hpzeller]

Einige andere Sachen stehen auch in der shopvorstellung von @nooblike hier
rc-Andy.

ZB dass in der mobilen Ansicht das Fax auch hinter das Eingabefehler rutscht. Einfach mal das Browserfenster verkleinern, dann sieht man bei einem responsiven Template, wie es sich auf kleineren Bildschirmen ändert.

Gruß Timm

Ja dieses "Fax" Problem verschwindet auch durch den Vorschlag aus Antwort #118

Gruss
Hanspeter

[Timm]

[hpzeller]

[...]
Die Newsletterbox wird angezeigt auch wenn das Newslettersystem ausgeschaltet ist.
Checkbox ist zwar weg aber der Text ist noch sichtbar.
( dies konnte ich durch  {if $CHECKBOX_NEWSLETTER}  .....   {/if}   lösen )
[...]

Ich nehme an du hast den Fehler wie folgt behoben.

In der Datei '\templates\bootstrap3\module\create_account_guest.html' und der Datei '\templates\bootstrap3\module\create_account_guest.html' jeweils folgenden Code

Code: XML  [Auswählen]

          <div class="panel panel-default">
            <div class="panel-body">
                <h4>{#title_newsletter#}</h4>
                <div class="checkbox clearfix mb">
                    <label for="newsletter">
                        {$CHECKBOX_NEWSLETTER}
                        {#text_newsletter#}
                    </label>
                </div>
            </div>
        </div>
 

mit diesem ersetzen

Code: XML  [Auswählen]

   
   {if $CHECKBOX_NEWSLETTER}
          <div class="panel panel-default">
            <div class="panel-body">
                <h4>{#title_newsletter#}</h4>
                <div class="checkbox clearfix mb">
                    <label for="newsletter">
                        {$CHECKBOX_NEWSLETTER}
                        {#text_newsletter#}
                    </label>
                </div>
            </div>
        </div>
    {/if}  
 

Anmerkung: Im tpl_modified wurde der Fehler aber auch erst in diesem release -> "modified eCommerce Shopssoftware v2.0.3.0 rev 10907 dated: 2017-08-16" behoben.

Gruss
Hanspeter

[hpzeller]

[...]
-wenn die Artikelbilder oder Unterkategoriebilder unterschiedlich groß in der Höhe sind, oder Artikeltitel länger sind und somit unterschiedlich viele Zeilen in der Boxansicht beanspruchen, wird alles ab Artikeltitel nach unten verschoben (sprich Lieferzeit, Artikelpreis etc) und das untere Ende der Artikelbox schließt nicht mehr Bündig mit den anderen Artikelboxen ab - das ist im tpl_modified_responsive nicht so, weil anscheinend ein gewisser Platz um das Bild ist und somit der Artikeltitel immer auf der selben höhe beginnt - das mit den Artikeltiteln kann man über die Schriftart anpassen, dass maximal 2 Zeilen belegt werden (ging in einem Fall jetzt durch  Änderung von 14px statt 15px von 3 auf 2 Zeilen)
[...]

Damit alle Boxen in Produktlisten unten bündig sind kann man folgendes machen.

In 'templates\bootstrap3\module\product_listing\product_listing_v1.html' folgenden Code

Code: XML  [Auswählen]

{$PAGINATION}
<div class="row">
 

mit diesem ersetzen

Code: XML  [Auswählen]

{$PAGINATION}
<div class="row eq-height">
 

und in 'templates\bootstrap3\stylesheet.css' am Ende folgenden Code einfügen

Code: CSS  [Auswählen]

.eq-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;  
}

.eq-height div[class*='col-'] {
  flex:1 1 inherit;
  display: flex;
}

.eq-height .panel {
  flex:1 0 100%;
}
 

Vorher:

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

Nachher:

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

PS:
Im "tpl_modified" werden, wie man im Screenshot sieht, lange Artikelnamen ansatzlos abgeschnitten.

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

Gruss
Hanspeter

[Timm]

@hpzeller
Da hast du ja nen richtig alten Beitrag wieder ausgekramt. 

Aber wenn man sich zb den shop von @nooblike anguckt, ist das Thema immer noch aktuell und wurde hier bisher nicht beantwortet. Deshalb von mir danke.

Schön wär natürlich noch, dass Preis und Lieferzeit dann weiterhin auf einer Höhe stehen würden und die Box auch genauso lang ist, wenn man einen Artikel mit normalem Preis und daneben zb einen mit Staffelpreis (wo darunter ja noch eine Zeile mehr steht) hat. Das sieht beim tpl_responsive noch etwas besser aus. Natürlich unschön dort mit den abgeschnittenen Titeltexten.

Weiter war mir in deinem verlinkten Beitrag vom 18.Mai 2017 aufgefallen, dass die Bilder im Bestsellerslider nicht gleich groß sind. Sieht man auch jetzt noch bei @nooblike. Bei mir hatte das sogar die Auswirkung, dass sich der Footer nach unten bewegt. Bei @nooblike ist das nicht so.

Und wenn man sich beim Abschluss der Bestellung als Gast und nicht als neuer Kunde registriert für die Bestellung, dann erscheint unten rechts die Box für Passwort und Kennwert, auch wenn man da nichts eingeben kann. Das sollte da komplett raus.

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

Aber eigentlich sollten sich die Leute, die das Template im Shop verwenden ein bißchen mehr hier einbringen, oder? Zumal vieles auch in dem Shopvorstellungsthread steht, hier aber dann nicht nach Lösungen gefragt wird. Komisch 

Grüße Timm

[Nooblike]

Hallo hpzeller,

leider Funktioniert diese Methode nicht bei mir kann aber nicht sagen wieso...

Habs so eingefügt wie du es beschrieben hast und keinerlei änderung.

Wenn mir einer noch helfen könnte wo ich schauen muss wegen dem verschobenem Ort in der Registrierung so wie dem verschobenem Fax in der mobilen Version wäre ich sehr dankbar...

[awids]

Wenn mir einer noch helfen könnte wo ich schauen muss wegen dem verschobenem Ort in der Registrierung so wie dem verschobenem Fax in der mobilen Version wäre ich sehr dankbar...

Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template

[Nooblike]

[...]
Wo sollte ich suchen ?
[...]

Suche in der Datei 'templates/bootstrap3/stylesheet.css' ab ca. Zeile 507 folgenden Code

Code: CSS  [Auswählen]

/* Sternchen für Pflichtfelder */
.stern input[type="text"], .stern input[type="password"], .stern input[type="email"], .stern input[type="tel"], .stern select, .stern textarea {
    width: 95%;
    float:left;
}
 

und ersetze ihn mit diesem

Code: CSS  [Auswählen]

/* Sternchen für Pflichtfelder */
.stern input[type="text"], .stern input[type="password"], .stern input[type="email"], .stern input[type="tel"], .stern select, .stern textarea {
    width: 97%;
    float:left;
}
 

danach teste das Template weiter und achte insbesondere bei Eingabefeldern (auch solche ohne Sternchen) auf korrekte Darstellung.

Anmerkung: Der Fehler tritt beim Theme "flatly" nicht in Erscheinung.

Gruss
Hanspeter

Perfekte Lösung vielen Dank...

Nur leider das mit der Box Größe klappt bei mir leider nicht...

Mfg
Nooblike

[Karl1]

Hallo Zusammen,
ich bin dabei, dass Template auf die Shop-Version 2.0.3.0 upzudaten.
Die Änderungsvorschläge von Hanspeter werden mit drin sein.
Für die gleichmäßigen Höhen im Produktlisting werde ich Änderungen in der stylesheet.css vornehmen (Vergabe von festen Höhen, wie im tpl_modified).

Dauert aber noch etwas, weil ich Änderungen auch testen möchte.

Gruß Karl

[Nooblike]

Hallo Karl,

erst mal danke das du auch noch eine Anpassung machst... an und für sich läuft es unter 2.0.3.0 auch wie in der Vorgänger Version auch.

Nur vieleicht eine kleine Anpassung auch am Megamenü für Die Kategorien das wenn es mehr sind das man es dann mit dem Home Button auf einer Höhe hat wäre vieleicht auch nett.. sonst sieht es aus wie bei mir das das Häuschen ganz alleine oben hängt und darunter die Kategorien.

Mfg
Nooblike

[Nooblike]

Damit alle Boxen in Produktlisten unten bündig sind kann man folgendes machen.

In 'templates\bootstrap3\module\product_listing\product_listing_v1.html' folgenden Code

Code: XML  [Auswählen]

{$PAGINATION}
<div class="row">
 

mit diesem ersetzen

Code: XML  [Auswählen]

{$PAGINATION}
<div class="row eq-height">
 

und in 'templates\bootstrap3\stylesheet.css' am Ende folgenden Code einfügen

Code: CSS  [Auswählen]

.eq-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;  
}

.eq-height div[class*='col-'] {
  flex:1 1 inherit;
  display: flex;
}

.eq-height .panel {
  flex:1 0 100%;
}
 

Vorher:

(Dateianhang Link)

Nachher:

(Dateianhang Link)

PS:
Im "tpl_modified" werden, wie man im Screenshot sieht, lange Artikelnamen ansatzlos abgeschnitten.

(Dateianhang Link)

Gruss
Hanspeter

Hallo Hanspeter,

also es Klappt doch nur es muss direckt in der Kategorie sein...

Hast du vieleicht noch eine Lösung dafür wie ich es in der Top Artikel Übersicht auch so angepasst bekomme?

Mfg Nooblike

[hpzeller]

Hallo Nooblike,

Für bündige Boxen in der Liste "Unsere TOP-Artikel" auf der Startseite musst Du nur in der Datei 'templates\bootstrap3\module\new_products_default.html' folgenden Code

Code: XML  [Auswählen]

<div class="row">

mit diesem ersetzen

Code: XML  [Auswählen]

<div class="row eq-height">

sofern Du den CSS-Code in die 'templates\bootstrap3\stylesheet.css' bereits eingefügt hast.

Gruss
Hanspeter

[Karl1]

Hallo Zusammen,
also hier die versprochenen Pakete.

@Nooblike: Der Home-Button steht jetzt nicht mehr alleine.

Gruß Karl

[Nooblike]

Danke Hanspeter ich hatte in der 'templates\bootstrap3\module\new_products.html' geschaut 

[hpzeller]

@Karl
@Nooblike

Die CSS-Regeln die ich in Antwort #123 gepostet habe machen zwar die Boxen in der Boxenansicht bei Produktlisten unten bündig aber leider zerschiessen sie in der Listenansicht das Layout, siehe Bild 1.

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

Hier die korrigierten CSS-Regeln welche den oben beschriebenen Fehler nicht mehr aufweisen, siehe Bild 2.

Code: CSS  [Auswählen]

.eq-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}

.eq-height > div[class*='col-'] {
  flex:1 1 inherit;
  display: flex;
}

.eq-height > div[class*='col-'] > .panel {
  flex:1 0 100%;
}
 

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

Gruss
Hanspeter