Theme: Eigenes Listing Layout erstellen

Theme: Eigenes Listing Layout erstellen

Ewald Gering 09. November 2016 24

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="content listing--content 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

24 Kommentare

  • Hi Ewald,

    danke dir hat mir wunderbar geholfen, als kleine Anmerkung. Es sollte oben erwähnt werden. Das das custom_listing unter den Kategorie Produktlayout per Hand eingetragen werden muss.

    Denn dann funktioniert es auch mit den Infinity Scroll ;) Das ging irgendwie etwas unter beim Lesen und erst in den kommentaren hab ich es endeckt.

    Vielleicht ein klein Screenshot dazu ;)
  • Hey Steven,

    danke für den Tipp, gebe ich weiter :-)

    LG
    Marc
  • Super Tutorial, vielen Dank erstmal dafür!

    Habe nun bei mir das 3-Spaltige Listinglayout erstellt und bei den Kategorien aktiviert.
    Nun habe ich jedoch das Problem, dass ich bei einer Kategorie (die mehrere Unterkategorien hat) eine einzige Kategorie auf das Produktlisten-Layout umstellen möchte.

    Im Backend kann ich das alles einstellen, gibt auch keine Fehler - allerdings wird im Frontend dann nur das standardmäßige 2-spaltige Layout ausgegeben bei dieser Kategorie - woran könnte das liegen?
  • Habs gefunden - in der box_article.tpl fehlte der Eintrag für die Produktliste:
    {elseif $productBoxLayout == 'list'}
    {include file="frontend/listing/product-box/box-list.tpl"}
  • Hey Bernd,

    gute Arbeit! :)

    Viele Grüße
    Ewald
  • Hallo Ewald,
    danke für das super Tutorial. Ich habe das alles durchgearbeitet. Habe mein individuelles Layout ausgewählt, auch das Produkt Layout. Im Frontend wird es aber nicht geladen. Ich bekomme nur den sich drehenden Kreis. Hast Du eine Idee woran dies liegen kann.
    LG Dirk
  • Kann es etwas damit zu tun haben, dass mein Theme nicht über den Theme-Ordner sondern den PlugIn-Ordner geladen wird?
  • Hey Dirk,

    damit hat das ganze eigentlich nichts zu tun. Wird dir ein Fehler in der Chrome Developer Toolbar angezeigt? Im Konsolen oder Netzwerk Tab.

    Viele Grüße
    Ewald
  • Nein, dort habe ich keine Fehlermeldungen.
  • Habe den Fehler gefunden.
    Die "listing_custom.tpl" war nicht richtig angelegt.
  • Hey Dirk,

    gute Arbeit! So ein Tippfehler übersieht man gerne.

    Viele Grüße
    Ewald
  • Guten Tag,

    es hat bei mir alles soweit funktioniert. Leider taucht folgendes Problem auf:
    Wir führen bei uns im Listing Artikel mit und ohne Varianten, die falls vorhanden auch im Listing dargestellt werden. Sobald ein Artikel mit Varianten neben einem ohne Varianten im Listing dargestellt wird, verschiebt sich das Listing so, dass viele und große "Leerräume" entstehen.

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

    kannst du mir einen Link schicken wo ich mir das mal anschauen kann? Gerne auch per Mail an: support@8mylez.com

    Viele Grüße
    Ewald
  • hi, vielen dank für die anleitung.
    ich habe alle schritte durchgeführt und bekomme jetzt auch ein dreispaltiges layout in der entsprechende kategorie angezeigt aber jetzt ist auf einmal die topseller box doppelt so hoch wie normal. woran könnte das liegen?
  • Hey Bert,

    ich habe nochmal nach geschaut. Bei der index_custom.tpl fehlen einige Klassen. Dadurch fehlt ein Teil vom Less Code. Es handelt sich um Zeile 5, die so angepasst werden muss: '
    '

    Viele Grüße
    Ewald
  • 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 ?
  • Hey Tobias,

    ich habe die Anleitung nochmal selbst probiert und bei mir funktioniert das Ajax-Reload auch. Hast du bei der Kategorie unter Individuelles Layout und Produkt Layout das 'custom_listing' gesetzt?

    Viele Grüße
    Ewald
  • 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?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

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
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
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
© 2017 by 8mylez. Powered by Goltfisch GmbH.