HTML-Element in der Einkaufswelt bei Masonry auf 100% Höhe

Ich habe noch einen Bug in meinem Workaround gefunden. Wenn man in das HTML Element ein Bild einbindet das über die komplette Breite geht, erfolgt die Höhenberechnung nicht korrekt (wahrscheinlich weil das Bild noch nicht komplett geladen ist, wenn die Höhe berechnet wird. Daher ist der Fehler nach neuladen auch weg, da das Bild dann im Cache ist) Ich habe dafür einen weiteren Workaround gefunden, allerdings muss das Seitenverhältnis des Bildes bekannt sein

1 Like

Hallo zusammen, erst einmal vielen Dank an [blu:kauu]für den tollen Lösungsansatz. Funktioniert bei mir auch gut in Firefox, leider aber nciht bei Chrome oder Opera. Dort wird scheinbar tatasächlich bei der anfänglichen Berechnung die Bildhöhe mit 0 angesetzt, danach das Bild geladen und schiebt dann den Inhalt unten raus. Hat schon jemand eine Lösung dafür? Ich habe schon versucht, die Bildhöhe als Prozentzahl anzugeben, aber das hat leider keinen positiven Effekt gehabt, nur absolute Angabe in Pixeln hat funktioniert. Danke Daniel

Hallo zusammen, erstmal Danke an [blu:kauu]. Ich suche auch noch nach einer Lösung, wenn man ein Bild mit in das HTML Element einbaut. Als Idee: wenn man das Bild über das Banner Element einbindet und darunter das HTML Element mit Auto Height und wenn man dann die beiden Elemente verketten könnte, so dass Sie auch Responsive zusammenbleiben;). Gruß fogyhouse

Hallo Ihr Lieben, hier wurden einige interessante Ansätze für das HTML Element gesammelt. In der Tat habt Ihr Recht, dass das HTML Element in seiner jetzigen Form nicht optimal einsetzbar ist. Das liegt vor allem an der Tatsache, dass wir uns in einem Gestaltungsraster mit festen Zeilenhöhen bewegen. Die Einkaufswelten wurden ursprünglich für das Gestalten von visuell geprägten Landingpages konzipiert, wo gewisse Maße eine Grundvorraussetzung für fluide Layouts sind. Lange Texte spielten dabei meist nur eine untergeordnete Rolle. Mittlerweile wird das Potenzial der Einkaufswelten aber auch immer mehr für Inhaltsseiten verwendet. Dessen sind wir uns bewusst und wollen entsprechend die Funktionalität der Einkaufswelten auch in Zukunft weiter ausbauen. Dafür haben wir besonders viel Feedback aus der Community gesammelt. Die Vorschläge aus diesem Thread habe ich bereits ebenfalls mit aufgenommen. Was die Gestaltung von Text->Bild Kombinationen und größeren Inhaltsseiten angeht, wird es von uns in einiger Zeit weitere Funktionalitäten geben. Seid also gespannt :wink: Solltet Ihr noch weitere Anregungen zu den Einkaufswelten haben, freue ich mich auf interessante Ideen in diesem Beitrag. Sonnige Grüße, Phil

Hallo,

dieser Ansatz hier ist nun schon eine Weile her und hat auch super funktioniert - bis eben Shopware 5.2 rauskam. Jetzt, nach dem Update funktionieren die Einkaufswelten nicht mehr, weil man eben die Datei

themes/Frontend/Templatename/widgets/emotion/index.tpl

überschreibt und Shopware grundlegende Änderungen in dieser Datei vorgenommen hat.

Hat jemand schon eine Lösung wie man die Höhe wieder auf 100% bekommt ohne Scrollbalken für Shopware 5.2?

Beste Grüße,

kweb

Hallo,

das geht aber jetzt auch standardmäßig. Das ist der neue Modus “Zeile”

Es gibt auch ein Video zu den neuen Einkaufswelten. Hast du dir die Neuerungen schon genauer angesehen?

Sebastian

Hallo,

hier das Video mit einer kleinen Einführung in die Funktionen:
Shopware 5 - Einführung in das Einkaufswelten Modul | Screencast - YouTube

Sonnige Grüße,
Phil

Hi, danke für Eure Antworten, ich habe zwei Fragen bezüglich der Umstellung auf “Zeilen”: 1. Wir haben in unserer Einkaufswelt Kategorie-Teaser. Diese werden nach dem Umstellung auf Zeilen extrem hoch dargestellt, siehe: http://kosmetik-kaufen24.de/marken/biodroga-md/ Vorher waren sie flacher und kompakter - jetzt sind sie extrem Hochkant. 2. Bei der hier gebrachten “Lösung” mit der Anpassung in der themes/Frontend/Templatename/widgets/emotion/index.tpl hatte man den Vorteil, dass sie die Änderung nur auf die HTML-Elemente bezogen. Soll heißen man brauchte nur eine Einkaufswelt anlegen, die Elemente wie Kategorieteaser usw. passten sich an und die HTML Bereiche hatten die 100% Höhe ohne Scrollbalken. Dies ist mit Zeilen nicht zu bewerkstelligen, richtig?! Also ich muss im Prinzip 3-4 Einkaufswelten anlegen (Desktop, Tablet, Smartphone) und für die Responsive Funktion zu sorgen? Beste Grüße, kweb

Kurzer Nachtrag: Habe die Höhe der Kategorieboxen per CSS angepasst mittels: .emotion–mode-rows .emotion–category-teaser{ height: 10.5rem !important; } Ich hoffe das kann man so machen ohne weitere Konsequenzen.

@[blu:kauu] schrieb:

Ich habe noch einen Bug in meinem Workaround gefunden. Wenn man in das HTML Element ein Bild einbindet das über die komplette Breite geht, erfolgt die Höhenberechnung nicht korrekt (wahrscheinlich weil das Bild noch nicht komplett geladen ist, wenn die Höhe berechnet wird. Daher ist der Fehler nach neuladen auch weg, da das Bild dann im Cache ist)
Ich habe dafür einen weiteren Workaround gefunden, allerdings muss das Seitenverhältnis des Bildes bekannt sein

Hi, wo finde ich denn den Workaround? Ich habe auch das Problem mit den noch nicht geladenen Bildern im Cache.

Vielen Dank für die schnelle Hilfe! @[blu:kauu]