Eigenes Listing Layout erstellen ab 5.4

Eigenes Listing Layout erstellen ab 5.4

Ewald Gering 13. Juli 2018 0

Viele gucken sich ihre Artikel in der Listing Übersicht an und merken, dass Sie lieber ein ganz eigenes Listing Layout haben wollen.

Das ganze kann man über ein paar einfache Anpassungen im Theme selber machen.

Wir zeigen dir heute, wie du ein eigenes Produkt-Layout erstellst welches 3 statt 2 Spalten zeigt.

Es ist hilfreich wenn du unsere Video Serie zu Smarty und Less Anpassungen gesehen hast.

Wie soll unser Ergebnis aussehen?

Das Standard Listing sieht normalerweise so aus:

Listing Layout Standard

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 genutzt.


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.

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 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"

.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. Solltet ihr allerdings das Ajax Listing nutzen merkt ihr schnell, dass sich dieses sich nicht mit anpasst.

Ajax Listing Erweiterung

Aber dafür haben wir schon Abhilfe parat :)

Es gibt eine 'ajax_listing.tpl' Datei welche wir uns zu nutzen 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.


Also wenn das Listing-Template der Kategorie 'aricle_listing_custom.tpl' und das Produkt Layout Basic ist sollen die Produkte mit unserem Template geladen werden (Zeile 8).

Im Normalfall wird durch unsere If-Else Abfrage das ausgewählte Layout im Backend geladen.

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

Noch keine Kommentare vorhanden.

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