Template für die Kategorie-Seite anpassen

Shopware Kategorie Seiten-Template erstellen

Frei nach Ringelnatz: Die Geschmäcker der Publikümmer sind verschieden.

Und so gibt es Kunden, die möchten die Kategorie-Übersicht in Shopware 3-spaltig, mache 2 spaltig, andere wieder…. usw.

Das ist kein Drama, wenn man weiß, was zu tun ist. Auch wenn dazu im System/Backend kaum Einstellungen zu finden sind, ist doch Shopware ist für den geneigten Programmierer in solchen Dingen recht leicht anzupassen. Wichtg ist vor allem, das man das Arbeiten mit smarty und Less verstanden hat. Anleitungen dazu gibt es zuhauf im Netz und auch bei Shopware selbst, so das ich das hier überspringe. In diesem Beispiel machen wir aus dem Standard-Layout 2-spaltig eine 3-spaltige Produkübersicht für die Kategorie-Seite. Das funktioniert  ab der Version 5.4 (und so lange, bis shopware wieder einmal alle smarty tags über den Haufen schmeißt :-))

Lets go……

Der Standard – 2-spaltig

Anpassung des Templates

Voraussetzung: es gibt bereits ein custom theme, in dem wir Dateien anpassen / erweitern können.

Dann  legen wir unter „themes/Frontend/custom-theme/frontend/listing/“ die neue Datei  „article_listing_custom.tpl“ an.

‚custom-theme‘ ist natürlich mit dem echten Theme Namen zu ersetzen.

Diese Datei wird später als Anfangspunkt verwendet.

Der Inhalt der  „article_listing_custom.tpl“  sieht dann  so aus:

{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}

Was genau passiert hier?

  • In Zeile 1 extenden also erweitern wir die originale „index.tpl“ Datei des Listings.
  • in 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“.

Wir haben oben eine ‚box-custom-basic.tpl‘ eingebunden, die es im Shopware Standard nicht gibt. Also legen wir diese selber im entsprechenden Verzeichnis des custom theme an und erfinden eine

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

In dieser Datei geht es um  folgenden Block : ‚frontend_listing_box_article_description‘ und wir nutzen die Basic-Box von Shopware.

Allerding bekommt der oben genannte Block eine kürzeren Beschreibung.

Wie gewohnt nutzen wir den  extends Befehl:

{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}

Mach es hübsch per LESS

Damit wir unser eigenes Design bekommen, erfinden wir noch unter „frontend/_public/src/less/_modules“ eine „custom_listing.less“.
Wenn wir das Listing als 3 Spalten Layout haben möchten, müssen wir die Boxen natürlich auf 1/3 der Größe stellen.

Die ‚custom_listing.less‘ sieht dann so aus:
Hier nutzen wir die Funktion „calc“

Damit der Wert auch gefunden wird bitte die  custom_listing.less in der all.less einzubinden (@import „_modules/custom_listing“;)

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

Jetzt ins Backend

Ab ins Shop Backend und unter „Grundeinstellungen > Storefront > Kategorie/Listen > Verfügbare Listen Layouts“  fügen wir unser Custom Layout hinzu: "article_listing_custom.tpl:custom_listing;".


Ist das geschehen 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.

Besonderheit bei Ajax-Listing

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.

Dazu nutzen wir die ‚listing_ajax.tpl‘ Datei aus dem Standard. Wie  gewohnt in unserem Theme neue datei anlegen im Listing Ordner und dann leiten wir 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}

Dann natürlich Theme kompilieren und sich über das eigene Layout freuen.

ich wünsche gute Unterhaltung!