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

Ich habe nun einige Tage intensiv damit verbracht Einkaufswelten-Seiten auf SW5 konformes Aussehen anzupassen. So schön auf der einen Seite ist, für jeden Screenview eine eigene Seite zu schaffen, so viel Arbeit macht das auf der anderen Seite. Bei den Bildern kann man sich einen individuellen Workflow erstellen und Bilder dann immer nach der selben Formel in den verschiedenen Größen beschneiden. Das geht dann einigermaßen (obwohl einem die Retina-Auflösungen dann auch einen Strich durch die Rechnung machen). AAAbeeer, das die HTML-Elemente in einer festen Höhe erstellt werden, ist ein absoluter Albtraum! Man hat im Ergebnis immer große Lücken in der Seite, zwischen dem HTML Element und dem nächsten Element, oder man hat Inhalt abgeschnitten, wenn man wie ich den Scrollbalken per css abgeschaltet hat. Scrollbalken geht gar nicht, finde ich! Deswegen frage ich mich: Es muss doch möglich sein, per css dem HTML-Element in der Einkaufswelt beizubringen immer 100% der benötigten Höhe aufzuspreizen? Oder wäre das vielleicht eine Idee für ein eigenes Einkaufswelten Widget? Trixx hier aus dem Forum hatte ein gute Idee: so ein JS-Script mäßiges „mehr…“ Feld, welches dann die Einkaufswelt weiter aufspreizt wenn man draufklickt! Fände ich auch schick und akzeptabel. Sollte ich ein Ticket für Improvement aufmachen? Leider (ist „meine“ Meiung!) ist dieses Forum hier vergleichsweise wenig aktiv. Es gibt viele Posts die einfach unbeantwortet bleiben usw. Dennoch würde ich mich freuen, wenn in diesem Punkt mal möglichst viele hier wenigstens Ihre Meinung dazu kundtun, vielleicht gewinnt dann ja ein Plugin-Entwickler die Motivation sowas zu basteln, oder genauso gut, jemand erklärt mal wie man das mit Bordmitteln bewältigt bekommt. …Ich finde das ist nämlich eine echte Fehlentwicklung eines ansonsten doch tollen Versionssprungs…

Wie wäre es mit dem Ansatz über jQuery das Parent Element von emotion–html umzustylen auf height:auto und overflow:visible? Ich habe grade mal quick und dirty versucht jQuery in den Einkaufswelten zu nutzen, bin aber gescheitert daran, dass die Einkaufswelten ja erst von Ajax nachgeladen werden. damit läuft jQuery(document).ready(function($) { $(this).parent().css("height","auto").css("overflow","visible"); }); schon mal nicht. Jemand einen Tipp?

Also wir haben auch das problem, wohl weil wir vom Conexco Template, welches 100% höhe hatte bei allen Einkaufswelten Elementen, auf das Shopware responsive Umsteigen, und nun einfach keine Einkaufswelt mehr passt.

[quote=“shopbesitzer”]Also wir haben auch das problem, wohl weil wir vom Conexco Template, welches 100% höhe hatte bei allen Einkaufswelten Elementen, auf das Shopware responsive Umsteigen, und nun einfach keine Einkaufswelt mehr passt.[/quote] Das ließe sich doch über Templatesystem lösen, oder? Einfach alle Reihen auf heigth:Auto und overflow:visible sollte machbar sein. Wie sich das z.B. mit dem Slider verträgt und den anderen muss man mal schauen. Ich glaube als Workaround ist jQuery erst mal ganz passabel. Ich werde das nächste Woche mal angehen.

Ich habe ein Plugin, mit dem ich pures html in die Einkaufswelten laden kann. Wenn ich dort [code][/code] einfüge gehts. Ist aber keine Lösung für große Shops, wo nicht jeder Marketingmensch im html rumfuchteln soll. Evtl. klappt das auch über Einbindung in die Theme.php, wird dann aber bei jedem ajax aufruf angestoßen, was auf die Performance geht.

1 Like

Das hört sich doch schon mal gut an. Meinst Du das hier: http://store.shopware.com/coe8629121483 … elten.html

[quote=“senana”]Das hört sich doch schon mal gut an. Meinst Du das hier: http://store.shopware.com/coe8629121483 … elten.html[/quote] Ich habe nach der Plugin Anleitung selber eins geschrieben. Ich kann es am Sonntag mal hochladen. Ist lange nicht so hübsch und umfangreich wie das Kaufplugin, funktioniert aber ganz gut.

Ok, das muss ich dann mal probieren mit deinem Workaround! Das könnte für mich schon mal ein echtes Improvement sein. Es ist ja gerade bei mobilen Ansichten so, dass mit der gegenwärtigen Funktion (Scrollbalken mal ausgenommen) selbst wenn Du die Seiten für z.B. das Iphone 6 optimiert hast, im Iphone 4 die HTML Elemente überdeckt werden (oder eben riesen Lücken im iPhone 6) je nach dem wie man optimiert. Allen kann man es ohne die 100% Höhe nicht recht machen. Wenns klappt wäre ich schon mal echt erleichtert :slight_smile:

Danke! Über das Template funktioniert es schon ganz gut mit dem HTML, versuche ich das bei den Bannern ebenfalls verschwinden die Banner-Bilder, da muss man wohl noch am CSS basteln …

Hallo, sorry für die verspätete Antwort. Ich bin über ein „kleines“ Problem gestolpert. Es funktioniert zwar prima, das Parent Element auf overflow:visible und height:auto mit dem jQuery Code zu ändern, jedoch passt sich das Gesamtelement erst nach einem Viewport Wechsel an (z.B. Browserfenster verkleinern). Jemand eine Idee? Ich hänge auf jeden Fall mal mein Plugin an, damit jeder selbst ein bisschen rumprobieren kann. MfG PureHTMLWidget

Manchmal sieht man den ganzen Wald vor lauter Bäumen nicht! Die Template Engine bei Shopware ist sehr mächtig! Ich habe in meinem Theme die index.tpl (unter “themes/Frontend/Templatename/widgets/emotion”) etwas angepasst und alles läuft wie am Schnürchen. Bei Zeile 45 habe ich folgendes Element: [code]

[/code] geädert zu: Ich habe nur ein paar limitierte Test durchgeführt, wäre nett, wenn ihr etwas Feedback geben könnt, ob und wie es bei euch läuft. MFG

6 Likes

Hi [blu:kauu], erst mal Danke für Deinen Beitrag. Das sieht doch sehr gut aus. Ich werde aber leider erst in ein paar Tagen dazu kommen das auch durchzutesten. Nur eine Frage kommt mir direkt in den Sinn: Braucht man mit der if/else Schleife im Template jetzt das JS-Snippet gar nicht mehr?

[quote="[blu:kauu]"]Manchmal sieht man den ganzen Wald vor lauter Bäumen nicht! Die Template Engine bei Shopware ist sehr mächtig! Ich habe in meinem Theme die index.tpl (unter „themes/Frontend/Templatename/widgets/emotion“) etwas angepasst und alles läuft wie am Schnürchen. MFG[/quote] Ich habe es gerade eingebaut und so wie es aussieht funktioniert es. Ich will heute Abend auf Shopware5 umstellen und daher kommt die Lösung gerade zur richtigen Zeit. Danke nochmal [blu:kauu] :thumbup: Ps. was mich immer ein wenig gewundert hat warum es bei den Kategorie-Texten schon so funktioniert und bei den Einkaufswelten von :shopware: anders gestaltet wurde. [quote=„senana“] Braucht man mit der if/else Schleife im Template jetzt das JS-Snippet gar nicht mehr?[/quote] Ich habe jetzt die JS-Snippet nicht eingebaut.

[quote=„senana“]Hi [blu:kauu], Braucht man mit der if/else Schleife im Template jetzt das JS-Snippet gar nicht mehr?[/quote] Genau, jQuery fällt weg. Aber das HTML Plugin kann noch für viele Dinge nützlich sein. Ich hatte es eigentlich gebastelt, um die _components in den Einkaufswelten einzubinden. (https://developers.shopware.com/styletile/)

Hallo [blu:kauu], hab das jetzt mal ein bisschen getestet. Bei mir klappt das auch super mit der automatischen Höhe, nachdem ich das Template angepasst habe. Beide Daumen hoch! :thumbup: :thumbup: Aber sollte man das nicht updatesicher ändern? Ideal wäre vermutlich dafür ein eigenes Template zu machen. Ich habe nur gerade auf die schnelle nicht gefunden, wie man das genau bei den Einkaufswelten macht. Btw: das Pure-Html Plugin dass Du hier zur Verfügung gestellt hast, hat bei mir zunächst funktioniert. Nachdem ich die Änderungen in der themes/Frontend/Templatename/widgets/emotion/index.tpl gemacht habe und dann die themes neu kompiliert habe, will es nix mehr anzeigen. Keine Ahnung ob es da einen Zusammenhang gibt/geben sollte…

Hallo Uwe, ja, ich habe das auch so gemacht, dass ich die original index.tpl in das Verzeichnis von meiner custom_theme kopiert habe, und dort die Anpassung gemacht habe. Nur, wenn die Original index.tpl eine Änderung mit dem nächsten Update erhält, dann wird diese natürlich nicht berücksichtigt. Besser wäre schonmal nur den Block anzupassen. Aber eventuell macht man eher noch ein eigenes Template, das man in der Einkaufswelt auswählen kann.

das Problem an der ganzen Sache ist das ja die Höhe der kompletten Einkaufswelt immer neu berechnet werden muss und das kannst du damit erreichen den Code genau an dieser Stelle zu ändern. Theoretisch brauchst du ja nicht die komplette /widgets/emotion/index.tpl kopieren, sondern nur den Block "{block name=“widgets/emotion/index/element”} anpassen, aber der hat auch viele Einträge. Schade das der Container "

[quote]Schade das der Container "

1 Like

[quote=„thom“][quote]Schade das der Container "