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

[thopoh]

Solltest du was ändern wollen, dann solltest du die Anweisung in die stylesheet.css schreiben (das erleichtert dir Updates).

Gruß Karl

Dankeschön, hat funktioniert

[Timm]

@scubi
das ist beim tpl_modified und dessen responsiven Ableger auch so, dass das fehlt. Mach doch mal ein Ticket dazu auf.

Gruß Timm

[Karl1]

Hallo Zusammen,
wie versprochen kommt hier das Update.

Verändert wurde:

• Die Logoleiste (Symbole Home, User, Merkzettel und Warenkorb) lässt sich auf schmalen Bildschirme oben innerhalb der Menüleiste fixieren.
• Das Template, der Template Manager, alle Datenbankeinträge und alle zugehörigen Dateien können auf Knopfdruck entfernt werden, dazu wurde ein Button im Systemmodul hinzugefügt
• Die Boxen "Bestellübersicht" und "Trusted Shops" lassen sich jetzt auch im Template Manager ein-/ausschalten
• Im Template Manager ist bei den Boxen ein neuer Schalter "Alle Boxen" hinzugekommen, dadurch können alle Boxen der linken Spalte ausgeschaltet werden.
• Verbesserung der Barrierefreiheit
• Einige kleine Fehler behoben

Zur Nutzung der neuen Funktionen des Template Managers muss im Adminbereich Module->System Module der "Bootstrap 4 Template-Manager" ausgewählt werden.
Anschließend den Button "Update" klicken und Update ausführen.
Hinweis: Die bisher gemachten Einstellungen werden nicht überschrieben, es werden nur neue Funktionen hinzugefügt.

Gruß Karl

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

[Gulliver72]

Hallo Karl,

vielen Dank für deinen unermüdlichen Einsatz.
Mittlerweile ist das ein mächtiger Template-Manager geworden.

 

Leider komme ich erst jetzt dazu, noch einen Hinweis zu geben.
Wenn die Boxen deaktiviert werden, sollte das Superfish eingeschaltet sein. Sonst steht der Kunde ohne Navigation auf der Seite.

Ich habe mir dein neues Paket angeschaut und es gibt nur zwei Möglichkeiten ohne großen Aufwand.
1. nur per Hinweis im Info-Text
2. zusätzlich Absendung des Formulars nur nach vorheriger JS-Prüfung, ob

Code: PHP  [Auswählen]

$_POST['BS4_HIDE_ALL_BOXES'] == 'true' && $_POST['BS4_RESPONSIVEMENU_SHOW'] == 'true'

Auf jeden Fall muß dann der Info-Text ergänzt werden.

in der shoproot\lang\german\admin\bs4_tpl_manager_config.php die Zeile 229

Code: PHP  [Auswählen]

        'TEXT_BS4_TPL_MANAGER_CONFIG_HIDE_ALL_BOXES_INFO' => 'Sollen alle Boxen auf allen Seiten <span class="colorRed"><strong>ausgeblendet</strong></span> werden?',

ersetzen mit

Code: PHP  [Auswählen]

        'TEXT_BS4_TPL_MANAGER_CONFIG_HIDE_ALL_BOXES_INFO' => 'Sollen alle Boxen auf allen Seiten <span class="colorRed"><strong>ausgeblendet</strong></span> werden?<br /><span class="colorRed">Vor der Deaktivierung der Boxen bitte das Superfish-Men&uuml; aktivieren!</span>',

englisch

Code: PHP  [Auswählen]

        'TEXT_BS4_TPL_MANAGER_CONFIG_HIDE_ALL_BOXES_INFO' => 'Should all boxes on all pages be<span class="colorRed"><strong>hide</strong></span>?<br /><span class="colorRed">Please activate the Superfish Menue bevor deactivate all boxes!</span>',

VG Bert

[Karl1]

Hallo Bert,
danke für dein Lob und deinen Hinweis.

Wer alles abschaltet ist selber schuld!

Gruß Karl

[mhase]

Herzlichen Dank für diese phantastische Arbeit!
Habe das Template erst vorgestern entdeckt, installiert und bin begeistert.
Wie läuft das genau mit dem Update, Dateien aus neuem Paket hochladen (überschreiben) und im Template Manager dann auf "Update" richtig ?

[Karl1]

Hallo mhase,
wenn du an den Templatedateien keine individuellen Änderungen gemacht hast, dann läuft das so.
Neue Dateien hochladen und überschreiben.
Dann muss im Adminbereich Module->System Module der "Bootstrap 4 Template-Manager" ausgewählt werden.
Anschließend den Button "Update" klicken und Update ausführen.

Sollten individuelle Änderungen gemacht worden sein, dann muss man die Dateien vor dem Hochladen vergleichen (z.B. mit WinMerge) und anpassen, nachher das Systemmodul updaten.

Gruß Karl

[Gulliver72]

Hallo Karl,

Wer alles abschaltet ist selber schuld!

Ja, bin selber schuld 

Weil ich denke, dass nicht jeder sofort den Zusammenhang erkennt, hatte ich die Änderung des Info-Textes angeregt. Zumindest ist das eine billige Lösung für Denkunwillige.

Die JS-Prüfung wäre mit Kanonen auf Spatzen geschossen. Deshalb hab ich's nur vollständigkeitshalber dazu geschrieben. Das sollte aber keine Aufforderung an dich sein.
Entschuldige bitte, wenn der Eindruck entstanden ist. 

VG Bert

[achda]

Hallo,

ich hoffe ich stelle meine Frage in der Richtigen Rubrik.

01.) wo finde ich Module->System Module
Da ich gerne Bootstrap 4 Template-Manager" installieren möchte.

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

02. ) wo Finde ich die TEXT_COOKIECONSENT_MESSAGE_INFO

Gruß Mell

[Karl1]

Hallo Mell,
da stimmt was garnicht mit deinem Shop, schau dir mal hier einen von den Demoshops an.

Wenn du im Downloadpaket die Datei "wichtig cookies.txt" liest, dann sollte deine 2. Frage beantwortet sein.

Gruß Karl

[MoSaG]

Hallo lieber Karl1 vielen Dank für das großartige Template! 

Ich habe eine winzige Frage, habe schon viel gesucht, aber leider bin ich nicht schlauer geworden ...

Wie müsste ich denn auf Content-Seiten Vorschaubilder mit Klassen ausstatten, damit diese im modalen Fenster eine Bildergalerie anzeigen, wie bei den Artikelbildern? Ich habe dort geschaut und versucht es nachzubauen, bin aber gescheitert. Das reine Hinzufügen der Klasse "cbimages" scheint es nicht zu sein und mit den "modal"-Attributen bekomme ich maximal ein Bild ins Fenster und auch Pfeile, aber keine weiteren Bilder 

Ist wahrscheinlich popeleinfach und ich seh nur den Wald vor lauter Bäumen nicht ... danke schon mal vorab!

[Karl1]

Hallo MoSaG,
probiere mal folgendes und achte auf "pd_more_images" im übergeordneten Container, sowie im Link auf "cbimages easyimages" und auf die fortlaufende "data-image-id".

Code: PHP  [Auswählen]

<div class="pd_more_images row clearfix">
        <div class="col-3 mb-3">
                <a class="cbimages easyimages d-block text-center" data-image="https://dein_shop/images/product_images/popup_images/bild1.jpg" data-image-id="1" data-target="#modal" data-title="Name Bild 1" data-toggle="modal" href="#" title="Bild 1">
                        <img alt="Name Bild 1" class="unveil img-fluid" data-src="https://dein_shop/images/product_images/info_images/bild1.jpg" itemprop="image" src="https://dein_shop/images/product_images/info_images/bild1.jpg" />
                </a>
        </div>
        <div class="col-3 mb-3">
                <a class="cbimages easyimages d-block text-center" data-image="https://dein_shop/images/product_images/popup_images/bild2.jpg" data-image-id="2" data-target="#modal" data-title="Name Bild 2" data-toggle="modal" href="#" title="Bild 2">
                        <img alt="Name Bild 2" class="unveil img-fluid" data-src="https://dein_shop/images/product_images/info_images/bild2.jpg" itemprop="image" src="https://dein_shop/images/product_images/info_images/bild2.jpg" />
                </a>
        </div>
</div>

Gruß Karl

[MoSaG]

Hi Karl1,
danke für die superschnelle Antwort.

Ich habe soviel ich konnte übernommen aus dem Quelltext, ohne mir das bisher aufgebaute zu zerschießen

Es werden jetzt immerhin keine Pfeile mehr angezeigt, aber leider muss man immer noch alle Bilder einzeln aufrufen, also das Blättern in den Bildern klappt noch nicht ... hab ich was übersehen? Fehlt noch was? Ist es hilfreicher, wenn ich die Webseite hier poste?

Mein Code sieht so aus:

Code: PHP  [Auswählen]

<div class="row pd_more_images clearfix">
    <div class="col-12 col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h2 class="mb-0">Superb III</h2>
            </div>
            <div class="card-body">
                <div class="row pd_more_images clearfix">
                    <div class="col-12 col-sm-6">
                        <a class="cbimages easyimages d-block" data-image-id="1" data-target="#modal" data-toggle="modal" href="#" data-image="/media/Superb%203/Superb_Combi_Front_6866_xF-50-30.jpg" target="_blank">
                            <img itemprop="image" alt="" class="w-100 img-fluid unveil" height="180" src="/images/showroom/Superb_Combi_Front_6866_xF-50-30.jpg" width="270" />
                        </a>
                    </div>
                    <div class="col-12 col-sm-6">
                        <a class="cbimages easyimages d-block" data-image-id="2" data-target="#modal" data-toggle="modal" href="#" data-image="/media/Superb%203/Superb_Combi_Heck_6881_xF-50-30.jpg" target="_blank">
                            <img itemprop="image" alt="" class="w-100 img-fluid unveil" height="180" src="/images/showroom/Superb_Combi_Heck_6881_xF-50-30.jpg" width="270" />
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <a href="/media/Superb%203/GuteFahrt-Superb3.pdf">
                    <strong>
              <font size="3">Testbericht - Gute Fahrt 03/2019</font>
            </strong>
                </a>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h2 class="mb-0">Octavia III</h2>
            </div>
            <div class="card-body">
                <div class="row pd_more_images clearfix">
                    <div class="col-12 col-sm-6">
                        <a class="cbimages easyimages d-block" data-image-id="1" data-target="#modal" data-toggle="modal" href="#" data-image="/media/Octavia%203/Octavia_Front_4971xx_kleiner_M.jpg" target="_blank">
                            <img itemprop="image" alt="Octavia III Limousine Front" border="0" class="w-100 img-fluid unveil" height="170" src="/images/Fahrzeuge/Octavia3/Octavia_Front_4971xx_kleiner_M.jpg" width="270" />
                        </a>
                    </div>
                    <div class="col-12 col-sm-6">
                        <a class="cbimages easyimages d-block" data-image-id="2" data-target="#modal" data-toggle="modal" href="#" data-image="/media/Octavia%203/Octavia_Heck_4974--30.jpg">
                            <img itemprop="image" alt="Octavia III Limousine Heck" border="0" class="w-100 img-fluid unveil" height="170" src="/images/Fahrzeuge/Octavia3/Octavia_Heck_4974--30.jpg" width="270" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Das hier am Anfang:

Code: PHP  [Auswählen]

<div class="row pd_more_images clearfix">

hab ich mal vom "pd_more_images" befreit, weil es später bei den Bilder noch mal eine "row" gibt, aber hat sich dennoch nichts geändert ...

[Karl1]

Hallo MoSaG,
die E-Mail-Funktion wurde im Forum leider deaktiviert, sonst könntest du mir eine Mail senden, denn dein Anliegen ist schon sehr speziell - wenn mehr Fragen sind, dann füge einen Link zur Seite an.

Ganz verstehe ich dich noch nicht (z.B. "...werden jetzt immerhin keine Pfeile mehr angezeigt..."), aber ich probiere es mal.
Die Bildansicht in der Modalbox wurde für die Produktdetailansicht geschaffen, alle zu einem Produkt gehörenden Bilder können auf Klick nacheinander gezeigt werden.
Du versuchst aufzuteilen, das geht nicht.
Hast du 4 Bilder auf der Seite, dann musst du die ID's bis 4 nummerieren.

Hier mal mein HTML

Code: PHP  [Auswählen]

<div class="row pd_more_images  clearfix">
        <div class="col-12 col-lg-6 mb-4">
                <div class="card h-100">
                        <div class="card-header">
                                <h2 class="mb-0">Superb III</h2>
                        </div>
                        <div class="card-body">
                                <div class="row clearfix">
                                        <div class="col-12 col-sm-6">
                                                <a class="cbimages easyimages d-block" data-image="images/product_images/popup_images/912_0.jpg" data-image-id="1" data-target="#modal" data-title="Superb Bild 1" data-toggle="modal" href="#" target="_blank">
                                                        <img alt="" class="w-100 img-fluid unveil" src="images/product_images/info_images/912_0.jpg" /> </a>
                                        </div>
                                        <div class="col-12 col-sm-6">
                                                <a class="cbimages easyimages d-block" data-image="images/product_images/popup_images/912_1.jpg" data-image-id="2" data-target="#modal" data-title="Superb Bild 2" data-toggle="modal" href="#" target="_blank">
                                                        <img alt="" class="w-100 img-fluid unveil" src="images/product_images/info_images/912_1.jpg" /> </a>
                                        </div>
                                </div>
                        </div>
                        <div class="card-footer">
                                <a href="/media/Superb%203/GuteFahrt-Superb3.pdf"><strong><font size="3">Testbericht - Gute Fahrt 03/2019</font></strong></a>
                        </div>
                </div>
        </div>
        <div class="col-12 col-lg-6 mb-4">
                <div class="card h-100">
                        <div class="card-header">
                                <h2 class="mb-0">Octavia III</h2>
                        </div>
                        <div class="card-body">
                                <div class="row clearfix">
                                        <div class="col-12 col-sm-6">
                                                <a class="cbimages easyimages d-block" data-image="images/product_images/popup_images/913_0.jpg" data-image-id="3" data-target="#modal" data-title="Octavia Bild 1" data-toggle="modal" href="#" target="_blank">
                                                        <img alt="Octavia III Limousine Front" border="0" class="w-100 img-fluid unveil" src="images/product_images/info_images/913_0.jpg" />
                                                </a>
                                        </div>
                                        <div class="col-12 col-sm-6">
                                                <a class="cbimages easyimages d-block" data-image="images/product_images/popup_images/912_2.jpg" data-image-id="4" data-target="#modal" data-title="Octavia Bild 2" data-toggle="modal" href="#">
                                                        <img alt="Octavia III Limousine Heck" border="0" class="w-100 img-fluid unveil" src="images/product_images/info_images/912_2.jpg" />
                                                </a>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>

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

Du solltest auch auf Breiten- und Höhenangaben bei Bildern verzichten, du bekommst sonst bei kleinen Bildschirmen Probleme.

Gruß Karl

[sb_cbo-do]

Hallo,

erst einmal vielen dank an Karl für die Arbeit.
Es hat sich ja wieder einiges verändert und man kann noch mehr einstellen.

Ich habe heute das letzte Update in unserem Testshop installiert und ich habe ein Problem.

Ich kann die Shopsprache von deutsch auf englisch ändern, aber sobald ich etwas anklicke, wird die Sprache immer zu deutsch geändert.

Kann jemand das Problem bestätigen?

MFG,

Sven