Mein erster onlineshop
mit shopware 5
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 Videoserie zu Smarty und Less Anpassungen gesehen habt.
Das Standard Listing sieht erstmal so aus:
Wir wollen eine 3 Spalten Ansicht:
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 Verzeichnis 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"}
{$path = ''}
{if $productBoxLayout == 'minimal'}
{$path = "frontend/listing/product-box/box-minimal.tpl"}
{elseif $productBoxLayout == 'image'}
{$path = "frontend/listing/product-box/box-big-image.tpl"}
{elseif $productBoxLayout == 'slider'}
{$path = "frontend/listing/product-box/box-product-slider.tpl"}
{elseif $productBoxLayout == 'emotion'}
{$path = "frontend/listing/product-box/box-emotion.tpl"}
{elseif $productBoxLayout == 'list'}
{$path = "frontend/listing/product-box/box-list.tpl"}
{elseif $productBoxLayout == 'custom_listing'}
{$path = "frontend/listing/product-box/box-custom.tpl"}
{/if}
{if $path == ''}
{block name="frontend_listing_box_article_includes_additional"}
{include file="frontend/listing/product-box/box-basic.tpl" productBoxLayout="basic"}
{/block}
{elseif $path == "frontend/listing/product-box/box-custom.tpl"}
{include file=$path productBoxLayout="custom_listing"}
{else}
{include file=$path}
{/if}
{/block}
Die Datei "listing_custom.tpl" muss auch noch angelegt werden.
Hier lassen wir wieder das Listing mit unserem Boxlayout 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;".
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 fügen unter Produkt Layout ebenfalls "custom_listing" ein. Hier kann man dann seine eigene Produktbox inhaltlich anpassen.
Als Letztes wird das Theme neu kompiliert und schon ist unser neues Listing im Shopware Frontend sichtbar.
Möchtest Du wissen wie Du die Hintergrundfarbe in Shopware änderst? Dann ist das vielleicht etwas für Dich: Shopware Hintergrundfarbe ändern. Alternativ kannst Du auch direkt ein Hintergrundbild einfügen: Shopware Hintergrundbild!
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 Anleitung!
Bei uns wird jedoch, sobald eine neue Kategorie erstellt wird immer noch das "Standard" Layout ausgewählt. Lässt sich diese Vorauswahl auf das neue Layout abändern?
Vielen Dank!
Daniel
leider ist uns so eine Funktion aus dem Standard heraus nicht bekannt.
Viele Grüße
Ewald
Ich habe die Anleitung mit den Link zu den Media Queries nicht verstanden. Kannst du bitte eine genaue Anleitung schreiben, sodaß ich wirklich nur Copy & Paste in der Less-Datei erledigen muss. Das wäre toll! Vielen Dank
vielen Dank fuer das Feedback :)
Ich kann dir leider nicht versprechen, dass wir so eine Anleitung schreiben werden. Ich packe es aber auf unsere Liste, damit es nicht untergeht!
Gruß
Alexander
und erstmal Chapeau für diese gute Anleitung.
Gerade eben ist mir allerdings aufgefallen, dass auf der Hersteller-Seite das normale basic-listing angezeigt wird, also wenn ich z.B. auf der Produktseite auf den Link "Weitere Artikel von Hersteller XYZ" klicke. Gibt es auch eine Möglichkeit hier das erstellte custom-listing zu verwenden?
Bin schon den ganzen Tag am suchen aber habe bisher keine Einstellung gefunden, um dieses abzuändern.
Viele Grüße
Stefan
es scheint so, dass es keine Einstellung hierfür gibt. Du kannst aber mal in der Listing.tpl Datei die Variable für das ProductBoxLayout ausgeben lassen und schauen ob es hier z.B. extend drin steht. Dann könnte es eventuell sogar funktionieren die Kategorie Deutsch auf Custom Listing zu setzen.
Viele Grüße
Ewald
Ich bin begeistert ...Schade, dass SW so eine fundamentale Funktion nicht von Hause aus anbietet.
Frage: Durch custom_listing.less lege ich fest wieviele Boxen angezeigt werden. 100% / 4 zeigt dann eben problemlos 4 Spalten. Was wäre denn der einfachste Weg wahlweise 3 oder 4 Spalten zu machen OHNE extra nochmal ein neues Layout zu bauen.
du kannst auch das Standard Layout von Shopware per Less anpassen. Das ist wohl das einfachste, aber damit wird halt jede Kategorie Seite wo dieses Layout verwendet wird überschrieben. Deswegen haben wir in dem Tutorial ein eigenes angelegt.
Es reicht schon aus die product-box Klasse die du ändern möchtest auf eine andere Breite zu setzen. Eventuell muss der Inhalt der Boxen noch angepasst werden.
Viele Grüße
Ewald
vielen Dank für die Anleitung! :)
Seit SW 5.4.0 wurde wieder was verändert.
Bei "box_article.tpl" müssen Zeilen 15+16 wie folgt angepasst werden, sonst gibt es eine SmartyCompilerException.
{elseif $productBoxLayout == 'custom_listing'}
{$path = "frontend/listing/product-box/box-custom.tpl"
danke für die Aufmerksamkeit :) Ich habe den Beitrag dazu angepasst.
Viele Grüße
Ewald
hier ein Link zur Umsetzung ab Shopware 5.4:
https://www.8mylez.com/blog/eigenes-listing-layout-erstellen-5-4/
Viele Grüße
Ewald
danke für die Anleitung. Hat am ersten Tag super geklappt, doch plötzlich werden nur noch 2 Spalten angezeigt. Hat wer eine Idee woran das liegen kann?
Habe auf SW 5.4 upgedatet. Läuft aber auch im Testshop unter 5.3.7 nicht mehr
wird das Template-Layout richtig geladen? Wenn ja kannst du mal schauen ob die Less Anpassungen eventuell nicht greifen oder überschrieben wurden.
Viele Grüße
Ewald
Wie das passiert ist, ist aber für mich ein Rätsel.
dies sollte eigentlich nicht automatisch passieren.
Freut mich, dass du den Fehler schon gefunden hast :)
Viele Grüße
Ewald
habe jetzt auf der Stage-Umgebung die Software auf 5.3.6 upgedatet. Nun habe ich ein Listenlayout mit nur noch einer Spalte. In der 5.2.27 ist es 4-spaltig gewesen. Wisst Ihr an welcher Softwareänderung das liegen kann?
Es ist ein Fehler aufgetreten
Während der Bearbeitung von Shop "shop" ist ein Fehler aufgetreten: ParseError: Unexpected input in all.less on line 1, column 0 1| (@import "_modules/custom_listing";)
die Klammern beim Import gehoeren nicht dazu. Der Code in der all.less muss so aussehen:
@import "_modules/custom_listing";
Gruß
Alexander
vielen Dank für die Anleitung.
Ich bin auf dem Coding Gebiet ein totaler Anfänger, denke aber , dass ich alles so wie beschrieben hinbekommen have. Die Anleitung ist auch gut.
Leider erscheint bei mir im Listing dann nur eine auf 100% gestreckte Produktbox.
Das Bild wird aber schon oben angezeigt.
Bei mir gibt es auch standardmäßig keine "box-basic.tpl", ist das wichtig, oder wird da auch das std template zurückgegriffen?
Danke
Grüße
Michael
vielen Dank!
wenn du bei dir keine box-basic.tpl angelegt hast, wird auf die vom Bare Theme zurueckgegriffen. Daher sollte das kein Problem darstellen was die Funktionalitaet angeht.
Gruß
Alexander
erstmal Danke für die ganze Arbeit die du hier rein steckst!
Jedoch wüsste ich gerne, wie ich dieses listing nur für die Desktop Ansicht hinbekomme. Denn in der Mobilen Ansicht sieht das alles zu sehr gequetscht aus.
Könntest du mir diesbezüglich helfen?
vielen Dank!
Damit es auf der mobilen Ansicht nicht zerquetscht aussieht musst du die Anpassungen fuer die Desktop Ansicht ueber sogenannte Media Queries steuern.
Unter Punkt 4 auf https://www.8mylez.com/blog/logo-groesse-anpassen/ siehst du ab Zeile 13 wie die Media Queries verwendet werden. In dem Beispiel gelten die Anpassungen bereits ab der Tablet Ansicht. Wenn dir das immer noch zu schmal ist, kannst du statt @tabletViewportWidth in Zeile 13 entsprechend @desktopViewportWidth verwendet.
Gruß
Alexander
Dein Link zu den Media Queries habe ich zwar verstanden (habe mein Logo ebenfalls mit deinem Tut angepasst). Für das Listing muss ich doch aber nicht in dieser Datei etwas editieren oder?
du kannst statt wie oben im Beitrag im normallfall (Mobil) die Breite auf 50% setzen und mit dem Media Query ab Tablet oder Dekstop die Breite auf 33% setzen.
Dann sollte das ganze auf kleinen Geräten mehr Platz haben.
Viele Grüße
Ewald
ich hab nur das Problem, dass ich nicht mehr zu detaillierten Produktansicht wechseln kann. die Produkt box bleibt jetzt egal bei welcher Einstellung bei "nur wichtige Informationen" Ansicht. wie kann ich auf die detaillierten Informationen wechseln, bei der das Bild seitlich ist?
hast du eventuell noch das custom listing im Produkt Layout hinterlegt?
Viele Grüße
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 ;)
danke für den Tipp, gebe ich weiter :-)
LG
Marc
Problem mit 5.4.2?
ja bei der 5.4 Version gibt es ein paar Änderungen die man beachten muss. Ich versuche die neuen Anpassungen noch einzubinden.
Viele Grüße
Ewald
mit der Version 5.4 hat sich einiges geändert. Hierfür haben wir nun eine eigene Anleitung zur Umsetzung ab Shopware 5.4:
https://www.8mylez.com/blog/eigenes-listing-layout-erstellen-5-4/
Viele Grüße
Ewald
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?
{elseif $productBoxLayout == 'list'}
{include file="frontend/listing/product-box/box-list.tpl"}
gute Arbeit! :)
Viele Grüße
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
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
Die "listing_custom.tpl" war nicht richtig angelegt.
gute Arbeit! So ein Tippfehler übersieht man gerne.
Viele Grüße
Ewald
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?
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
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?
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
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 ?
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
ich habe das selbe Problem, dass das AJAX geladene Layout nicht mehr dem custom_listing entspricht.
du musst in deinem Theme auf das PreDispatch Event subscriben und den Ordner mit den Views entsprechend zum Template hinzufügen.
Gruß
Alexander
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
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
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
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
es folgt demnächst ein neues Tutorial für die 5.4.
Viele Grüße
Ewald
https://www.8mylez.com/blog/eigenes-listing-layout-erstellen-5-4/
Was denkst du?