Shopware Kategorieseite - Eigenes Template Layout erstellen

Shopware Kategorieseite - Eigenes Template Layout erstellen

Ewald Gering 13. Juli 2018 40

Beim Kategorielisting bzw. Template scheiden sich die Geister. Die einen mögen es zweispaltig, die anderen drei- oder gar vierspaltig. Shopware bietet hier im Standard nur begrenzte Möglichkeiten zur Variation. Wie Du Dir aber ganz einfach ein eigenes Listing Layout erstellen kannst, zeigen wir in diesem Beitrag (ab Shopware 5.4).

Dazu bedarf es lediglich ein paar einfacher Anpassungen im Shopware Theme.

Wir zeigen Dir heute in einem konkreten Beispiel, wie Du ein eigenes Produkt-Layout erstellst, welches 3 statt 2 Spalten mit Produkten zeigt.

Es ist hilfreich wenn Du unsere Video Serie zu Smarty und Less Anpassungen gesehen hast.

Wie soll unsere Kategorieseite am Ende aussehen?

Das Standard Listing sieht normalerweise so aus:

Listing Layout Standard Shopware Kategorieseite

Wir wollen eine 3 Spalten Ansicht erstellen welche ca. so aussehen wird:

Listing Layout 3 Spaltig

Template Anpassungen

Zuerst legen wir unter "themes/Frontend/DeinTheme/frontend/listing/" die Datei "article_listing_custom.tpl" an.

'DeinTheme' ist natürlich mit Deinem Theme Namen zu ersetzen.

Diese Datei wird später als Anfangspunkt verwendet.


Der Inhalt der Datei "article_listing_custom.tpl" sollte so aussehen

{extends file='parent:frontend/listing/index.tpl'}

{* Wrap the content into a new element *}
{block name='frontend_index_content'}
  <div class="custom-listing">
      {$smarty.block.parent}
  </div>
{/block}

{* Make the listing changes *}
{block name='frontend_listing_list_inline'}
  <div class="custom-listing--listing">
     {foreach $sArticles as $sArticle}
        {include file="frontend/listing/product-box/box-custom-basic.tpl" productBoxLayout="custom_basic"}
	 {/foreach}
</div> {/block}


  • In Zeile 1 extenden wir die originale "index.tpl" Datei des Listings.
  • Zeile 6: Hier ummanteln wir den Inhalt mit einer eigenen Klasse, sodass wir diese später über CSS verändern können.
  • Zeile 14: Unser Produktbox Layout wird an unsere eigene Product-Box Datei übergeben mit dem Inhalt "custom_basic".


Da wir oben eine 'box-custom-basic.tpl' einbinden, die es im Shopware Standard nicht gibt, legen wir diese selber im entsprechenden Verzeichnis an.

frontend/listing/product-box/box-custom-basic.tpl

In dieser Datei wollen wir den folgenden Block anpassen: 'frontend_listing_box_article_description'

Wie gewohnt erweitern wir die originale Datei mit dem extends Befehl:

{extends file="parent:frontend/listing/product-box/box-basic.tpl"}

In diesem Fahl nehmen wir die Basic-Box von Shopware.

Anschliessend ersetzen wir explizit den oben genannten Block mit einer kürzeren Beschreibung.

{extends file="parent:frontend/listing/product-box/box-basic.tpl"}

{* Product description *}
{block name='frontend_listing_box_article_description'}
    <div class="product--description">
        {$sArticle.description_long|strip_tags|truncate:200}
    </div>
{/block}

Less Anpassungen

Damit wir unser eigenes Design bekommen, fügen wir noch unter "frontend/_public/src/less/_modules" die "custom_listing.less" an.
Wenn wir das Listing als 3 Spalten Layout haben möchten, müssen wir die Boxen auf 1/3 der Größe stellen.

Die 'custom_listing.less' sieht dann so aus:
Hier nutzen wir die Funktion "calc"

.custom-listing .box--custom_basic{
	width: calc(100% / 3);
}

Nicht vergessen die custom_listing.less in der all.less einzubinden (@import "_modules/custom_listing";)!


Wenn wir das Ganze im Shop testen scheint es schon zu funktionieren. Solltest Du allerdings das Ajax Listing nutzen wirst Du merken, dass sich dieses nicht mit anpasst.

Backend Anpassungen

Nun geht es in das Shop Backend und wir öffnen "Grundeinstellungen > Storefront > Kategorie/Listen > Verfügbare Listen Layouts".
Unter "Verfügbare Listen Layouts" fügen wir unser Custom Layout hinzu: "article_listing_custom.tpl:custom_listing;".

shopware_listing_backend

Anschliessend wird alles gespeichert und wir suchen uns eine Kategorie aus, der wir unser neues Listing zuweisen wollen.
Unter Individuelles Layout wählen wir unser "custom_listing" aus und unter Produkt Layout irgend ein Layout aus wie z.B. Detaillierte Informationen.

Ajax Listing Erweiterung

Es gibt eine 'listing_ajax.tpl' Datei welche wir uns zu Nutze machen.

Wie gewohnt legen wir diese in unserem Theme im Listing Ordner an und leiten von dieser ab.

{extends file="parent:frontend/listing/listing_ajax.tpl"}

{block name="frontend_listing_list_inline_ajax"}
    {* Actual listing *}
    {if $sCategoryContent.template == 'article_listing_custom.tpl'}

            {foreach $sArticles as $sArticle}
                {include file="frontend/listing/product-box/box-custom-basic.tpl" productBoxLayout="custom_basic"}
            {/foreach}
    {else}
        {$smarty.block.parent}
    {/if}
{/block}

Damit nicht immer unsere Produkt Box beim Ajax Listing geladen wird müssen wir dieses entsprechend abfragen. 

Hierzu nutzen wir die Variable '$sCategoryContent.template' welche das ausgewählte Listing Layout wiedergibt.


Als letztes wird das Theme neu kompiliert und schon ist unser neues Listing im Frontend sichtbar.

Viel Spaß beim ausprobieren :-)

40 Kommentare

  • Hallo liebes 8mylzes Team,

    ein hervorragendes Tutorial. Sehr gelungen!

    Auch als nicht-Programmierer konnte ich der Anleitung wunderbar folgen und das Layout genauso umsetzen, wie beschrieben. Ich habe jedoch folgende Frage: Ihr habt das Custom Listing Layout auf der Grundlage von dem Standard Produkt Layout namens „Nur wichtige Informationen“ erstellt. Ich würde gerne genau das gleiche für das Standard Layout „Großes Bild“ umsetzen. Hier werden standardmäßig nur zwei Spalten angezeigt. Ich würde gerne drei Spalten darstellen. Wahrscheinlich muss man in einer .tpl Datei nur eine einzige Zeile ändern, nur weiß ich leider nicht, welche. Wisst ihr, wie man das umsetzen würde?

    Herzlichen Dank!
  • Hey Daniel,

    vielen Dank für das Feedback!

    Im Prinzip musst du beim Ableiten der Datei darauf achten von welcher .tpl Datei du erbst. In diesem Fall ist das "box-basic.tpl". Zumindest sollte das so in deiner ersten Zeile stehen mit dem "extends" Befehl.

    Wenn du ein anderes Layout als Basis nehmen willst, musst du statt "box-basic.tpl" die Template Datei deines Wunschlayouts nehmen.

    Gruß
    Alexander
  • Weil gefragt wurde, wie man das neue Layout standardmäßig verwenden kann: hab ich leider auch nicht rausgefunden, wohl aber, dass es reicht in der Datenbank die Spalte "template" mit der neuen Templatedatei zu füllen. Bei mir sah der SQL-Befehl dann so aus: UPDATE s_categories SET template = 'article_listing_custom.tpl'
    Vielleicht hilfts ja jemandem, mir hat's geholfen ;)
  • Nachtrag: Habe den Fehler gerade gefunden .. Der include meiner box-custom.tpl ging nicht da ich nen Schreibfehler drin hatte *facepalm*. Trotzdem Danke an der Stelle für das schöne Tutorial :)
  • Hallo Ewald,

    wie immer eine tolle Anleitung. Vielen Dank dafür. Ich habe meine Custom-Listing in leicht abgewandelter Form (Ich extende auf das Listen-Layout statt auf das Basic) durchgeführt. Ich erhalte aber bei dem Infinite-Scrolling den folgenden Error: TypeError: Cannot read property 'trim' of undefined
    at Plugin.appendListing

    Ist dir dieser bekannt? Ich habe einige Einträge hierzu im Community-Forum gefunden. Dabei handelte es sich aber immer um selbst geschriebene Plugins und ich konnte die Lösungen hierzu nicht adaptieren.

    Ich freue mich auf deine Antwort.

    LG
    Michel
  • Hallo Ewald,

    erstmal vielen Dank für das gelungene Tut.
    Ich habe aber mal eine Frage, in der Mobilen-Ansicht z.B. Iphone 8 sieht das ein wenig gequetscht aus, kann man da sagen mobil nur zwei spalten?
    Gruß
    Christian
  • Hey Christian,

    vielen Dank!

    Ja, im Prinzip kannst du für mobile Endgeräte über die Media Queries in CSS die Breiten einstellen wie es dir am besten gefällt.

    Gruß
    Alexander
  • Hallo und danke für das Tut.
    Ich bin exakt so vorgegangen wie beschrieben doch wenn ich auf custom umstelle, zeigt er mir das Listing in Fullwidth-boxed an. Also ein Produkt über die ganze Seite.
    Eine Idee, woran das liegen könnte?
  • Hey Ken,

    ich würde vermuten, dass die Klassen nicht korrekt gesetzt wurden oder der Cache evtl. noch geleert werden muss.

    Im Prinzip würde ich alle Dateien nochmal genau durchgucken um mir sicher zu sein, dass auch alles korrekt umgesetzt wurde.

    Gruß
    Alexander
  • Hi,
    tolle Anleitung, danke dafür.
    Gibt es auch eine Möglichkeit im Kategorielisting nicht einfach einen Ausschnitt der Artikelbeschreibung anzuzeigen, sondern einen eigens erstellten Text? Nicht über die Kurzbeschreibung, was bereits nativ funktioniert, sondern mittels eines eigens erstellten Freitextfeldes, welches ich dann im Backend bei den Artikeln befüllen kann und welches dann, anstelle der Artikelbeschreibung, diesen Text (Zum Beispiel mit Vorteilen des Artikels) im Kategorielisting ausgibt.
  • Hallo zusammen,
    hat funktioniert. Vielen Dank für die Anleitung. Statt der Beschreibung möchte ich die Artikelnummer bzw. auch ein Freitextfeld anzeigen. Irgendwie finde ich nicht die richtigen Dateien. Kann das in die box-custom-basic.tpl eingefügt werrden und wenn ja was?
    Vielen Dank und lieben Gruß
  • Hey Friederike,

    du kannst in die Originale box-basic.tpl Datei schauen in welchen Blöcken diese Inhalte sind und diese dann mit deinem Inhalt überschreiben bzw. anpassen.

    Gruß
    Ewald
  • Hey Erik,

    das steht bereits auf unserer Liste! Vielen Dank für den Hinweis. Da es schon mehrfach angefragt wurde, wird es bald etwas dazu geben.

    Gruß
    Alexander
  • Hallo,

    erstmal bedanke ich mich ebenfalls für diesen Artikel und die vielen hilfreichen Tutorials, die Ihr zusammengestellt habt!
    Ich habe genau dieses Listing gesucht, so umgesetzt und es hat wunderbar geklappt.
    Jetzt wollte ich die Möglichkeit für eine weitere Kategorie nutzen, habe die Schritte genau gleich durchgeführt (natürlich mit anderen Benennungen) und dieses Layout in den Grundeinstellungen eingetragen.
    In den Kategorien habe ich die Auswahl auch zur Verfügung, aber wenn ich as Listing mit diesem Layout im Frontend aufrufe, bekomme ich die Meldung "
    Missing category template detected" (System > Log E-Mail).

    Muss man anders vorgehen, wenn man weitere Layouts verwenden möchte?
    Danke!
    Schöne Grüße!
    Michael
  • Hi Ewald,

    super Sache, hat auch alles gut funktioniert, bis wir auf den Produktivserver umgezogen sind. Auf einmal ging es nicht mehr in der normalen Darstellung, in der Ajax schon.

    Ich vermute ein Plugin greift nach mir den "frontend_listing_list_inline" ab. Leider konnte ich mit PHPStorm auch den Bezug nicht finden. Gibt es eine Möglichkeit herauszufinden, welches Plugin einen Block nutzt? Ich hab es jedenfalls nicht gefunden.

    Wir haben uns geholfen indem wir den führenden Block "frontend_listing_listing_content" im eigenen Listing Tpl ersetzt haben.

    Leider nur nicht so updatesicher !!!
    Ich würde lieber wissen, welches Plugin verantwortlich ist :)


  • Hey Michael,

    "updatesicher" bedeutet eher, dass es nicht im Core Code steht. Solange ihr ein eigenes Theme habt ist es in Ordnung. Generell ist es schwierig Themes oder Plugins zu entwickeln die nie an Updates angepasst werden muessen, da niemand (ausser Shopware) weiss, welche Aenderungen gemacht werden.

    Aber eine der einfachsten Methoden fuer das Finden des Blocks im Plugin ist wenn du die Plugins runterlaedst und dann im gesamten Ordner nach dem Block suchst. CMD + Shift + F (oder STRG + Shift + F) funktioniert in den meisten Editoren.

    Gruß
    Alexander
  • Hi! Danke für deinen tollen Beitrag. Ich hab's genau so probiert - jedoch funktioniert in der Ansicht das Infinite Scrolling nicht mehr. Das Rädchen dreht sich kurz, verschwindet und die Produkte werden nicht nachgeladen.

    Wäre super, wenn du dir das kurz ansehen könntest. Vielen Dank!

    Liebe Grüße,
    Sebastian
  • Schließe mich an, habe das gleiche Problem...
  • Hey Sebastian,

    das Problem liegt darin, dass oben die Abfrage nach dem ProductBoxLayout Basic gemacht wird. Nur in diesem Fall wird das Listing erweitert. Solltest du ein anderes Layout verwenden musst di die Abfrage entfernen oder erweitern.

    Beste Grüße
    Ewald
  • Hey Patric,

    du kannst auch gerne die Lösung bei Sebastian testen.

    Beste Grüße
    Ewald
  • Hallo,
    gibt es eine Möglichkeit, dass das neu angelegte Kategorie Layout automatisch beim erstellen einer Kategorie ausgewählt ist. Aktuell müssen wir noch in jede neu angelegte Kategorie rein und es manuell ändern.
    Danke!
  • Hey Daniel,

    leider ist uns so eine Funktion aus dem Standard heraus nicht bekannt.

    Viele Grüße
    Ewald
  • Hallo Ewald,
    erst einmal Danke für das spitzen Tutorial!

    Wir haben die Änderungen in unserem Listing so vorgenommen wie du es beschrieben hast allerdings haben wir unsere Produkt-Boxen nach unseren Ansprüchen individualisiert (Beschreibungen/Bewertungen/Compare-Button rausgenommen, Herstellerbilder über den Titel eingefügt etc.).

    Das Problem vor dem wir nun stehen ist dass innerhalb des Listings zufällig "Lücken" auftauchen, trotzdem aber alle Artikel für die jeweilige Seite angezeigt werden..
    So werden z.B. bei 60 Artikeln statt 15 Zeilen, 17 angezeigt mit 2 Zeilen in denen Lücken vorhanden sind.

    Hast du eventuell einen Tipp woran das liegen könnte?
    Wenn die Erklärung zu schwammig ist können wir dir gerne auch ein Bild vom Sachverhalt zukommen lassen.

    Mit freundlichem Gruß,
    Marvin
  • Hey Marvin,

    ich verstehe was du meinst. Eventuell stimmt bei einer Box die Größe nicht bzw. es gibt noch Div Blöcke die bei manchen Artikeln nicht befüllt sind (z.B. Bewertungen) und daher ist dieses nicht sichtbar, aber im Code ist es "größer".

    Viele Grüße
    Ewald
  • Hallo zusammen,

    erstmal vielen Dank für den tollen Artikel. Habe das Ganze in meinem Shop umgesetzt. Im Backend läuft alles problemlos. Allerdings bekomme ich im Frontend folgende Fehlermeldung:

    Serialization error in custom facet CustomProducts Filter: Class ShopwarePlugins\SwagCustomProducts\Bundle\SearchBundle\Facet\CustomProductsFacet does not exist

    Ich nutze aktuell die Shopware Version 5.4.3. Freue mich auf Eure Rückmeldung. Danke :)
  • Hey Serkan,

    da scheint es mir ein Problem mit dem Custom Products Plugin zu geben. Gab es vorher kein Problem im Listing damit?

    Viele Grüße
    Ewald
  • Hallo Ewald,

    Ja, ich habe das eigene Listing im Backend angelegt wie in dem Bild gezeigt. Aber leider funktioniert es nicht. Alles 3-fach kontrolliert. Shopware 5.4 is die erste Version womit ich arbeite, kann es sein das es keine "legacy" gibt wodurch dieser Funktionalität nicht mehr unterstutzt wird?

    Vielen Dank!

    Viele Grüße
    Patrick (Die Niederlanden)
  • Hey Patrick,

    du kannst noch probieren die Config Tweaks von SW https://docs.shopware.com/de/shopware-5-de/tutorials-und-faq/fehlermeldungen-in-shopware-debuggen
    zu aktivieren und schauen ob ein Fehler entsteht. Wenn kein Fehler da ist wird es an einem Rechtschreibfehler o.ä. liegen, da der Code wohl nicht gefunden wird.

    Solltest du nicht weiterkommen können wir uns das in unserem Support anschauen. Dazu einfach eine Mail an support@8mylez.com senden und wir melden uns.

    Viele Grüße
    Ewald
  • Hallo Ewald,

    ich habe genau das gleiche Problem wie Patrick. Die Einstellung "Individuelles Layout" erscheint bei mir nicht in den Kategorien. Ich hab zwar die Dateien usw. umbenannt, aber es sollte alles passen (statt "custom" "dh".

    Wo ist denn diese Einstellung zu sehen.
    Hast du einen Screenshot davon?

    Oder gibt es was bei Version 5.4.6 zu beachten.

    Vielen Dank,
    Michael
  • Hey Michael,

    die Einstellung ist bei jeder Kategorie zu finden. Hast du das individuelle Layout auch in den Grundeinstellungen hinterlegt?

    Viele Grüße
    Ewald
  • Hallo Ewald,

    vielen Dank für die Antwort. Tatsächlich passte alles, aber es hat über Nacht gedauert, bis die Option im Backend erschienen ist, trotz neu Anmelden vorher :)

    Übrigens ein dickes Lob an Dich und Mylez. Ihr habt mir sehr bei der Entwicklung unseres Shopware Themes geholfen.

    VG, Michael
  • Hallo Ewald,

    Vielen Dank für dieser Information. Bei mir funktioniert es leider nicht, nichts hat sich geändert. Du schreibst "Unter Individuelles Layout wählen wir unser "custom_listing" aus ". Ich kann die Setting "Individuelles Layout" nicht finden. Wo finde ich dass? Ich kann es nicht finden und nirgendwo kann ich "custom listing" wählen. Hoffentlich kansst du mich helfen.

    Vielen Dank!

    Viele Grüße
    Patrick (Die Niederlanden)
  • Hey Patrick,

    hast du das eigene Listing auch im Backend angelegt wie in dem Bild gezeigt?

    Viele Grüße
    Ewald
  • Hallo Ewald,
    außer den Typos keine Probleme. (Da ist übrigens noch einer: 'aricle_listing_custom.tpl').

    Problematisch finde ich bei solchen wirklich gutgemeinten Beiträgen, dass oft einzelne Schritte fehlen, ohne die das alles nicht läuft. Hier ist zb gänzlich darauf verzichtet worden zu beschreiben, wie man das neue Template der Kategorie zuweisen kann. Also, dass man es in den Grundeinstellungen/Storefront/Kategorien/Listen in "Verfügbare Listen Layouts" eintragen muss.

    Soll keine negative Kritik sein! Ich bin durch den Beitrag erst auf das ajax tpl gestoßen, das hat mir sehr geholfen.

    Gruß
    Karl
  • Hey Karl,

    leider entgeht das einem selber manchmal. Da müssen wir in Zukunft mehr Augen drüber schauen lassen.

    Vielen Dank für die konstruktive Kritik. Damit können wir arbeiten und die Beiträge verbessern damit alles einwandfrei für den nächsten läuft. Ich prüfe die Umsetzung nochmal und ergänze ggf. den Beitrag mit den Anpassung in der Grundeinstellung.

    Beste Grüße
    Ewald
  • Danke für den Beitrag, auch wenn das so nicht funktioniert. Er hat mir trotzdem geholfen.

    In "Es gibt eine 'ajax_listing.tpl' Datei welche wir uns zu Nutze machen." müsste es übrigens listing_ajax.tpl heißen. Im Code ist es korrekt, in der Beschreibung nicht.
  • Hey Karl,

    vielen Dank für den Hinweis! Wo gab es denn Probleme mit der Anleitung?

    Viele Grüße
    Ewald

Was denkst du?

SEO für Shopware!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen für gute Rankings in den Suchmaschinen.
Zum Store

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Freitextfelder im Shopware Frontend ausgeben
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe mit Less für Shopware 5 anpassen
Shopware Theme: Eigenes Listing Layout erstellen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Wie du schnell und einfach Google Shopping für Shopware einrichtest
Social Media Icon mit Link im Footer
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Plugin Themes überschreiben und anpassen
© 2017 by 8mylez. Powered by Goltfisch GmbH.