Theme: Eigenes Listing Layout erstellen

Theme: Eigenes Listing Layout erstellen

Ewald Gering 09. November 2016 8

Viele gucken sich ihre Artikel in der Listing Übersicht an und wollen ein ganz eigenes Listing Layout erstellen.

Das ganze kann man über Anpassungen im Template machen.

Wir zeigen euch heute, wie ihr ein eigenes Produkt-Layout erstellt, dass 3 statt 2 Spalten nutzt.

Es ist hilfreich wenn ihr unsere Video Serie zu Smarty und Less Anpassungen gesehen habt.

Das Standard Listing sieht erstmal so aus:
shopware_listing_2column

Wir wollen eine 3 Spalten Ansicht:
shopware_listing_3column

Zuerst legen wir unter "themes/Frontend/DeinTheme/frontend/listing/" die Datei "article_listing_custom.tpl" anlegen.
Diese Datei wird später als Anfangspunkt genutzt.

Der Inhalt von "article_listing_custom.tpl"

{extends file='frontend/listing/index_custom.tpl'}

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

In Zeile 1 extenden wir die "index_custom.tpl", die noch angelegt werden muss.
Zeile 5: Das Produktbox Layout wird auf "custom_listing" gesetzt.
Zeile 6: Hier setzen wir die 'div' mit einer eigenen Klasse, sodass wir diese über CSS verändern können.

Nun legen wir "index_custom.tpl" im selben Verzeichniss an:

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

{* Main content *}
{block name='frontend_index_content'}
  <div class="custom-listing">

    {* Banner *}
    {block name="frontend_listing_index_banner"}
      {if !$hasEmotion}
        {include file='frontend/listing/banner.tpl'}
      {/if}
    {/block}

    {* Category headline *}
    {block name="frontend_listing_index_text"}
      {if !$hasEmotion}
        {include file='frontend/listing/text.tpl'}
      {/if}
    {/block}

    {* Topseller *}
      {block name="frontend_listing_index_topseller"}
        {if !$hasEmotion && {config name=topSellerActive}}
          {action module=widgets controller=listing action=top_seller sCategory=$sCategoryContent.id}
        {/if}
      {/block}

      {* Define all necessary template variables for the listing *}
      {block name="frontend_listing_index_layout_variables"}

      {* Count of available product pages *}
      {$pages = ceil($sNumberArticles / $criteria->getLimit())}

      {* Controller url for the found products counter *}
      {$countCtrlUrl = "{url module="widgets" controller="listing" action="listingCount" params=$ajaxCountUrlParams fullPath}"}

      {* Layout for the product boxes *}
      {$productBoxLayout = 'basic'}

      {if $sCategoryContent.productBoxLayout !== null &&
      $sCategoryContent.productBoxLayout !== 'extend'}
        {$productBoxLayout = $sCategoryContent.productBoxLayout}
      {/if}
    {/block}

    {* Listing *}
    {block name="frontend_listing_index_listing"}
      {include file='frontend/listing/listing_custom.tpl'}
    {/block}

    {* Tagcloud *}
    {block name="frontend_listing_index_tagcloud"}
      {if {config name=show namespace=TagCloud }}
        {action module=widgets controller=listing action=tag_cloud sController=listing sCategory=$sCategoryContent.id}
      {/if}
    {/block}

  </div>
{/block}

In der Zeile 48 übergeben wir unser Layout "custom_listing" an die Artikel Box.

Die "box_article.tpl" wird vom Standard kopiert und die Zeilen 15+16 werden eingefügt.

{block name="frontend_listing_box_article_includes"}

    {if $productBoxLayout == 'minimal'}
        {include file="frontend/listing/product-box/box-minimal.tpl"}

    {elseif $productBoxLayout == 'image'}
        {include file="frontend/listing/product-box/box-big-image.tpl"}

    {elseif $productBoxLayout == 'slider'}
        {include file="frontend/listing/product-box/box-product-slider.tpl"}

    {elseif $productBoxLayout == 'emotion'}
        {include file="frontend/listing/product-box/box-emotion.tpl"}
        
    {elseif $productBoxLayout == 'custom_listing'}
        {include file="frontend/listing/product-box/box-custom.tpl" productBoxLayout="custom_listing"}

    {else}
        {block name="frontend_listing_box_article_includes_additional"}
            {include file="frontend/listing/product-box/box-basic.tpl" productBoxLayout="basic"}
        {/block}
    {/if}
{/block}

Die Datei "listing_custom.tpl" muss auch noch angelegt werden.
Hier lassen wir wieder das Listing mit unserem Box Layout laden.

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

{* Actual listing *}
{block name="frontend_listing_list_inline"}
    {foreach $sArticles as $sArticle}
        {include file="frontend/listing/box_article.tpl" productBoxLayout="custom_listing"}
    {/foreach}
{/block}

Jetzt müssen wir in das Unterverzeichnis "product-box" und erstellen die Datei "box-custom.tpl" mit folgendem Inhalt

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

Damit sind die Template Dateien fertig bearbeitet.

Damit wir auch ein 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:
Da nutzen wir die Funktion "calc"


.box--custom_listing{
width: calc(100% / 3);
}

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

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 fügen unter Produkt Layout ebenfalls "custom_listing" ein. Hier kann man dann seine eigene Produkt Box inhaltlich anpassen.

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

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

8 Kommentare

  • Hi,

    vielen Dank für diesen und die anderen Tutorials auf deinem Blog, alle Artikel sind sehr hilfreich.

    Ich habe das 3spalten-Layout erstellt, jedoch klappt es nur für die erste Seite einer Kategorie, wenn beim Scrollen "?p=2" kommt, ist dort wieder das alte 2 spalten Layout ausgewählt ...

    Gibt es dafür eine Lösung ?
  • Hallo,

    vielen Dank für die Anleitung :-) Leider bekomme ich folgenden Fehler. Könntet Ihr mir bitte weiterhelfen!


    Fatal error: Uncaught SmartyException: Unable to load template snippet 'frontend/listing/listing_custom.tpl' in 'frontend/listing/article_listing_custom.tpl|frontend/plugins/comer_home_icon/main-navigation.tpl|frontend/plugins/seo/index.tpl' in /www/htdocs/shopware-iq-de/engine/Library/Smarty/sysplugins/smarty_internal_templatebase.php:127 Stack trace: #0 /www/htdocs/shopware-iq-de/engine/Library/Smarty/sysplugins/smarty_internal_template.php(286): Smarty_Internal_TemplateBase->fetch(Object(Enlight_Template_Default), NULL, NULL, NULL, false, false, true) #1 /www/htdocs/shopware-iq-de/var/cache/production_201701090916/templates/frontend_IQ_Theme_de_DE_1/7f/59/9e/7f599e83551cc5eea5e2f1cc7a60e3a325115285.snippet.index.tpl.php(448): Smarty_Internal_Template->getSubTemplate('frontend/listin...', NULL, 'frontend_IQ_Th...', NULL, NULL, Array, 0) #2 /www/htdocs/shopware-iq-de/engine/Library/Smarty/sysplugins/smarty_internal_templatebase.php(180): content_587686d00e9276_59311092(Object(Enl in /www/htdocs/shopware-iq-de/engine/Library/Smarty/sysplugins/smarty_internal_templatebase.php on line 127

    War mir an einer Stelle des Tutorials unsicher und zwar bei:
    Die "box_article.tpl" wird vom Standard kopiert und die Zeilen 15+16 werden eingefügt.

    Ich habe die Datei box_article.tpl in das Verzeichnis von meinem Theme in den Ordner listing kopiert und die beiden Zeilen ergänzt. Ich hoffe das hat so gepasst?!

    Würde mich sehr über Hilfe freuen!
    VG
  • Hallo Florian,

    tut mir Leid, dass die Antwort erst so spät kommt, aber eine Lösung ist da.
    Ich habe im Beitrag eine Datei vergessen einzubinden.
    Das war die "custom_listing.tpl" wie auch in deiner Fehlermeldung zu sehen ist.
    Ausserdem wurden in der "index_custom.tpl" folgende Zeilen verändert.
    {block name="frontend_listing_index_listing"}
    {include file='frontend/listing/listing_custom.tpl'}
    {/block}

    Wenn du diese Änderungen machst, sollte das ganze funktionieren.
    Ich freue mich wenn du mir eine Rückmeldung gibst, ob das ganze nun funktioniert.

    Viele Grüße
    Ewald
  • irgendwo hab ich einen Fehler,

    muss ich das custom_listing bei Produkt Layout von Hand eintragen oder sollte dies in dem Auswahlmenü erscheinen? Weil dieses tut es nicht und wenn ich es per Hand eintrage geht es aber auch nicht, es kommt ein Fehler
  • Hallo Marko,

    das Produkt Layout muss manuell eingetragen werden.
    Ist im Backend das custom_listing bei Individuelles Layout und Produkt Layout gesetzt?
    Was für eine Fehlermeldung bekommst du?

    Viele Grüße,
    Ewald

Was denkst du?

Das Shopware eBook für Einsteiger!

Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.Zum 8mylez Store

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 Shop erstellst und verwaltest

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstellst
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie du deine Shop Geschwindigkeit optimierst
Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten
Social Media Icon mit Link im Footer
Shopware Logo aus dem Footer entfernen
Die Ups! Ein Fehler ist aufgetreten! Fehlermeldung

8mylez gehört zu

© 2016-2017