TEMPLATE: Bootstrap4 für Shop 2.x - freies responsive Template

[Karl1]

Hallo Zusammen,
ich stelle das angehängte Template frei zur Verfügung (keine Namensnennung).

Das Template basiert auf dem Bootstrap-Framework 4.3.1 und wurde entwickelt und getestet mit der aktuellen Shopversion 2.0.5.1 rev 12725 vom 22.04.2020.

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

Eigenschaften:
responsive Template für PC, Tablet, Smartphone
unterstützt alle Neuerungen der Shopversion 2.0 (z.B. Komprimierung, Filter)
zentrales Dropdownmenü für alle Artikel
bestimmte Kategorien können als Megamenü dargestellt werden
EU-Cookie-Hinweis anzeigbar
Bilderslider auf der Startseite, im Banner-Manager befüllbar
Easyzoom-Vergrößerung in der Produktdetailansicht
Top-Artikel und Bestseller als Slider anzeigbar
Farbbänder/Ribbons Top, Neu, Angebot
Font Awesome Icons integriert
keine Core-Änderungen nötig

Zusätzlich enthalten ist das Systemmodul "Bootstrap 4 Template Manager".
Sobald das Systemmodul installiert ist stehen unter dem Menüpunkt "Erw. Konfiguration - Bootstrap 4 Template Manager" zahlreiche Einstellmöglichkeiten zur Verfügung.

Im Paket enthalten sind die Module
   - Kundenerinnerung für vorübergehend nichtverfügbare Artikel
   - Billiger gesehen?
   - Frage zum Artikel?
   - Automatische Preisberechnung bei Attributen
Diese Module sind im Template Manager zuschaltbar.

Im Template Manager können auch Theme-Einstellungen vorgenommen werden.
So kann aus 22 Templatevorlagen gewählt, oder 2 eigene Themes erstellt werden.
Auf Knopfdruck wird die erstellte Vorlage mit Hilfe eines SASS-Compilers konvertiert, in den Shop übernommen und aktiviert.
Auch die Möglichkeit zusätzliche Schriftarten DSGVO-konform zu integrieren besteht.

Installation:
Vor jeder Änderung sollte ein Backup gemacht werden!
Die Dateien in den Shop kopieren (evtl. muss der Name des Admin-Ordners vorher angepasst werden).
Im Adminbereich Konfiguration->Mein Shop das Template auswählen.
Zur Nutzung des Template Managers im Adminbereich Module->System Module den "Bootstrap 4 Template Manager" installieren.

Bilderslider:
Damit man sehen kann wie ich den Banner Manager befüllt habe, ist im Paket ein Ordner „sliderbeispiele“ enthalten.
Die Dateien aus dem Ordner in den Shop kopieren (evtl. muss der Name des Admin-Ordners vorher angepasst werden).
Anschließend im Adminbereich unter Module->System Module das Modul „SLIDER-Beispiele für Template Bootstrap3“ installieren.
Dadurch wird der Banner Manger mit Musterdaten (deutsch und englisch) für den Slider befüllt.
Die Installationsdatei admin/includes/modules/system/aa_slider_installer_system.php löscht sich normalerweise automatisch.

Umbenennen des Templates:
Den Ordner "bootstrap4" einfach ändern.
Im Adminbereich Konfiguration->Mein Shop das Template auswählen.
Im Template Manager gemachte Einstellungen bleiben unverändert, für die Übernahme von Themeinstellungen muss auch dort der neue Name eingestellt werden.

Theme-Einstellungen (Kurzanleitung):
Pfad zum BS4 Template wählen
Pfad zum BS4 Theme wählen z.B. "eigenes Theme 1" - "Aktualisieren" drücken
Tab "eigenes Theme 1" - Vorlage wählen und Button "Vorlage laden" klicken => Vorschau wird geladen
Änderungen machen und "Aktualisieren"
Zurück zu Tab "Allgemeines" und "Fertig- Theme ins Template übernehmen" klicken
Caches löschen und Shop Frontend aktualisieren

Hallo Zusammen,
wer das neue MODUL: OIL.js Cookie Consent Management bereits nutzen will, der muss darauf achten, von hier

MODUL: OIL.js Cookie Consent Management

immer die aktuellen Dateien zu nutzen.

In diesem Paket sind nur die Dateien die in den Templateordner templates/bootstrap4/ gehören enthalten.

Eventuell eine Sicherung der Templatedateien machen und anschließend diese Dateien in den Templateordner kopieren.
Bestehende Dateien müssen überschrieben werden.
[...]

Aktuelle Templateversion auf GitHub:

Hallo Zusammen,
die aktuellen Dateien und Pakete für das Template sind nur noch bei GitHub erhältlich.

https://github.com/KarlBogen/bootstrap4

Gruß Karl

P.S.: Das Template beinhaltet jetzt die Vorbereitung für das MODUL: OIL.js Cookie Consent Management. Genaueres ist auf der Projektseite bei GitHub nachzulesen.

Viel Spaß!
Karl

[EDIT Tomcraft 26.04.2019: Template aktualisiert.]
[EDIT Tomcraft 28.04.2019: Template aktualisiert.]
[EDIT Tomcraft 14.05.2019: Template aktualisiert.]
[EDIT Tomcraft 04.06.2019: Template aktualisiert.]
[EDIT Tomcraft 16.06.2019: Template aktualisiert.]
[EDIT Tomcraft 19.09.2019: Template aktualisiert.]
[EDIT Tomcraft 07.10.2019: Template aktualisiert.]
[EDIT Tomcraft 29.10.2019: Template aktualisiert.]
[EDIT Tomcraft 29.10.2019: Template aktualisiert.]
[EDIT Tomcraft 14.11.2019: Template aktualisiert.]
[EDIT Tomcraft 18.12.2019: Template aktualisiert.]
[EDIT Tomcraft 19.12.2019: Template aktualisiert.]
[EDIT Tomcraft 02.01.2020: Template aktualisiert.]
[EDIT Tomcraft 07.01.2020: Template aktualisiert.]
[EDIT Tomcraft 04.02.2020: Template aktualisiert.]
[EDIT Tomcraft 13.04.2020: Template aktualisiert.]
[EDIT Tomcraft 23.04.2020: Template aktualisiert.]
[EDIT Tomcraft 03.05.2020: Template aktualisiert.]
[EDIT Tomcraft 26.06.2020: Paket für OIL.js ergänzt.]
[EDIT Tomcraft 14.07.2020: Paket für OIL.js aktualisiert.]
[EDIT Tomcraft 07.08.2020: Paket für OIL.js aktualisiert.]
[EDIT Tomcraft 09.08.2020: Template aktualisiert.]
[EDIT Tomcraft 30.09.2020: Template aktualisiert.]
[EDIT Tomcraft 17.10.2020: Paket für OIL.js aktualisiert.]
[EDIT Tomcraft 28.10.2020: Template aktualisiert.]
[EDIT Tomcraft 16.11.2020: Link zu GitHub ergänzt.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=40190.0

[awids]

Hallo Karl,

danke für die neue Template-Version. Ist dir wirklich gut gelungen und die Backend-Administration ist der Clou.

Da werd ich die nächsten Tage was zu spielen haben. ^^

 

BG awids

[Scubi]

Hallo Karl,

vielen Dank. Das kommt genau zum richtigen Zeitpunkt. Werde es mir gleich mal ansehen.

Gruß Alois

[noRiddle (revilonetz)]

Wenngleich ich kein Freund von Bootstrap bin und es mir auch noch nicht genauer angeschaut habe,
was für eine umfangreiche Arbeit, speziell die Backend-Konfigurations-Möglickeiten, Wow, Respekt.

Gruß,
noRiddle

[Scubi]

Was für eine geniale Arbeit.
Karl, ich habe mal alle Theme angeschaut.
Bei Thema Materia bekomme ich folgende Fehlermeldung über den Template Einstellungen in rot angezeigt:

Der Bootstrap 4 Template-Manager kann nicht wie gewünscht genutzt werden!
Dieser Fehler ist aufgetreten: Undefined mixin ripple: line: 61

modified eCommerce Shopssoftware v2.0.4.2 rev 11374 dated: 2018-07-23
Datenbank Version: "MOD_2.0.4.2"
UTF-8 läuft seit heute im Testshop

Gruß Alois

[Bonner]

Für soviel Arbeit ist ein Dankeschön das Mindeste - auch wenn ich das Template nicht nutzen werde (z.Zt.!)

Danke Karl!

Bonner

[FräuleinGarn]

Man man man...echt großes Kino.

Die Einstellmöglichkeiten im Backend sind enorm und vor allem für den Nutzer ohne Programmierkenntnisse eine riesen Erleichterung für den Start. Das sollte man beim kostenpflichtigen tpl_modified_responsive auch einführen.

Da steckt viel Arbeit drin.

Wenn ich Anmerkungen machen dürfte:

- bei mir ändert sich nichts im Vorschaufenster, wenn ich ein anderes Theme einstelle, obwohl die Seite neu lädt

- im Warenkorb haben die Buttons Einkauf fortsetzen und Kasse einen unschönen Unterstrich beim hoovern, was bei anderen Buttons nicht so ist; gleiches in der Artikeldetailansicht bei Artikeldatenblatt drucken und Rezension schreiben

- bei langen Artikelnamen überlagert das drucken Symbol auf schmalen Geräten den Artikelnamen

- das Popup für die Artikelbilder unten in der Artikeldetailansicht klappt beim Wechsel zum nächsten Bild immer zu und dann wieder auf

- PayPal express Button im Warenkorb wird als graues Kästchen angezeigt

- der scroll to top Button rechts wird auf schmalen Geräten nicht angezeigt

- es gibt einen zweiten scroll to top Button unten links, wenn man ganz unten auf der Seite ist, was eine weitere weiße Fläche unter dem Footer anzeigt. Find ich nicht so schön und unnötig, wenn man rechts schon den Button hat

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

Gruß Timm

[Duncan]

Danke Karl !

Dann geht es jetzt ans testen.

  (Ideal wäre es allerdings unter PHP 7.3 mit v.2.5.x) 

[Chopper-Fahrer]

Auch wenn ich es noch nicht testen konnte: Mega dankeschön!
Ich hatte nämlich schon mit dem Gedanken gespielt zu Gambio zu wechseln, da dort sowas inklusive ist und nicht für jeden Shop extra teuer erkauft werden muss (wobei das nicht der einzige Grund für meine Überlegung ist).

[ApK]

Vielen lieben Dank für die tolle Arbeit! Hier wird alles auf ein neues Niveau gehoben

[JZ_Aqua]

Hallo Karl
Vielen Dank für diese wieder mal super Arbeit und das zur Verfügung stellen.

[Karl1]

Hallo Zusammen,
erstmal danke für das Lob.

@Scubi - Alois:
Da hast du den ersten Fehler entdeckt - ich dachte echt ich hätte alles durchgetestet.
Das Theme Materia arbeitet mit einem besonderen Button-Effekt, den der eingebaute SASS-Compiler nicht verarbeiten kann.
Bitte in der Datei shoproot/admin/includes/bs4_template_manager/themes/materia/_bootswatch.scss die Zeilen 61, 64, 65 und 66 auskommentieren oder löschen.

@FräuleinGarn - Timm:
- Sollte sich dein Vorschaufenster nicht ändern, liegt das an deinem Browsercache.
Es wird zwar eine neue CSS-Datei erstellt, aber der Browser verwendet die gecachte Datei.
Das ist mir bisher nicht aufgefallen, da ich das Cachen in meinem Lieblingsbrowser abgestellt habe.
Momentan ist die Vorschau eine HTML-Seite mit statischen CSS-Links, das kann vermutlich nicht so bleiben.
Einfach eine PHP-Seite daraus machen geht wegen der Zugriffsrechte auch nicht.
Muss ich mir noch überlegen!

- Die "unschönen" Unterstriche bei Mausberührung hat jeder a-Tag, ist bei Bootstrap4 so.
Kann aber ganz leicht mit dieser CSS-Anweisung in der stylesheet.css behoben werden

Code: CSS  [Auswählen]

a:hover {
    text-decoration: none;
}

- Für Artikelname überlagert das Symbol "Drucken" gibt es diese CSS-Lösung

Code: CSS  [Auswählen]

#cart_quantity h1 {
    padding-right: 60px !important;
}

- Das mit den Popup Artikelbildern kann ich nicht nachvollziehen.

- PayPal Express ist ein Fehler von mir, weil ich PayPal nicht in der Testversion eingebunden hatte.
Der Fehler liegt in der Datei templates/bootstrap4/source/inc/css_button.inc.php
Bitte diese Anweisungen ab Zeile 10 einfügen

Code: PHP  [Auswählen]

        // PayPal
        if ($name == 'epaypal_de.gif' || $name == 'epaypal_en.gif' ) {
                return xtc_image($image, $alt, '', '', $parameters);
        }

- Den "scroll to top" Button habe ich für kleine Bildschirme absichtlich ausgeblendet, weil er dort meiner Ansicht nach stört und der User sowieso "wischt".
Wenn dich das stört, kannst du aus der Datei templates/bootstrap4/css/bs4.css diese Anweisung entfernen

Code: CSS  [Auswählen]

@media (max-width: 575.98px) {
        .go2top {
                right:-80px;
        }
}

- Der zusätzliche, zweite "scroll to top" Button kommt nicht vom Template.

@Duncan:
Was meinst du mit "Ideal wäre es allerdings unter PHP 7.3 mit v.2.5.x", gibt es die Version schon?

Mit einer Aktualisierung warte ich vorerst noch auf weitere Rückmeldungen!

Gruß Karl

[cschiller]

Hallo aus Hameln,

vielen Dank auch für diese tolle Arbeit!

Gruß Carsten

[pcsdg]

Vielen Dank fürs Bereitstellen.
aber hab auch etwas gefunden, im linken Seiten Menü werden lange Kategoriebezeichnungen nicht umgebrochen, sondern reichen weit in das mainframe rein.  wie bekomme ich den Umbruch hin ?

war vorher
<div class="box_category panel panel-default">

und nun
<div class="box_category card mb-4">

[FräuleinGarn]

@Karl
Vorab: Wenn du schreibst und netter Weise auch gleich eine Lösung anbietest

Wenn dich das stört, kannst du...

Ich selbst setze das Template nicht ein, weil ich mich in Bootstrap nicht einarbeiten kann. Einfach keine Zeit und auf den ersten Blick zu kompliziert. Aber ich finde es genial, dass du das erstellt hast und for free anbietest. Deshalb finde ich kann man auch testen und Feedback geben. Dafür ist so ein Forum da. Noch besser wäre es natürlich, wenn das diejenigen machen, die bisher dein 3er Template genutzt haben und dann auf eine stabile 4er Version wechseln können. Was ich so im Netz gelesen hab, scheint sich nicht so viel am Äußeren getan zu haben, aber viel unter der Haube. Und wenn man sich die Zeiten bei Pagespeed Insights ansieht in der mobilen Version, dann kann man bei einigen Werten neidisch werden im Vergleich zum tpl_modified_responsive. Letztlich gibts zwar leicht weniger Punkte, aber das liegt nur daran, dass anscheinend ein bestimmter Wert für die Punkte ausschlaggebend ist, obwohl die Mehrzahl der 6 Ladezeiten oben wesentlich besser ist. Aber das kann man ja vielleicht auch noch optimieren. Also lohnt sich da mal etwas Zeit zu investieren, vor allem wenn man schon die 3er Version genutzt hat und im Thema drin ist.

- zweiter Scroll to top Button war mein eigener, der kein entsprechendes css in deinem template hatte - sorry

- themevorschau kann ich nicht testen, da ich nicht wüsste, wo man den cache beim Browser ausschaltet, aber du hast das Problem ja erkannt

- Artikel-Popupbilder: Das ist etwas komisch. Scheint mit dem laden zu tun zu haben. Wenn man einmal durch ist durch die Bilder und sie somit im Cache sind, dann kann man oftmals durch die Bilder klicken, ohne das sich das Popup verkleinert. Aber auch nicht immer.

Ich hab mal eine Bildschirmaufnahme mit dem Handy gemacht, wie es für einen Moment aussieht (auch auf dem Desktop).

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

Unabhängig davon ist das Popup auf dem Desktop m.M.n. viel zu groß. Ich hab 800x800px Bilder und das Popup ist größer als mein Bildschirm, obwohl der Bildschirm eine Auflösung von 2880x1800px hat. Mobil ist es gut von der Größe her.

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

Gruß Timm