Mein erster onlineshop
mit shopware 5
Beim Kategorielisting bzw. Template scheiden sich die Geister. Die einen mögen es zweispaltig, die anderen drei- oder gar vierspaltig. Shopware bietet hier im Standard nur begrenzte Möglichkeiten zur Variation. Wie Du Dir aber ganz einfach ein eigenes Listing Layout erstellen kannst, zeigen wir in diesem Beitrag (ab Shopware 5.4).
Dazu bedarf es lediglich ein paar einfacher Anpassungen im Shopware Theme.
Wir zeigen Dir heute in einem konkreten Beispiel, wie Du ein eigenes Produkt-Layout erstellst, welches 3 statt 2 Spalten mit Produkten zeigt.
Es ist hilfreich, wenn Du unsere Videoserie zu Smarty und Less Anpassungen gesehen hast.
Das Standard Listing sieht normalerweise so aus:
Wir wollen eine 3 Spalten Ansicht erstellen welche ca. so aussehen wird:
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 verwendet.
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}Da wir oben eine 'box-custom-basic.tpl' einbinden, die es im Shopware Standard nicht gibt, legen wir diese selber im entsprechenden Verzeichnis an.
frontend/listing/product-box/box-custom-basic.tplIn 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.
Anschließend 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}Damit wir unser 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:
Hier 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. Solltest Du allerdings das Ajax Listing nutzen, wirst Du merken, dass sich dieses nicht mit anpasst.
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;".
Anschließend 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.
Es gibt eine 'listing_ajax.tpl' Datei welche wir uns zunutze 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'}
{foreach $sArticles as $sArticle}
{include file="frontend/listing/product-box/box-custom-basic.tpl" productBoxLayout="custom_basic"}
{/foreach}
{else}
{$smarty.block.parent}
{/if}
{/block}Damit nicht immer unsere Produktbox 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.
Als letztes wird das Theme neu kompiliert und schon ist unser neues Listing im Frontend sichtbar.
Viel Spaß beim Ausprobieren :-)
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Gold Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
Vielen Dank für die tolle Anleitung. Hat auf Anhieb funktioniert. Ich habe nur ein kleines Problem, die erste Seite des Produktlistings passt perfekt, alle folgeseiten springen wieder auf das defaultmäßige 4spaltige Layout zurück.
Hab Ihr hier einen kleinen Hinweis, wo ich ansetzen könnte.
vielen herzlichen Dank
Michael
danke erstmal für eure Arbeit hier :). Hat mir so einiges schon geholfen eure Tutorial.
Speziell zu diesem hier. Irgend wie greift das neue Listing bei mir nicht.
https://prnt.sc/upi0wp Shopware 5.6.8 Schritt für schritt so gemacht. Wenn ich mir den Quellcode ansehe habe ich keine custom classe um meine listings rum. Die custom_listing.less alles wird eingebundet bis auf das Listing Template selber.
Woran könnte es liegen ?
Vielen Dank
Kleiner Hinweis noch zum Thema Responsive...
Wer auf dem Smartphone keine 3 Spalten haben will, der sollte das in Less direkt berücksichtigen.
Meine .less Datei sieht z.B. so aus...
@media screen and (min-width: @phoneLandscapeViewportWidth) {
.custom-listing .box--custom_basic {
width: calc(100%);
}
}
@media screen and (min-width: @tabletViewportWidth) {
.custom-listing .box--custom_basic {
width: calc(100% / 2);
}
}
@media screen and (min-width: @tabletLandscapeViewportWidth) {
.custom-listing .box--custom_basic {
width: calc(100% / 4);
}
}
sehr cooler Beitrag und tolle Arbeit!! Bei uns funktioniert es soweit gut - allerdings habe ich zum einen das Problem die less einzubinden (wir haben es jetzt über zusätzliches CSS gelöst) und das größere Problem ist, dass die ersten Artikel in jeder Kategorie noch "normal" dargestellt werden, erst ab Seite 2 bzw. bei uns nach 12 Produkten funktioniert die gewünschte Darstellung - gibt es dazu eine Lösung? Wir nutzen Shopware 5.6.6
wie schaut euer CSS Code aus? Am besten schickst du mir das kurz an support@8mylez.com und verlinkst den Blog Beitrag, damit das wieder bei mir landet :)
Gruß
Alexander
ein hervorragendes Tutorial. Sehr gelungen!
Auch als nicht-Programmierer konnte ich der Anleitung wunderbar folgen und das Layout genauso umsetzen, wie beschrieben. Ich habe jedoch folgende Frage: Ihr habt das Custom Listing Layout auf der Grundlage von dem Standard Produkt Layout namens „Nur wichtige Informationen“ erstellt. Ich würde gerne genau das gleiche für das Standard Layout „Großes Bild“ umsetzen. Hier werden standardmäßig nur zwei Spalten angezeigt. Ich würde gerne drei Spalten darstellen. Wahrscheinlich muss man in einer .tpl Datei nur eine einzige Zeile ändern, nur weiß ich leider nicht, welche. Wisst ihr, wie man das umsetzen würde?
Herzlichen Dank!
vielen Dank für das Feedback!
Im Prinzip musst du beim Ableiten der Datei darauf achten von welcher .tpl Datei du erbst. In diesem Fall ist das "box-basic.tpl". Zumindest sollte das so in deiner ersten Zeile stehen mit dem "extends" Befehl.
Wenn du ein anderes Layout als Basis nehmen willst, musst du statt "box-basic.tpl" die Template Datei deines Wunschlayouts nehmen.
Gruß
Alexander
Vielleicht hilfts ja jemandem, mir hat's geholfen ;)
wie immer eine tolle Anleitung. Vielen Dank dafür. Ich habe meine Custom-Listing in leicht abgewandelter Form (Ich extende auf das Listen-Layout statt auf das Basic) durchgeführt. Ich erhalte aber bei dem Infinite-Scrolling den folgenden Error: TypeError: Cannot read property 'trim' of undefined
at Plugin.appendListing
Ist dir dieser bekannt? Ich habe einige Einträge hierzu im Community-Forum gefunden. Dabei handelte es sich aber immer um selbst geschriebene Plugins und ich konnte die Lösungen hierzu nicht adaptieren.
Ich freue mich auf deine Antwort.
LG
Michel
erstmal vielen Dank für das gelungene Tut.
Ich habe aber mal eine Frage, in der Mobilen-Ansicht z.B. Iphone 8 sieht das ein wenig gequetscht aus, kann man da sagen mobil nur zwei spalten?
Gruß
Christian
vielen Dank!
Ja, im Prinzip kannst du für mobile Endgeräte über die Media Queries in CSS die Breiten einstellen wie es dir am besten gefällt.
Gruß
Alexander
Ich bin exakt so vorgegangen wie beschrieben doch wenn ich auf custom umstelle, zeigt er mir das Listing in Fullwidth-boxed an. Also ein Produkt über die ganze Seite.
Eine Idee, woran das liegen könnte?
ich würde vermuten, dass die Klassen nicht korrekt gesetzt wurden oder der Cache evtl. noch geleert werden muss.
Im Prinzip würde ich alle Dateien nochmal genau durchgucken um mir sicher zu sein, dass auch alles korrekt umgesetzt wurde.
Gruß
Alexander
tolle Anleitung, danke dafür.
Gibt es auch eine Möglichkeit im Kategorielisting nicht einfach einen Ausschnitt der Artikelbeschreibung anzuzeigen, sondern einen eigens erstellten Text? Nicht über die Kurzbeschreibung, was bereits nativ funktioniert, sondern mittels eines eigens erstellten Freitextfeldes, welches ich dann im Backend bei den Artikeln befüllen kann und welches dann, anstelle der Artikelbeschreibung, diesen Text (Zum Beispiel mit Vorteilen des Artikels) im Kategorielisting ausgibt.
das funktioniert ohne große Probleme. Am besten schaust du dir dazu unseren Blogpost über die Freitextfelder an: 8mylez.com/blog/freitextfelder-im-shopware-frontend-ausgeben/
Gruß
Alexander
hat funktioniert. Vielen Dank für die Anleitung. Statt der Beschreibung möchte ich die Artikelnummer bzw. auch ein Freitextfeld anzeigen. Irgendwie finde ich nicht die richtigen Dateien. Kann das in die box-custom-basic.tpl eingefügt werrden und wenn ja was?
Vielen Dank und lieben Gruß
du kannst in die Originale box-basic.tpl Datei schauen in welchen Blöcken diese Inhalte sind und diese dann mit deinem Inhalt überschreiben bzw. anpassen.
Gruß
Ewald
für Shopware 5.5.4 wurde diese Möglichkeit geschaffen: https://developers.shopware.com/designers-guide/custom-templates/#custom-product-box-layouts Inwiefern ist das mit eurem vergleichbar? Bzw könntet ihr dazu auch einen Artikel schreiben?
das steht bereits auf unserer Liste! Vielen Dank für den Hinweis. Da es schon mehrfach angefragt wurde, wird es bald etwas dazu geben.
Gruß
Alexander
erstmal bedanke ich mich ebenfalls für diesen Artikel und die vielen hilfreichen Tutorials, die Ihr zusammengestellt habt!
Ich habe genau dieses Listing gesucht, so umgesetzt und es hat wunderbar geklappt.
Jetzt wollte ich die Möglichkeit für eine weitere Kategorie nutzen, habe die Schritte genau gleich durchgeführt (natürlich mit anderen Benennungen) und dieses Layout in den Grundeinstellungen eingetragen.
In den Kategorien habe ich die Auswahl auch zur Verfügung, aber wenn ich as Listing mit diesem Layout im Frontend aufrufe, bekomme ich die Meldung "
Missing category template detected" (System > Log E-Mail).
Muss man anders vorgehen, wenn man weitere Layouts verwenden möchte?
Danke!
Schöne Grüße!
Michael
du kannst mal mit den Config Tweaks schauen ob es eine genauere Fehlermeldung gibt. Ansonsten vermute ich einen Rechtschreibfehler im Backend oder der Datei.
https://docs.shopware.com/de/shopware-5-de/tutorials-und-faq/fehlermeldungen-in-shopware-debuggen#tweaks-fuer-die-config-php
Gruß
Ewald
super Sache, hat auch alles gut funktioniert, bis wir auf den Produktivserver umgezogen sind. Auf einmal ging es nicht mehr in der normalen Darstellung, in der Ajax schon.
Ich vermute ein Plugin greift nach mir den "frontend_listing_list_inline" ab. Leider konnte ich mit PHPStorm auch den Bezug nicht finden. Gibt es eine Möglichkeit herauszufinden, welches Plugin einen Block nutzt? Ich hab es jedenfalls nicht gefunden.
Wir haben uns geholfen indem wir den führenden Block "frontend_listing_listing_content" im eigenen Listing Tpl ersetzt haben.
Leider nur nicht so updatesicher !!!
Ich würde lieber wissen, welches Plugin verantwortlich ist :)
"updatesicher" bedeutet eher, dass es nicht im Core Code steht. Solange ihr ein eigenes Theme habt ist es in Ordnung. Generell ist es schwierig Themes oder Plugins zu entwickeln die nie an Updates angepasst werden muessen, da niemand (ausser Shopware) weiss, welche Aenderungen gemacht werden.
Aber eine der einfachsten Methoden fuer das Finden des Blocks im Plugin ist wenn du die Plugins runterlaedst und dann im gesamten Ordner nach dem Block suchst. CMD + Shift + F (oder STRG + Shift + F) funktioniert in den meisten Editoren.
Gruß
Alexander
Wäre super, wenn du dir das kurz ansehen könntest. Vielen Dank!
Liebe Grüße,
Sebastian
das Problem liegt darin, dass oben die Abfrage nach dem ProductBoxLayout Basic gemacht wird. Nur in diesem Fall wird das Listing erweitert. Solltest du ein anderes Layout verwenden musst di die Abfrage entfernen oder erweitern.
Beste Grüße
Ewald
du kannst auch gerne die Lösung bei Sebastian testen.
Beste Grüße
Ewald
gibt es eine Möglichkeit, dass das neu angelegte Kategorie Layout automatisch beim erstellen einer Kategorie ausgewählt ist. Aktuell müssen wir noch in jede neu angelegte Kategorie rein und es manuell ändern.
Danke!
leider ist uns so eine Funktion aus dem Standard heraus nicht bekannt.
Viele Grüße
Ewald
erst einmal Danke für das spitzen Tutorial!
Wir haben die Änderungen in unserem Listing so vorgenommen wie du es beschrieben hast allerdings haben wir unsere Produkt-Boxen nach unseren Ansprüchen individualisiert (Beschreibungen/Bewertungen/Compare-Button rausgenommen, Herstellerbilder über den Titel eingefügt etc.).
Das Problem vor dem wir nun stehen ist dass innerhalb des Listings zufällig "Lücken" auftauchen, trotzdem aber alle Artikel für die jeweilige Seite angezeigt werden..
So werden z.B. bei 60 Artikeln statt 15 Zeilen, 17 angezeigt mit 2 Zeilen in denen Lücken vorhanden sind.
Hast du eventuell einen Tipp woran das liegen könnte?
Wenn die Erklärung zu schwammig ist können wir dir gerne auch ein Bild vom Sachverhalt zukommen lassen.
Mit freundlichem Gruß,
Marvin
ich verstehe was du meinst. Eventuell stimmt bei einer Box die Größe nicht bzw. es gibt noch Div Blöcke die bei manchen Artikeln nicht befüllt sind (z.B. Bewertungen) und daher ist dieses nicht sichtbar, aber im Code ist es "größer".
Viele Grüße
Ewald
erstmal vielen Dank für den tollen Artikel. Habe das Ganze in meinem Shop umgesetzt. Im Backend läuft alles problemlos. Allerdings bekomme ich im Frontend folgende Fehlermeldung:
Serialization error in custom facet CustomProducts Filter: Class ShopwarePlugins\SwagCustomProducts\Bundle\SearchBundle\Facet\CustomProductsFacet does not exist
Ich nutze aktuell die Shopware Version 5.4.3. Freue mich auf Eure Rückmeldung. Danke :)
da scheint es mir ein Problem mit dem Custom Products Plugin zu geben. Gab es vorher kein Problem im Listing damit?
Viele Grüße
Ewald
Ja, ich habe das eigene Listing im Backend angelegt wie in dem Bild gezeigt. Aber leider funktioniert es nicht. Alles 3-fach kontrolliert. Shopware 5.4 is die erste Version womit ich arbeite, kann es sein das es keine "legacy" gibt wodurch dieser Funktionalität nicht mehr unterstutzt wird?
Vielen Dank!
Viele Grüße
Patrick (Die Niederlanden)
du kannst noch probieren die Config Tweaks von SW https://docs.shopware.com/de/shopware-5-de/tutorials-und-faq/fehlermeldungen-in-shopware-debuggen
zu aktivieren und schauen ob ein Fehler entsteht. Wenn kein Fehler da ist wird es an einem Rechtschreibfehler o.ä. liegen, da der Code wohl nicht gefunden wird.
Solltest du nicht weiterkommen können wir uns das in unserem Support anschauen. Dazu einfach eine Mail an support@8mylez.com senden und wir melden uns.
Viele Grüße
Ewald
ich habe genau das gleiche Problem wie Patrick. Die Einstellung "Individuelles Layout" erscheint bei mir nicht in den Kategorien. Ich hab zwar die Dateien usw. umbenannt, aber es sollte alles passen (statt "custom" "dh".
Wo ist denn diese Einstellung zu sehen.
Hast du einen Screenshot davon?
Oder gibt es was bei Version 5.4.6 zu beachten.
Vielen Dank,
Michael
die Einstellung ist bei jeder Kategorie zu finden. Hast du das individuelle Layout auch in den Grundeinstellungen hinterlegt?
Viele Grüße
Ewald
vielen Dank für die Antwort. Tatsächlich passte alles, aber es hat über Nacht gedauert, bis die Option im Backend erschienen ist, trotz neu Anmelden vorher :)
Übrigens ein dickes Lob an Dich und Mylez. Ihr habt mir sehr bei der Entwicklung unseres Shopware Themes geholfen.
VG, Michael
Vielen Dank für dieser Information. Bei mir funktioniert es leider nicht, nichts hat sich geändert. Du schreibst "Unter Individuelles Layout wählen wir unser "custom_listing" aus ". Ich kann die Setting "Individuelles Layout" nicht finden. Wo finde ich dass? Ich kann es nicht finden und nirgendwo kann ich "custom listing" wählen. Hoffentlich kansst du mich helfen.
Vielen Dank!
Viele Grüße
Patrick (Die Niederlanden)
hast du das eigene Listing auch im Backend angelegt wie in dem Bild gezeigt?
Viele Grüße
Ewald
außer den Typos keine Probleme. (Da ist übrigens noch einer: 'aricle_listing_custom.tpl').
Problematisch finde ich bei solchen wirklich gutgemeinten Beiträgen, dass oft einzelne Schritte fehlen, ohne die das alles nicht läuft. Hier ist zb gänzlich darauf verzichtet worden zu beschreiben, wie man das neue Template der Kategorie zuweisen kann. Also, dass man es in den Grundeinstellungen/Storefront/Kategorien/Listen in "Verfügbare Listen Layouts" eintragen muss.
Soll keine negative Kritik sein! Ich bin durch den Beitrag erst auf das ajax tpl gestoßen, das hat mir sehr geholfen.
Gruß
Karl
leider entgeht das einem selber manchmal. Da müssen wir in Zukunft mehr Augen drüber schauen lassen.
Vielen Dank für die konstruktive Kritik. Damit können wir arbeiten und die Beiträge verbessern damit alles einwandfrei für den nächsten läuft. Ich prüfe die Umsetzung nochmal und ergänze ggf. den Beitrag mit den Anpassung in der Grundeinstellung.
Beste Grüße
Ewald
In "Es gibt eine 'ajax_listing.tpl' Datei welche wir uns zu Nutze machen." müsste es übrigens listing_ajax.tpl heißen. Im Code ist es korrekt, in der Beschreibung nicht.
vielen Dank für den Hinweis! Wo gab es denn Probleme mit der Anleitung?
Viele Grüße
Ewald
Was denkst du?