In Shopware 4 konnte man das Spalten Layout bequem in den Kategorie Einstellungen ändern, dass ist in Shopware 5 leider nicht der Fall. In Shopware 5 wird zwar die Option Templateauswahl in den Kategorie Einstellungen angezeigt, jedoch bezieht sich diese lediglich auf die alten Shopware 4 Templates, welche in der Shopware 5.2 Version verworfen werden.

Wie kannst du nun also die Spalten Anzahl in deinem Listing bzw. in der Kategorie Ansicht anpassen?

Im Prinzip ist es relativ einfach. Das ganze ist simpel über die entsprechenden Less Dateien anzupassen.

Als Beispiel nehmen wir das Produkt Layout "Nur wichtige Informationen". Hier werden standardmäßig vier Produkt Boxen nebeneinander angezeigt. Jede Produkt Box hat also eine Breite von 25%.

Detaillierte Informationen

Wie ändere ich das Layout auf 3 Spalten?

Wie bekommen wir also nun statt fünf Produkt Boxen drei angezeigt in einer Zeile? Du kannst es dir sicherlich schon denken: Wir ändern die Breite jeder Produkt Box auf 33% statt 25%. Somit haben wir also drei Produkt Boxen nebeneinander, denn 100% Breite durch drei Produkt Boxen sind 33% je Produkt Box.

Hierzu müssen wir dann also die Breite der Boxen in der entsprechenden Less Datei im Shopware Theme anpassen.

Anpassung der Breite anhand von Less

Die Breite der Produkt Boxen sind in der Less Datei product-box.less definiert. Diese finden wir in frontend/_public/src/less/_modules/product-box.less. Wenn wir nun ganz zum Ende der Datei scrollen, haben wir in der Zeile 544 bis 546 den entsprechenden Code für die Desktop Ansicht bzw. für größere Bildschirme.

@media screen and(min-width: @desktopViewportWidth) {

   [...]

    .box--minimal {
        width: 25%;
    }

   [...]

}

Erläuterung

In der ersten Zeile wird definiert, dass dieser Code nur Desktop Bildschirme ausgegeben werden soll, dass sind die sogenannten Media Queries. Die Variable @desktopViewportWidth wird in der structure.less definiert.

In der structure.less werden die einzelnen Breakpoints definiert. Also die Breite ab welcher der Less / CSS Code ausgeführt werden soll.

Eigene Less Datei

Wir wissen also in welcher Datei usner Code liegt, welchen wir ändern möchten, gut. Nun legst du in deinem eigenen Theme die entsprechende Less Datei an. Die Less Datei liegt im _modules Ordner in deinem Theme. Der Pfad ist wie oben beschrieben

DEINTHEME/frontend/_public/src/less/_modules/product-box.less

Wir möchten nun also die Breite der Boxen auf 33% setzen, diese Breite soll aber nur für Bildschirme gelten ab einer Mindestbreite von 1260px. Wir errinern uns: Die Breite wird global in der Variable @desktopViewportWidth gespeichert.

Der Inhalt der product-box.less währe demnach

// Führe diesen Code nur aus, wenn der Bildschirm 
// bzw. die Auflösung mindestens 1260px breit ist.
// 78.75em = 1260px
// @desktopViewportWidth 78.75em; 
@media screen and(min-width: @desktopViewportWidth) {

    .box--minimal {
        width: 33%;
    }

}

Damit Shopware unsere neue product-box.less erkennt, müssen wir diese in die Datei all.less einbinden. Sollte diese Datei noch nicht existieren, lege diese Datei an im root Verzeichnis der Less Dateien DEINTHEME/frontend/_public/src/less/all.less. Shopware sucht immer nach dieser all.less, welche zwingend benötigt wird, wenn wir Änderungen an den Less Dateien vornehmen wollen.

Damit Shopware nun auch unsere eigene product-box.less findet, müssen wir diese in der gerade angelegten all.less einfügen. Das geschiet über @import. Wir fügen folgenden Code in unsere all.less ein.

// Lädt unsere product.box.less Datei
@import "_modules/product-box.less";

Kompilieren

Nachdem du nun alle nötigen Dateien angelegt hast, musst du das Theme im Backend erneut zuweisen, sodass die angelegten Less Dateien neu kompiliert und eine entsprechend neue CSS Datei erstellt wird. Nachdem du das Theme neu zugewiesen hast, sollte dein Layout nun statt vier nur drei Spalten in der Desktop Ansicht haben.

Drei Spalten
Shopware Onlinekurs Jetzt kostenlos anmelden.