Shopware Kategorieseite - Eigenes Template Layout erstellen

Shopware Kategorieseite - Eigenes Template Layout erstellen

Ewald Gering 13. Juli 2018 17

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'}
        {if $productBoxLayout == 'basic'}
            {foreach $sArticles as $sArticle}
                {include file="frontend/listing/product-box/box-custom-basic.tpl" productBoxLayout="custom_basic"}
            {/foreach}
        {/if}
    {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 :-)

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

17 Kommentare

  • 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://community.shopware.com/config.php-Tweaks_detail_1801.html
    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?

Shopware SEO
Guide 2018

shopware seo guide

Genug von schlechten Rankings?

mehr erfahren

Tools, die wir

verwenden

seobility

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Theme: Eigenes Listing Layout erstellen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Staging Umgebung – Was ist das und warum brauchst du eine?
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Plugin Theme anpassen
Wie du jedes Icon in Shopware 5 anpassen kannst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
© 2017 by 8mylez. Powered by Goltfisch GmbH.