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

[Timm]

Schön, dass das jetzt läuft.

[Roberto]

Hallo Karl,

vielen Dank, das du dir die Arbeit mit dem Template gemacht hast!  Aus eigener Erfahrung weiß ich, dass da viel Zeit drin steckt.

Ich kann bestätigen, dass das Template nur bei ausgeschalteter Komprimierung fehlerfrei funktioniert.

Mir ist ein kleiner Fehler aufgefallen: Wenn ich in der Seitenleiste unter "Schnellkauf" eine Artikelnummer eingebe und "Enter" drücke, wird der Artikel in den Warenkorb gelegt, drücke ich aber stattdessen auf den Button daneben, klappt das nicht. Die Gegenprobe mit anderen Templates funktionierte problemlos.

In deiner Anleitung schreibst du, dass Änderungen am Template in der Datei "templates/bootstrap3/css/bootstrap/less/variables.less" gemacht werden müssen.
Wenn ich diese Dateien jedoch nicht runterlade und stattdessen in den Theme-Dateien unter "templates\bootstrap3\css\bootstrap" Änderungen vornehme, habe ich die gleichen Ergebnisse. Daher verwirrt mich der Aufwand mit den *.less-Dateien und das Kompilieren etwas. Was ist hier der richtige Weg? Bzw. welche Vor- und Nachteile gibt es bei den beiden Methoden?

Abschließend sei die Frage nach dem Unterschied zum kostenpflichtigen Modified-Responsive-Template gestellt: Wenn man die Kosten nicht berücksichtigt, welches Template ist besser?

[Karl1]

Hallo Roberto,

Komprimierung:
Im Anfangsbeitrag habe ich schon auf die Komprimierung hingewiesen.

Bitte immer nur eine Komprimierung nach der anderen an einschalten (also zuerst JS einschalten, Seite aktualisieren, dann CSS, Seite aktualisieren usw.)
Ich hatte, wieso auch immer, Fehler, wenn ich alle Komprimierungen auf einmal eingeschaltet habe.

Desweiteren hilft dieser Hinweis aus einem meiner Beiträge

Solltest du bei der Komprimierung von CSS oder JS Probleme haben, dann kannst du noch folgendes versuchen.
Öffne die stylesheet.css bzw. eine JS-Datei aus dem Ordner /javascript mit einem Editor und füge ein Leerzeichen ein.
Anschließend speicherts du die Datei wieder.
Durch den veränderten Zeitstempel der geänderten Datei bringt man Modified dazu, eine neue komprimierte CSS- bzw. JS-Datei zu erstellen.

Im Downloadpaket ist noch keine komprimierte CSS-/JS-Datei enthalten. Diese Dateien müssen beim ersten Start (abhängig von der gewählten Konfiguration in der config.php) erzeugt werden. Das Problem ist, wie vorher geschrieben, der Zeitstempel.
Bei mir läuft auf mehreren Installationen die Komprimierung fehlerfrei.

Schnellkauf:
Hier hast du einen Fehler in der Datei templates/bootstrap3/source/boxes/add_a_quickie.php entdeckt.
In Zeile 31 steht als type="button"

Code: PHP  [Auswählen]

$box_smarty->assign('SUBMIT_BUTTON', '<button class="btn btn-default btn-sm" type="button"> ...

das müsste type="submit" heißen

Code: PHP  [Auswählen]

$box_smarty->assign('SUBMIT_BUTTON', '<button class="btn btn-default btn-sm" type="submit"> ...

CSS-Änderungen:
In meiner Anleitung zeige ich auf, wie ich Bootstrap ändere.
Du kannst das Template natürlich auch direkt in der CSS-Datei anpassen.
Die Anleitung soll aufzeigen, welche Vorteile die Benutzung von Less- oder auch Sass-Dateien hat.
In Less-Dateien werden Variablen verwendet, die in der resultierenden CSS-Datei vielfach verwendet werden. Ändere ich z. B. eine Farbvariable werden in der kompilierten CSS-Datei Werte an allen (oft sind das über hundert) Stellen verändert. Farbschemas sind wesentlich einfacher zu gestalten.
Willst du in der CSS-Datei das selbe Ergebnis erzielen, kannst du über hundert Änderungen vornehmen.
Wenn du dir mal die Arbeit der Vorbereitung gemacht hast, erkennst du sehr schnell die Vorteile.

Unterschied Bootstrap3 zum kostenpflichtigen Modified-Responsive-Template:
Ich nehme an, dass das Modified-Template ausgereifter und angepasster an alle Module ist als Bootstrap3.
Wäre auch traurig, wenn es nicht so wäre.
Fragen an dich:
Besitzt das Modified-Responsive-Template ein zentrales Dropdownmenü?
Können Kategorien als Megamenü dargestellt werden?
Ist ein EU-Cookie-Hinweis implementiert?
Können Themes gewählt werden?
Was ist mit Cloud-Zoom-Vergrößerung in der Produktdetailansicht?
Hat es einen integrieter Bilderslider der im Banner-Manager befüllbar ist?
Ist das Modified-Responsive-Template kostenlos?

Gruß Karl

[Roberto]

Hallo Karl,

vielen Dank für deine schnelle Antwort.

Die CSS- und HTML-Komprimierung scheinen fehlerfrei zu funktionieren, da gebe ich dir recht. Wenn ich die JavaScript Komprimierung einschalte wird der Cookie-Hinweis nicht angezeigt. Schalte ich die Komprimierung aus, wird der Hinweis angezeigt. Getestet im FF und Edge, jeweils die aktuelle Version. Im Backend steht der Hinweis, dass das nur mit einem ab Shopversion 2.0.1.0 kompatiblem Template funktioniert, vielleicht kann man herausfinden, was beim Versionssprung auf 2.0.1.0 geändert wurde, um diesen Fehler zu beheben.

Vielen Dank für die ergänzenden Erläuterungen zu Bootstrap. Ich denke, dass ich nun das Funktionsprinzip mit den *.less-Dateien verstanden habe.

Beim Testen mit einem Mobilgerät (5-Zoll-Bildschirm) ist mir aufgefallen, dass beim Klicken auf den Warenkorb das "Entfernen-Symbol" über dem Artikelnamen liegt, wenn der Artikelname länger ist. Das lässt sich auf dem Desktop mit einem beliebigen Browser reproduzieren, wenn man das Fenster verkleinert. Das ist aber nur ein kleiner Schönheitsfehler. Ich habe dir mal ein Screenshoot angehangen.

Ich werde das Template in den nächsten Tagen weiter testen, denn ich finde das Template sehr gelungen.

Nachtrag: Für den Fall das meine "Pingeligkeit" falsch rüber kommt: Ich finde deine Arbeit großartig und will dich mit meinem Feedback unterstützen und keinesfalls deine Arbeit schlecht reden!

Freundliche Grüße
Roberto

[Karl1]

Hallo Roberto,
die Komprimierung habe ich jetzt nochmals ausgiebig getestet.
Bei mir hatte das immer funktioniert, weil ich zuerst die JS-, dann die CSS- und anschließend erst die weiteren Komprimierungen eingeschaltet habe.
Fängt man mit der HTML-Komprimierung an, tritt ein Fehler bei JS auf.
Es werden keine Javascriptdateien geladen, deshalb funktioniert auch der Cookie-Hinweis nicht.

Anbei ein neues Paket, in dem dieser Fehler behoben ist.

Die stylesheet.css habe ich bezüglich des Warenkorbes ebenfalls angepasst.

Gruß Karl

[EDIT Tomcraft 27.07.2017: Template in Beitrag 1 aktualisiert.]

[Chris66]

Hallo Karl

ich schließe mich den Vorrednern an...ein ganz hervorragendes Template, mit erstklassigem Layout.

Gerade weil ich die beiden Farben grün und dunkelgrau exakt vertauschen will, habe ich Deine Anleitung exakt umgesetzt und das Bootstrap 3.3.7 und dessen "less"-Unterordner bearbeitet. Das Layout "meine" funktioniert ebenfalls bestens; ich habe statt "paper " das "Flatly" verwendet. Allerdings kann ich nicht eine Farbe anpassen. Was Du so hervorragend mit dem magenta-Farbton für den Hintergrund im Zwischenblock oder der bräunlichen Farbe für die Buttons präsentiert hast, funktioniert bei mir hinten und vorne nicht. Obwohl ich in der "variable.less"

Code: PHP  [Auswählen]

// Flatly 3.3.7
// Variables
// --------------------------------------------------


//== Colors
//
//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              #7b8a8b;   // #333
@gray:                   #95a5a6; // #555
@gray-light:             #b4bcc2;   // #999
@gray-lighter:           #ecf0f1; // #eee

@brand-primary:         #2C3E50;
@brand-success:         #18BC9C;
@brand-info:            #3498DB;
@brand-warning:         #F39C12;
@brand-danger:          #E74C3C;


//== Scaffolding

brand-Primary und brand-success die beiden Farbangaben einfach nur vertauscht habe

Code: PHP  [Auswählen]

// Flatly 3.3.7
// Variables
// --------------------------------------------------


//== Colors
//
//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              #7b8a8b;   // #333
@gray:                   #95a5a6; // #555
@gray-light:             #b4bcc2;   // #999
@gray-lighter:           #ecf0f1; // #eee

@brand-primary:         #18BC9C;
@brand-success:         #2C3E50;
@brand-info:            #3498DB;
@brand-warning:         #F39C12;
@brand-danger:          #E74C3C;


//== Scaffolding

oder mir ganz anderen Farben versucht habe, tut sich überhaupt nichts. Die Originalfarbe bleibt immer erhalten.

Hast Du einen Tipp, was ich ggf. nicht beachtet habe?

Vielen Dank im Voraus.

Viele Grüße

Christian

[Karl1]

Hallo Christian,
erstmal danke für dein Lob.

Es ist schwer zu sagen was bei dir nicht klappt.
Hast du die Häkchen, in Nummer 12. meiner Anleitung, genau so gesetzt?
Was steht den im "Compiler Result"?

Geh bitte die Anleitung nochmal genau durch.

Gruß Karl

[dewmix]

Hallo Karl,

bin hier neu, ich habe deine Template in template ordner kopiert.
Wenn ich im Admin Bereich deine Template auswähle, bekomme ich nur weiße Seite.

MfG
Adam

[awids]

Dann lies dich hier bitte mal durch. Es wird wiederholt auf das Komprimierungsverhalten hingewiesen.

Und im Titel bereits, dass es nur für 2.x-Shops funktioniert, was ich einfach mal mit in den Topf werfe, weil ich weder dich noch deinen Shop kenne und daher einfach mal drauf hinweise. Wenn nicht für dich, dann eben für andere.

[Nooblike]

Erst mal ein dickes Danke Danke Danke für dieses Tolle Template...

Ich würde nur gerne meinen Balken oben in weiß haben wollen aber ich finde diese Farbe nicht zum tauschen in der variable.less...

Bild im Anhang als Veranschaulichung

Mfg

[Nooblike]

Ok und vieleicht den Navigations Balken unter der Kunden info und suche noch weg machen dann wäre ich happy dann würde auch dieses Template online gehen an meinen Hauptshop

[Timm]

Was du Navigationsbalken nennst, ist das Megamenü. Das kannst du selbst an und ausschalten. Glaub in der config Datei  im Ordner config des templates.

Aber erstell doch mal mehr Kategorien, dann siehst du auch, ob es sinnvoll für dich ist, oder nicht. Im Moment ist das ja sehr modern, die Kategorien horizontal angeordnet zu haben.

Gruß Timm

[Nooblike]

Oki danke nur wenn ich das auf false setze dann lädt sich die seite tod und dann heist es das die seite nicht geladen werden kann wenn ich es dasnn wieder true setze dann geht alles wieder? oO

[Chris66]

Hallo Christian,
erstmal danke für dein Lob.

Es ist schwer zu sagen was bei dir nicht klappt.
Hast du die Häkchen, in Nummer 12. meiner Anleitung, genau so gesetzt?
Was steht den im "Compiler Result"?

Geh bitte die Anleitung nochmal genau durch.

Gruß Karl

Hallo Karl

Ich habe heute noch einmal alles entfernt, das Template sowie das aktuelle Bootstrap-Framework frisch heruntergeladen und exakt nach Deiner Anleitung bearbeitet, dieses Mal genauso wie von Dir beschrieben das Layout "Paper" ausgewählt. Der von Dir zitierte Punkt 12 wurde komplett übernommen, was sich in der Winless alles bestätigt. Im Compilerresult steht gänzlich analog. Screenshots habe ich beigelegt. Im Firebug fällt mir jedoch eine Abweichung auf. Ich kann den Farbcode, wie von Dir beschrieben, nicht vorfinden.

Ich habe allerdings vergessen zu erwähnen, dass ich den Shop nicht mittels lokalem XAMPP installiert habe, sondern gleich auf einem Webserver hochgeladen habe. Sobald ich allerdings die variable.less angepasst habe, die Compilung im Winless auf "success" abgewartet/bestätigt habe, habe ich die "variable.less" danach sofort auch frisch hochgeladen. Eine Farbänderung tritt nicht ein.

Muss das System erst als XAMPP eingerichtet und danach hochgeladen werden? Das wäre natürlich viel Aufwand.

Vielen dank für jegliche Ratschläge im Voraus.

Viele Grüße
Christian

[Nooblike]

Was du Navigationsbalken nennst, ist das Megamenü. Das kannst du selbst an und ausschalten. Glaub in der config Datei  im Ordner config des templates.

Aber erstell doch mal mehr Kategorien, dann siehst du auch, ob es sinnvoll für dich ist, oder nicht. Im Moment ist das ja sehr modern, die Kategorien horizontal angeordnet zu haben.

Gruß Timm

Ok aber ich brauche ja das menü nicht doppelt wie bekomm ich dann das auf der Linken seite weg?