Problembeschreibung - Blockbreite im JTL-Shop5 anpassen

Man kann in JTL-Shop 5 eine Menge konfigurieren um das Layout im Frontend nach Wunsch anzupassen, entweder über das Template oder über über globale Parameter. Was aber nicht einfach einstellbar ist, ist die Breite des Shop-Inhaltes. Diese weicht in der Standard-Konfiguration von der Breit des Header- und Footer bereiches ab, was lt. der Entwickler bewusst so voreingestellt ist. Man wollte diesen breiter machen als den Rest und somit den Platz optimaler für die Produktdarstellungen ausnutzen. Meiner Meinung nach ist die Argumentation dazu etwas inkonsequent.

s. dazu: https://forum.jtl-software.de/threads/nova-theme-hintergrund.144766/
oder: https://forum.jtl-software.de/threads/shop5-nova-hintergrund.139665/
oder: https://forum.jtl-software.de/threads/verschiedene-seiten-breiten-im-shop5-nova.150301/

 

Lösung - Anpassen der Breite für den Shop-Content-Wrapper

Fakt ist, wer hofft den Shop-Inhaltsblock generell über einen Parameter im Backend konfigurieren zu können, wird vergeblich suchen. Das geht leider nur über Modifikationen in den Templates-Scripten. Wie, das soll hier beantwortet werden.

 

Der Block content-wrapper ist verantwortlich für das Einbetten der Shop-Inhalte (z.B. Produktauswahl oder Produktdetailseiten) zuständig. Dieser wird im Template-Script header.tpl erzeugt und dieses Script muss folglich angepasst werden. Sinnvoll ist es natürlich das nicht einfach im NOVA-Template vorzunehmen. Genutzt werden sollte dafür das NovaChild in dem solche individuellen Codeanpassungen überschreibungs- und updatesicher vorgenommen werden können. Wie man das macht, darauf gehe ich hier nicht ein, dafür gibt es bei JTL Tutorials.

Wir suchen im Script ~\templates\NOVAChild\layout\header.tpl diese Codezeilen:

 

    {block name='layout-header-content-all-starttags'}
        {block name='layout-header-content-wrapper-starttag'}
            <div id="content-wrapper"

In der letzten dieser 3 Zeilen werden die Style-Classen für content-wrapper erzeugt und ausgegeben. Hier stehen standardmäßig die beiden Klassen container-fluid container-fluid-xl die für die Breite des content-wrappers im Frontend responsiv sorgen. Wenn man hier einfach eine dritte Klassen container hinzufügt, wird das Layout auf die gleiche Breite gebracht wie die Header- und Footer-Inhalte.

Hier ein Zitat aus o.g. JTL-Forum-Post (bei dem es thematisch eigentlich um einen anderen Schwerpunkt geht), der auf o.g. Lösung bezug nimmt:

"Im Template gibt es drei verschiedene Container, welche die Breite steuern:
.container => max. Breite: 1250px,
.container-fluid => Breite: 100% und
.container-fluid-xl => max. Breite: 1650px."

Nun muss man noch wissen, dass wenn man z.B. die Breite 1250px erreichen will zwar .container als Styleklasse hinzugefügt werden muss, aber auch die anderen beiden Styleklassen enthalten sein müssen! Es reicht also nicht nur container!

Das Verhalten der Container basiert natürlich aus den responsiven Containern von Bootstrap4. Wer dazu mehr Grundlagenwissen erfahren möchte, sollte diesen Beitrag lesen: https://www.w3schools.com/bootstrap4/bootstrap_containers.asp. Hier ist erfahren, was der Unterschied im Verhalten von .container und .container-fluid ist, welche responsiven Container (~-sm, ~-md, ~-lg und ~-xl) es gibt und über welche Breiten diese bei welchen Bildschirmauflösungen laufen - auch in der verbundenen Nutzung der Klasse max-width.

 

Wenn man möchte, dass im Footer auch der Copyright-Bereicht diese Einheitsbreite einhält, muss man auch hierfür die Style-Klasse hinzufügen. Im NOVAChild-Template-Verzeichnis ~\templates\NOVAChild\layout\footer.tpl sucht man im Script footer.tpl die Zeilen

<div id="copyright">
    {container fluid=true}

In die zweite o.g. Zeile fügt man einfach in die geschweiften Klammern die container-Klasse hinzu class="container". Die container-fluid - Klasse wird durch fluid=true bereits hinzugefügt. Mehr ist nicht zu tun.