Eigenes Listen-Layout definieren und anwenden

Shopware 5 Themes & Design
1

Hallo,

ich benötige in der Listendarstellung eine weitere, zusätzliche Ansicht mit nur einen großen Bild - ohne Preis und ohne Texte.
Die dafür benötigten tpl-Dateien habe ich bereits angelegt, aber ich finde nicht heraus, was ich jetzt noch ändern muss, damit ich diese Listendarstellung auch auswählen kann. 

Es gibt die Möglichkeit, unter Grundeinstellungen, Storefront, Kategorien/Listen eigene verfügbare Listen-Layouts zu definieren. Aber ich finde nirgendswo eine Erklärung, wo die Dateien dafür gespeichert sein müssen und wie diese aussehen müssen.
Bei meinen bisherigen Versuchen, werden immer keine Listen mehr angezeigt, sondern nur noch ein einzelnes, leeres Bild.

Hat jemand damit Erfahrung? Für Tipps bin ich sehr dankbar.

Almute

2

Verstehe die Frage nicht ganz. Eigene Layouts kannst du über die Einstellung zur Kategorie (Produkt Layout) einstellen. Dort kannst du auch eigene Namen speichern. In der „box_article.tpl“ musst dann natürlich dieser Name definiert sein und der Verweis auf welches TPL zugegriffen werden soll. Wie das alles aufgebaut ist, kannst du ja aus dem TPL sehen. Mit der erworbenen Erkenntnis baust du dann dein eigene Theme zusammen.

 

 

3

Ganz genau das habe ich auch gemacht:

  1. Die Datei „box-article-tpl“ ergänzt um die Zeile: 

{elseif $productBoxTemplate == ‚foto_ohne_preis‘}
        {include file=„frontend/listing/product-box/foto_article.tpl“}

  1. Die Datei „foto_article.tpl“ (eine geänderte Version von box-big-image.tpl) in den Ordner „product-box“ gelegt

  2. In den Grundeinstellungen unter „Kategorien/Listen“: „Verfügbar Listen Layouts“ ergänzt: foto_article.tpl:foto_ohne_preis

  3. Für die Kategorie unter „Individuelles Layout“ aus der Liste den Eintrag „foto_ohne_preis“ ausgewählt.

Dann natürlich alle Caches geleer inkl. Template-Cache.

Wenn ich dann im Frontend auf die betreffende Kategorie gehe, erhalten ich die folgende Fehlermeldung:

Message:	Missing category template detected. Please correct the template for category "Wally".
Time:	2017-09-28T17:08:57.910423+0200
Channel:	core
Context:	{
    "uri": "/regatta-photography/palma-vela-2017/wally",
    "categoryId": "2235",
    "categoryName": "Wally"
}
request:	{
    "uri": "/regatta-photography/palma-vela-2017/wally",
    "method": "GET",
    "query": {
        "module": "widgets",
        "controller": "checkout",
        "action": "info"
    },
    "post": []
}
session:	No session data available
shopId:	1
shopName:	Deutsch

Wo ist der Fehler?

Gruß, Almute

 

 

4

ergänzt: foto_article.tpl:foto_ohne_preis

Habe das mal bei einem Shop nachgestellt. Ich habe allerding NUR den Namen dort eingetragen (also bei der Kategorie). Bei dir also nur „foto_ohne_preis“. Probier das mal.

PS: Bei den Grundeinstellungen habe ich gar nichts eingetragen. Getestet in einem SW 5.2.24

5

Mein Fehler war, dass ich das eigene Layout für die Kategorie unter “Individuelles Layout” ausgewählt hatte. Wenn ich den Namen unter “Produkt Layout” eintrage (er erscheint nicht in der Auswahlliste), wird mein Layout angewendet und es kommt keine Fehlermeldung mehr.

Aber: Nun erscheinen die Produkte alle untereinander angeordnet. Der Inhalt meiner eigenen Datei ist momentan identisch mit der von box-big-image.tpl. Somit sollte auch die Anzeige identisch sein.

Wo liegt jetzt der Fehler?

6

Ich vermute, dass hier kein CSS für das neue Layout angelegt wurde. Bei mir steht dann im HTML soetwas wie

Über CSS Klasse "box--mein-layout" passe ich dann meine Layout nach meinen Wünschen. Hier lege ich auch fest, wie viel Boxen nebeneinander angezeigt werden sollen, indem ich die Breite in Prozent hier festlege. Also width:100% für komplette Seite, 50% füe 2er Spalten, 33.33% für 3er Spalten oder 25% für 4er Spalten. Diese Produkt-Boxen selber haben auch CSS "float: left;". Mal schauen ob das noch drin steht.
7

Danke für den Tipp. Es war mir gar nicht klar, dass mit dem neuen Layout auch eine eigene Klasse definiert wird und gestaltet werden muss. Jetzt funktioniert es endlich.