Shopware Kategorieseite - Eigenes Template Layout erstellen

Shopware Kategorieseite - Eigenes Template Layout erstellen

Ewald Gering 13. Juli 2018 7

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

7 Kommentare

  • 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)
  • 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

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
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Plugin Theme anpassen
Wie du jedes Icon in Shopware 5 anpassen kannst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Staging Umgebung – Was ist das und warum brauchst du eine?
Shopware Logo aus dem Footer entfernen
Social Media Icon mit Link im Footer
© 2017 by 8mylez. Powered by Goltfisch GmbH.