[quote=“trixx”][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] versuch mal den “light” code den ich oben gepostet habe, das müsste die anderen boxen nicht verändern.
[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%;} } 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] Moin zusammen, läuft! :thumbup: 
Für alle anderen kurz zusammengefasst: 1. Anleitung von Hostianer folgen. 2. Für größere Produktbilder: In der product-image.tpl die Thumbnails-Größe entsprechend ändern und im Backend bei der Medienverwaltung/Artikel entsprechende Thumbnails anlegen und neu generieren. Die product-image.tpl liegt unter fogendem Pfad: themes/Frontend/Bare/frontend/listing/product-box/product-image.tpl Zuständig dafür ist folgender Block: {block name='frontend\_listing\_box\_article\_image\_picture\_element'} ![{$desc}]( "{$desc|truncate:25:") {/block} Ich habe hier jetzt die komplette Datei aus dem Bare Template genommen, entsprechend angepasst und in meinem Theme unter selbigen Pfad abgelegt. Da man ja, soweit ich weiß, keinen einzelnen Block überschreiben kann!? Bzw. könnte ich ihn nur leer lassen, will ich aber ja nicht oder eben mit append und prepend am Anfang oder am Ende Inhalt dranhängen, will ich aber auch nicht. 3. Die product-box.less mit unserer Tumbnail-Größe erweitern. Bei mir sieht das jetzt wie folgt aus: // 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 { .image--top(300); width: 33.333%; } } Danke an alle Helfer! LG Daniel
1 „Gefällt mir“
Mir ist gerade beim erstellen einer Einkaufswelt aufgefallen, dass sich die Funktion “Artikel” auch auf die Thumbnails bezieht. Meine Einkaufswelt mit eingefügten Artikeln ist komplett zerschossen. Gibbet dafür auch eine Lösung?
vielen Dank Dank, hat super geklappt.:thumbup: Ein Problem hab ich aber dadurch; bei der Slide z.B. zuletzt gesehen liegt das Bild jetzt über den Title (Marke/Beschreibung/Preis). Bisher noch kein Erfolg bei meinen versuchen…
[quote=„Kon“]Mir ist gerade beim erstellen einer Einkaufswelt aufgefallen, dass sich die Funktion „Artikel“ auch auf die Thumbnails bezieht. Meine Einkaufswelt mit eingefügten Artikeln ist komplett zerschossen. Gibbet dafür auch eine Lösung?[/quote] Kann eigentlich nicht sein. Nutze auch eine EW mit Artikeln auf der Startseite. Da ist aber auch nach den Änderungen noch alles wie vorher. Da hat sich bestimmt irgendwo ein Fehler bei Dir eingeschlichen. Gesendet von meinem MX4 mit Tapatalk
[quote=„derButch“]vielen Dank Dank, hat super geklappt.:thumbup: Ein Problem hab ich aber dadurch; bei der Slideshop z.B. zuletzt gesehen liegt das Bild jetzt über den Title (Marke/Beschreibung/Preis). Bisher noch kein Erfolg bei meinen versuchen…[/quote] Was aber ja auch korrekt so ist. Ist im offiziellen Demoshop auch so: http://www.shopwaredemo.de/zartbitter-mit-minze-119 Oder meinst Du etwas anderes? Gesendet von meinem MX4 mit Tapatalk
Ne, ich meine das der Text hinter dem Bild steht und nicht drunter: Artikel Slider 
Zuletzt gesehen 
Gruß
[quote=“derButch”]Ne, ich meine das der Text hinter dem Bild steht und nicht drunter: Artikel Slider Zuletzt gesehen Gruß[/quote] Ach so, das hatte ich Anfangs auch als ich noch einen anderen Code verwendet hatte. Mit dem aktuellen Code wird nur das Kategorielisting angesprochen. Die Bilder unten bleiben aber klein. Will man diese nun auch groß haben, müssen wohl noch weitere Dinge angepasst werden. Welche das aber genau sind kann ich Dir auch nicht sagen, so gut kenne ich mich leider auch nicht aus. Die entsprechenden Stellen sollte man aber mit firebug ausfindig machen können. Gesendet von meinem MX4 mit Tapatalk
… ja z.B. Last-seen products, habs aber noch nicht hinbekommen.
.box--slider .product--image { height: x.xrem;} .box--slider {.image--top(100); } Damit kann man noch experimentieren.
Hi, ich hätte auch Interesse an einem 3-spaltigen Kategorie-Listing mit großem Bild. Ich möchte aber nicht in den Dateien selber etwas ändern. Läßt sich dafür kein Plugin bekommen? Tweedy
[quote=“trixx”][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%;} } 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] Moin zusammen, läuft! :thumbup: Für alle anderen kurz zusammengefasst: 1. Anleitung von Hostianer folgen. 2. Für größere Produktbilder: In der product-image.tpl die Thumbnails-Größe entsprechend ändern und im Backend bei der Medienverwaltung/Artikel entsprechende Thumbnails anlegen und neu generieren. Die product-box.tpl liegt unter fogendem Pfad: themes/Frontend/Bare/frontend/listing/product-box/product-box.tpl Zuständig dafür ist folgender Block: {block name='frontend\_listing\_box\_article\_image\_picture\_element'} ![{$desc}]( "{$desc|truncate:25:") {/block} Ich habe hier jetzt die komplette Datei aus dem Bare Template genommen, entsprechend angepasst und in meinem Theme unter selbigen Pfad abgelegt. Da man ja, soweit ich weiß, keinen einzelnen Block überschreiben kann!? Bzw. könnte ich ihn nur leer lassen, will ich aber ja nicht oder eben mit append und prepend am Anfang oder am Ende Inhalt dranhängen, will ich aber auch nicht. 3. Die product-box.less mit unserer Tumbnail-Größe erweitern. Bei mir sieht das jetzt wie folgt aus: // 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 { .image--top(300); width: 33.333%; } } Danke an alle Helfer! LG Daniel[/quote] Guten Morgen, habe mir ein Backup eingespielt, um an die Sache noch mal steppweise zu analysieren und noch mal zu ändern. Dabei ist mir aufgefallen, dass ich keine product-box.tpl (auch nicht unter Bare)habe und ich die Änderungen in der box-basic.tpl geändert hatte 
Gibt es irgendwelche Versionsunterschiede? Ich benutze 5.1.2… wobei ich es im Backup von der 5.01 Version auch nicht drin habe?
[quote=“derButch”][quote=“trixx”][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%;} } 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] Moin zusammen, läuft! :thumbup: Für alle anderen kurz zusammengefasst: 1. Anleitung von Hostianer folgen. 2. Für größere Produktbilder: In der product-image.tpl die Thumbnails-Größe entsprechend ändern und im Backend bei der Medienverwaltung/Artikel entsprechende Thumbnails anlegen und neu generieren. Die product-box.tpl liegt unter fogendem Pfad: themes/Frontend/Bare/frontend/listing/product-box/product-box.tpl Zuständig dafür ist folgender Block: {block name='frontend\_listing\_box\_article\_image\_picture\_element'} ![{$desc}]( "{$desc|truncate:25:") {/block} Ich habe hier jetzt die komplette Datei aus dem Bare Template genommen, entsprechend angepasst und in meinem Theme unter selbigen Pfad abgelegt. Da man ja, soweit ich weiß, keinen einzelnen Block überschreiben kann!? Bzw. könnte ich ihn nur leer lassen, will ich aber ja nicht oder eben mit append und prepend am Anfang oder am Ende Inhalt dranhängen, will ich aber auch nicht. 3. Die product-box.less mit unserer Tumbnail-Größe erweitern. Bei mir sieht das jetzt wie folgt aus: // 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 { .image--top(300); width: 33.333%; } } Danke an alle Helfer! LG Daniel[/quote] Guten Morgen, habe mir ein Backup eingespielt, um an die Sache noch mal steppweise zu analysieren und noch mal zu ändern. Dabei ist mir aufgefallen, dass ich keine product-box.tpl (auch nicht unter Bare)habe und ich die Änderungen in der box-basic.tpl geändert hatte Gibt es irgendwelche Versionsunterschiede? Ich benutze 5.1.2… wobei ich es im Backup von der 5.01 Version auch nicht drin habe?[/quote] Nicht product-box.tpl sondern product-image.tpl. Da hat sich der Fehlerteufel eingeschlichen. Steht aber trotzdem im Text darüber richtig in der Beschreibung. Die image.tpl ist für die Bilder zuständig. Gesendet von meinem MX4 mit Tapatalk
…ach ich Depp, hatte ich auch gemacht. Danke für die schnelle Antwort.
Da ich jetzt die Tage noch einmal ein wenig Luft habe: Was genau funktioniert an meinem Tutorial nicht, damit ich dieses einmal anpassen kann oder ggf. den zweiten Teil schreiben kann?
das Problem waren die Bildergrößen: aus diesem hier: .box--minimal .product--image { .product--image { .unitize-height(200); } } wurde dieses hier: @media screen and(min-width: @desktopViewportWidth) { .box--minimal { .image--top(200); width: 33.333%; } Damit tauchte ein neues Problem auf da die Bilder der Slider nicht vergößert wurden. Hier hatte ich zum Schluss noch zwei Möglichkeiten entdeckt: .box--slider .product--image { height: x.xrem;} .box--slider {.image--top(100); } Das war die Kurzfassung^^ Bei dem Tutorial geht es ja bisher um die “Dreispaltigkeit” und noch nicht um die Bildgröße, von daher pass da alles glaube ich mal.
Gibt es noch eine Möglichkeit den Abstand zwischen der Artikelbeschreibung und dem Preis zu verringern? Oder vielleicht, dass man die gesamte Produktbox in der Höhe verringert? Ich verwende eine komplett weißen Hintergrund ohne Trennlinien. würde es gerne beibehalten aber so ist beim scrollen nicht eindeutig zuzuordnen zu welchem Produkt der Preis gehört (große Abstände) hier der Link http://kuechenscharf.de/kuechenhelfer/aufbewahrung/
Ich würde die Artikelübersicht gerne einspaltig machen.
Dazu bin ich wie folgt vorgegangen:
„.box–minimal {
width: 100%;“
auf von 33% auf 100% geändert in der product-box.less
und dann noch die all.less mit folgendem Inhalt erstellt:
@import „_modules/product-box.less“;
Aber es ändert sich nichts.
Ich würde die Artikelübersicht gerne einspaltig machen.
Dazu bin ich wie folgt vorgegangen:
„.box–minimal {
width: 100%;“auf von 33% auf 100% geändert in der product-box.less
und dann noch die all.less mit folgendem Inhalt erstellt:
@import „_modules/product-box.less“;
Aber es ändert sich nichts.
Hallo,
diese Doku wird dir sicher weiterhelfen: Example - Custom listing page .
Beste Grüße
Sebastian