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 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……
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 noch 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:
Damit der Wert auch gefunden wird bitte die custom_listing.less in der all.less einzubinden (@import „_modules/custom_listing“;)
Hier nutzen wir die Funktion „calc“ und lassen den Browser das selber rechnen. ein beliebter CSS Trick.
.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!
Du brauchst hilfe zum Thema? Schreib mir....
Verwandte Artikel
Ersetzen von Eicons mit Font Awesome Header Elementor
Problem : Der Hamburger Icon und einige andere Elemente in Elementor benutzen Eicons. Diese sind eigentlich unnötig und kosten Ladezeit. Ich mag sie persönlich überhaupt nicht. Lösung: Ersetzten mit Font Awesome Diese Lösung
Das Kreuz mit den Schriften im Web
Regel : Benutze web safe-Fonts bzw. websichere Schriften! Natürlich! Logisch! Nichts besser als Websafe Fonts. aber wie eigentlich? Erkenntnis: Es gibt kaum noch Websafe-Fonts! Wir haben doch Google Fonts! Natürlich. Das Erscheinen der
Teilen
