Servus zusammen! wie genau kann ich mein Kategorie Listing dreispaltig einstellen? Über die Backend Funktion geht das leider nicht. Ich bin neu im Bereich CSS und co. Kann man mir jemand kurz und bündig Schritt für Schritt beschreiben welche Datei ich in welchem Ordner wie umändern oder hinzufügen muss? Ich habe bereits ein eigenes Template erstellt. Jetzt stehe ich aber auf dem Schlauch. Danke schonmal!!
Schau mal hier: https://shopwareianer.com/tutorials/sho … l-anpassen
2 „Gefällt mir“
jep vielen Dank!! Ich habe alles nach Anleitung durchgeführt. Nachdem ich im Backend das Theme kompiliert habe erscheint die Fehlermeldung: Parse Error: unexpected input in all.less line 1 @include “_modules/product-box.less”; das wundert mich da ich exakt der Beschreibung gefolgt bin. Hast du eine Ahnung woran das nun liegen könnte?
[quote=„Kon“]jep vielen Dank!! Ich habe alles nach Anleitung durchgeführt. Nachdem ich im Backend das Theme kompiliert habe erscheint die Fehlermeldung: Parse Error: unexpected input in all.less line 1 @include „_modules/product-box.less“; das wundert mich da ich exakt der Beschreibung gefolgt bin. Hast du eine Ahnung woran das nun liegen könnte?[/quote] Hatte einen Schreibfehler drin. Habe den Artikel korrigiert. Es ist natürlich @import statt @include 
Spitze jetzt klappt es. Tausend Dank!! Allerdings habe ich festgestellt, dass ich mein eigentliches Problem damit immer noch nicht gelöst habe 
Ich bin davon ausgegangen, dass sich dadurch das Produktbild automatisch mit vergrößert. Fehlanzeige… Ist es möglich, dass nachträglich noch zu vergrößern? SO, dass sich die Breite des Bildes anpasst?
[quote=“Kon”]Spitze jetzt klappt es. Tausend Dank!! Allerdings habe ich festgestellt, dass ich mein eigentliches Problem damit immer noch nicht gelöst habe Ich bin davon ausgegangen, dass sich dadurch das Produktbild automatisch mit vergrößert. Fehlanzeige… Ist es möglich, dass nachträglich noch zu vergrößern? SO, dass sich die Breite des Bildes anpasst?[/quote] Dazu müsstest du noch die Höhe des Bild Containers anpassen. .box--minimal .product--image { .product--image { .unitize-height(200); } } 200 ist in dem Fall die Höhe des Bildes in px. Und ggf. neue Thumbnails erstellen mit neuer Größe. Vielleicht schreibe ich dazu heute Abend noch einen zweiten Teil. Habe es jetzt gerade nur fix aus dem Kopf gemacht und gerade nicht soviel Zeit.
1 „Gefällt mir“
Das wäre sensationell!! in welche Datei packe ich den Code nun hinein? (sorry für die Anfänger-Fragen)
[quote=„Kon“]Das wäre sensationell!! in welche Datei packe ich den Code nun hinein? (sorry für die Anfänger-Fragen)[/quote] Über dem @media screen and(min-width: @desktopViewportWidth) Danach Theme natürlich wieder neu kompilieren.
1 „Gefällt mir“
muss ich eine neu erstellte Thumbnailgröße dem aktuellen Template zuweisen? Die drei Standardgrößen sind ja irgendwie den drei Listing-Größen zugewiesen, oder?
Moin, ich hab mich da jetzt auch mal drangesetzt, da das schon cool ist. Dadurch dass man als Produkt Layout „Nur wichtige Informationen wählt“ ist die Kategorieansicht auf dem Smartphone auch schön zweispaltig. Nachteil waren immer die kleinen Bilder auf der Desktopansicht. 3-Spaltig gefällt mir gut, aber leider auch nur kleine Bilder. Ich hab´s jetzt aber soweit hinbekommen dass die Produktbilder Größer angezeigt werden. Zusätzlich mussten aber auch noch einige andere Sachen mit angepasst werden wie z.B. .product–box .product–image .image–element usw. Folgend einmal mein jetziger Inhalt der product-box.less // Führe diesen Code nur aus, wenn der Bildschirm // bzw. die Auflösung mindestens 1260px breit ist. // 78.75em = 1260px // @desktopViewportWidth 78.75em; @media screen and(min-width: @desktopViewportWidth) { .box--minimal { width: 33%; } } // Produktbox Bildgröße der Tumbnails (300px) @media screen and(min-width: @desktopViewportWidth) { .box--minimal .product--image { .product--image { .unitize-height(300); } } } // Produktbox Bildgröße @media screen and(min-width: @desktopViewportWidth) { .product--box .product--image .image--element { display: block; height: 200%; margin: 0 auto; position: relative; width: 100%; } } // Produktbox Größe @media screen and(min-width: @desktopViewportWidth) { .product--box .product--rating-container { display: block; height: 9.5625rem; margin-top: 150px; height: 20px; } } Das ganze lässt sich mit Sicherheit schöner gestalten, aber es funktioniert. Das ganze sieht jetzt wie folgt aus: Screenshot Eigentlich passt alles soweit, nur leider wird unten bei Zuletzt angesehen alles noch überlagert und die Produktbilder sind abgeschnitten. Werde mir die Tage das ganze wohl nochmal anschauen, aber mit der aktuellen schei…Erkältung brummt der Kopf gerade so richtig. 
Wäre aber cool wenn jemand nen Tipp hat wie man die Darstellung der Zuletzt angesehenen Artikel auch noch hinbekommt oder nochmal ne Anleitung basteln könnte o.Ä. lässt sich wie gesagt alles bestimmmt einfacher/eleganter umsetzen. 
LG
Ich werde den Artikel morgen einmal updaten, sodass hier auch die Bilder größer dargestellt werden und ggf. noch die Boxen für kleinere Auflösungen.
[quote=„kayyy“]Ich werde den Artikel morgen einmal updaten, sodass hier auch die Bilder größer dargestellt werden und ggf. noch die Boxen für kleinere Auflösungen.[/quote] Cool, danke! Gesendet von meinem MX4 mit Tapatalk
[quote=„trixx“] Wäre aber cool wenn jemand nen Tipp hat wie man die Darstellung der Zuletzt angesehenen Artikel auch noch hinbekommt oder nochmal ne Anleitung basteln könnte o.Ä. lässt sich wie gesagt alles bestimmmt einfacher/eleganter umsetzen. LG[/quote] Also ich würde vermuten wenn man vor alle Änderungen noch die Klasse .listing--container setzt, dann wird wirklich nur das listing verändert und die zuletzt angesehenen Artikel bleiben normal. Habe ich aber noch nicht getestet…
[quote=“Markus123”][quote=“trixx”] Wäre aber cool wenn jemand nen Tipp hat wie man die Darstellung der Zuletzt angesehenen Artikel auch noch hinbekommt oder nochmal ne Anleitung basteln könnte o.Ä. lässt sich wie gesagt alles bestimmmt einfacher/eleganter umsetzen. LG[/quote] Also ich würde vermuten wenn man vor alle Änderungen noch die Klasse .listing--container setzt, dann wird wirklich nur das listing verändert und die zuletzt angesehenen Artikel bleiben normal. Habe ich aber noch nicht getestet…[/quote] Hi, thx das funktioniert! :thumbup: Irgendwie greift der Codeabschnitt für die Thumbnails aber nicht: // Bildgröße Thumbnails (300px) @media screen and(min-width: @desktopViewportWidth) { .product--image image--element img { .unitize-height(300); } } Ich habe im Backend für die Artikelbilder folgende Thumbs erstellt: 200x200 300x300 600x600 1280x1280 Hier zieht er sich aber nun nur die 200x200 Thumbs, völlig egal was im Code steht, den kann ich sogar komplett weglassen, selbes Ergebnis. Lösche ich die 200er Thumbs zieht er sich die 300er, allerdings dann z.B. auch für die Bilder bei den zuletzt angesehenen Artikeln. Diese werden zwar nicht vergrößert dargestellt, was auch gut so ist, aber Firebug zeigt mir an dass er die 300x300 Thumbs lädt. Hier sollte er aber eigentlich weiterhin nur die 200er laden. Könnte ich aber noch mit leben. Leider ist man jetzt aber auch gezwungen in jeder Kategorie das Produkt Layout “Nur wichtige Informationen” zu wählen, da sobald ein anderes Layout gewählt wird, das ganze zerfleddert ist: Screen Man müsste also wohl zusätzlich noch, nur das Produkt Layout “Wichtige Informationen” ansprechen, sodass auch nur dies verändert wird und man noch die Freiheit hat für andere Kategorien, ein anderes Layout zu nutzen. Das ganze zieht schon wieder einen riesen Rattenschwanz nach sich… :x LG
Wenn du das Bild größer / höher machen möchtest, dann ist es .box--minimal .product--image box-minimal ist in dem Fall auch das „Nur wichtige Informationen“ Layout. Willst du die Thumbnailgröße ändern, musst du das array in der frontend/listing/product-box/product-image.tpl anpassen: https://github.com/shopware/shopware/bl … ge.tpl#L19 Möchtest du also deine 300x300 Images laden, dann wäre es {$sArticle.image.thumbnails[1].sourceSet} 0 ist immer das erste Thumbnailset, eins ist das zweite usw. Hier würde ich dann aber auch am besten direkt ein eigenes product-box layout machen.
[quote=„kayyy“]Wenn du das Bild größer / höher machen möchtest, dann ist es .box--minimal .product--image box-minimal ist in dem Fall auch das „Nur wichtige Informationen“ Layout. Willst du die Thumbnailgröße ändern, musst du das array in der frontend/listing/product-box/product-image.tpl anpassen: https://github.com/shopware/shopware/bl … ge.tpl#L19 Möchtest du also deine 300x300 Images laden, dann wäre es {$sArticle.image.thumbnails[1].sourceSet} 0 ist immer das erste Thumbnailset, eins ist das zweite usw. Hier würde ich dann aber auch am besten direkt ein eigenes product-box layout machen.[/quote] Danke erstmal. Irgendwie bin ich da zu blöd für. Habe jetzt hin und her gebastelt und mit folgendem Code passt eigentlich alles, außer dass ich kein anderes Produk Layout wählen kann, da dieses dann zerschossen ist: // Führe diesen Code nur aus, wenn der Bildschirm // bzw. die Auflösung mindestens 1260px breit ist. // 78.75em = 1260px // @desktopViewportWidth 78.75em; @media screen and(min-width: @desktopViewportWidth) { .box--minimal { width: 33%; } .listing--container .product--box .product--image .image--element { display: block; height: 200%; margin: 0 auto; position: relative; width: 100%; } .box--minimal .product--rating-container { display: block; height: 9.5625rem; margin-top: 150px; height: 20px; } } Dürfte daran liegen dass oben, wo ich die Bildgröße anspreche, kein .box–minimal mit drin ist und deshalb nun die Anweisung für jedes Layout greift. Füge ich aber .box–minimal dort mit ein, ignoriert er komplett meine Anweisungen und die Bilder werden wieder verkleinert dargestellt.
Eure Beiträge haben wirklich sehr geholfen! Erstmal danke dafür!! Ist es abschließend noch möglich die Abstände zwischen Thumbnail und Artikelbezeichnung zu verringern, sodass die Box nicht mehr so hoch ist? siehe SCREENSHOT
[quote=“Kon”]Eure Beiträge haben wirklich sehr geholfen! Erstmal danke dafür!! Ist es abschließend noch möglich die Abstände zwischen Thumbnail und Artikelbezeichnung zu verringern, sodass die Box nicht mehr so hoch ist? siehe SCREENSHOT[/quote] Das müsste die Höhe (height) von box–minimal box–rating-container sein. Musst aber bedenken, wenn Artikelbewertungen vorliegen, dort die Sterne angezeigt werden die brauchen dann auch Platz bzw. werden dort auch Produkteinheiten ausgegeben. Aber aktuell ist der Code eh nicht einsetzbar. Oder hast Du mein geschildertes Problem in den Griff bekommen? Dann wäre die Lösung nicht schlecht. Aber aktuell kann man kein anderes Produkt Layout mehr wählen, da dies aktuell ebenfalls die Styles erhält und dadurch zerfleddert dargestellt wird. Gesendet von meinem MX4 mit Tapatalk
[quote]// Führe diesen Code nur aus, wenn der Bildschirm // bzw. die Auflösung mindestens 1260px breit ist. // 78.75em = 1260px // @desktopViewportWidth 78.75em; @media screen and(min-width: @desktopViewportWidth) { .box--minimal { width: 33%; } .listing--container .product--box .product--image .image--element { display: block; height: 200%; margin: 0 auto; position: relative; width: 100%; } .box--minimal .product--rating-container { display: block; height: 9.5625rem; margin-top: 150px; height: 20px; } } Dürfte daran liegen dass oben, wo ich die Bildgröße anspreche, kein .box–minimal mit drin ist und deshalb nun die Anweisung für jedes Layout greift. Füge ich aber .box–minimal dort mit ein, ignoriert er komplett meine Anweisungen und die Bilder werden wieder verkleinert dargestellt.[/quote] Man kann es auch mal so testen ohne das image-element zu verändern: in der pruduct-image.tpl die thumbnail auf 1 geänert. und dann in der product-box.less: @media screen and(min-width: @desktopViewportWidth) { .box--basic { .image--left(200);} .box--minimal { .image--top(200); width: 33.333%;} } Es wird hier aber nur das listing verändert. Die box–basic habe ich bei mir so eingestellt weil ich da ein größeres Bild haben wollte. Ich habe es jetzt getestet mit der Box minimal und es geht auch dort einwandfrei ohne weitere Probleme oder Rattenschwänze :D. vielleicht noch interessant zu wissen das man mit less und .image–top oder .image–left einstellen kann ob das Produktbild Oben oder auf der Seite angezeigt wird
[quote=“Markus123”][quote]// Führe diesen Code nur aus, wenn der Bildschirm // bzw. die Auflösung mindestens 1260px breit ist. // 78.75em = 1260px // @desktopViewportWidth 78.75em; @media screen and(min-width: @desktopViewportWidth) { .box--minimal { width: 33%; } .listing--container .product--box .product--image .image--element { display: block; height: 200%; margin: 0 auto; position: relative; width: 100%; } .box--minimal .product--rating-container { display: block; height: 9.5625rem; margin-top: 150px; height: 20px; } } Dürfte daran liegen dass oben, wo ich die Bildgröße anspreche, kein .box–minimal mit drin ist und deshalb nun die Anweisung für jedes Layout greift. Füge ich aber .box–minimal dort mit ein, ignoriert er komplett meine Anweisungen und die Bilder werden wieder verkleinert dargestellt.[/quote] Man kann es auch mal so testen ohne das image-element zu verändern: in der pruduct-image.tpl die thumbnail auf 1 geänert. und dann in der product-box.less: @media screen and(min-width: @desktopViewportWidth) { .box--basic { .image--left(200);} } .box--minimal { .image--top(200); width: 33.333%; } Die box–basic habe ich bei mir so eingestellt weil ich da ein größeres Bild haben wollte. Ich habe es jetzt getestet mit der Box minimal und es geht auch dort einwandfrei ohne weitere Probleme oder Rattenschwänze :D. vielleicht noch interessant zu wissen das man mit less und .image–top oder .immage–left einstellen kann ob das Produktbild Oben oder auf der Seite angezeigt wird[/quote] Hey, danke, werde ich morgen direkt mal probieren, sobald ich wieder am Rechner sitze. LG Gesendet von meinem MX4 mit Tapatalk