Ein weiteres Problem, mit dem immer wieder an uns herangetreten wird, betrifft die Einkaufswelten unter Shopware 5. Genaugenommen die HTML-Einkaufwelt Elemente.
War es im conexco Responsive Template für Shopware 4 noch so, dass die HTML-Elemente sich in ihrer Höhe noch automatisch an den Inhalt anpassten, muss man im Shopware 5 Standard-Theme seine Höhe selbst definieren und hat dadurch entweder hässliche Scrollbalken, oder zu viel Whitespace im Element.
Buchtipp:
Ich habe bei Amazon ein Buch entdeckt – ein absolutes muss für jeden Shopware-Nutzer. Viele hilfreiche Tipps & Tricks, Praxisbeispiele und hilfreiche Informationen für Shopware-Neulinge und Profis:
Abhilfe schafft eine kleine Anpassung im Theme:
Zunächst muss folgende Datei imBare Theme kopiert und ins eigene Theme eingefügt werden:
themes/Frontend/Bare/widgets/emotion/index.tpl
Die neue “eigene” Datei liegt nun unter
themes/Frontend/DEINTHEME/widgets/emotion/index.tpl
Diese Datei muss jetzt an Zeile 45 wie folgt angepasst werden:
Code alt:
1 2 3 4 5 6 |
<div class="emotion--element column--{$itemCols} row--{$itemRows}" style="padding-left: {$cellSpacing / 16}rem; padding-bottom: {$cellSpacing / 16}rem; height: {$itemHeight / 16}rem; top: {$itemTop / 16}rem; left: {$itemLeft}%;"> |
Code neu:
1 2 3 4 5 6 7 8 9 10 |
<div class="emotion--element aaaa column--{$itemCols} row--{$itemRows}" style="padding-left: {$cellSpacing / 16}rem; padding-bottom: {$cellSpacing / 16}rem; {if $template == 'component_html'} height: auto; {else} height: {$itemHeight / 16}rem; {/if} top: {$itemTop / 16}rem; left: {$itemLeft}%;"> |
Was machen wir hier?
Ganz einfach: Wir fragen im DIV-Block per IF-Abfrage, ob es sich hierbei um ein HTML-Einkaufswelt Element handelt – und falls ja, setzen wir die höhe auf “auto”.
Damit wird der Block nicht mehr in der Höhe begrenzt und die “Scrollbalken” erscheinen nicht mehr. Das macht vorallem dann Sinn, wenn ein HTML-Einkaufswelt Element in Shopware über die ganze Breite geht und Text (z.b. bei einer Landingpage) enthält und der Text sich immer wieder verändert.
27 Comments
Stefan
17. November 2015 at 17:24
Vielen Dank genau nach solch einer Lösung habe ich gesucht. leider gibt es aber immer noch ein Problem sofern man in dem HTML Element zur Auflockerung Bilder einfügt. Haben Sie hierfür auch eine einfache Lösung?
AntwortenOliver Kasper
17. November 2015 at 18:00
Hey Stefan,
ich habe es gerade mal getestet. Bei mir wird auch bei eingefügten Bildern die Höhe des Einkaufwelt-Elements automatisch dem Inhalt angepasst.
Hast Du mal einen Link, wo ich mir die Geschichte ansehen kann?
Viele Grüße,
AntwortenOliver Kasper
Stefan
18. November 2015 at 10:25
Hallo Oliver,
vielen Dank für deine schnelle Antwort. Du kannst das direkt auf folgender Seite gut sehen. http://www.vitalymp.de/fitness-shop-berlin-tegel . Vielleicht hast du da noch ein heißen Tip wie das besser gelöst werden kann?
Gruß
Stefan
AntwortenAndrej
10. Januar 2016 at 16:11
Hallo Oliver,
selbiges Problem tritt auch bei mir auf, sprich wird die Box mit einem eingefügten Bild erst nach einer Veränderung des Viewports richtig angezeigt, davor überlappen sich angrenzende untere div Boxen. Hast du dafür eine Lösung? Im Shopware Forum wurde als Problem die zum Zeitpunkt des Renderns unbekannte Größe des Bildes benannt.
Vielen Dank!
AntwortenAndrej
10. Januar 2016 at 16:21
Dazu ist übrigens zu sagen dass das Problem nur im Safari und Chrome auftritt, der Firefox scheint es richtig zu rendern.
AntwortenOliver Kasper
11. Januar 2016 at 15:44
Hallo Andrej,
in der Tat liegt es wohl daran, dass die Höhe der Bilder von Shopware hier erst recht spät berechnet wird.
AntwortenIch suche gerade nach einer Lösung und werde sie hier veröffentlichen, wenn sie funktioniert!
Andrej
15. Januar 2016 at 1:10
Ich habe auch schon einiges durchprobiert, Es scheint an dem “top” Abstand der nachfolgenden Elemente zu liegen, dieser wird initial aus dem Template heraus berechnet, hier sind aber noch keine Bildgrößen bekannt. Daher wird es erst nach einem resize des Fensters richtig dargestellt, da hier dann die js resizing Funktion greift. Vielleicht hilft das bei der Suche, ich bin leider kein Developer, daher hören hier meine Fähigkeiten auf. Man müsste aber bereits im /themes/Frontend/Bare/widgets/emotion/index.tpl in der Zeile “top: {$itemTop / 16}rem; ” bzw in der $itemTop definition dadrüber auch die größte des Bildes inkludieren. Ich hoffe das hilft weiter. Sollte etwas davon unklar sein schreib mir gerne eine E-Mail.
LG
Oliver Kasper
28. April 2016 at 2:55
Hey Andrey,
es gibt einen ! nicht updatesicheren ! Workaroud für das Problem:
Ich Zitiere:
--- jquery.state-manager.js.org 2016-01-12 12:44:48.809888528 +0100
+++ jquery.state-manager.js 2016-01-26 15:15:54.926609788 +0100
var me = this,
width = me.getViewportWidth();
- if (width !== me._viewportWidth) {
+ //if (width !== me._viewportWidth) {
+ if (true) {
me._checkBreakpoints(width);
me.trigger('resize', width);
me._setDeviceCookie();
Vielleicht finden Sie ja noch einen eleganteren Weg…
Den Workaround habe ich von Matthias Leonhardt von http://www.conspicaris.com
Ich habe noch keinen Eleganteren Weg gefundene. Du vielleicht?
AntwortenStefan Niedl
22. Mai 2016 at 1:29
@Oliver Kasper
danke für den Tip, aber wo gehört das eingetragen?
Kevin
7. Dezember 2015 at 16:41
Ich hab den Code grade mal ausprobiert, aber ich bei mir macht er andere Phänomene.
Jetzt ist zwar nach Innen der Raum nicht mehr so übertrieben groß bzw. mit Scrollbalken, dafür aber nach außen / unten.
Heißt: der Scrollbalken verschwindet, aber der Text ist abgeschnitten oder der Rahmen um den Text ist angepasst aber der Abstand zur nächsten Box ist zu groß.
AntwortenOliver Kasper
8. Dezember 2015 at 16:51
Hallo Kevin,
hast Du mal einen Link zu Deiner Seite? Dann kann ich mir das ansehen.
AntwortenKay
8. April 2016 at 14:21
Hallo Oliver,
danke für diesen Tipp, wie stelle ich das aber im Responsive Theme ein?
AntwortenDort gibt es keinen Ordner Widgets, nur themes/Frontend/Responsive/frontend oder themes/Frontend/Responsive/tests.
Oliver Kasper
8. April 2016 at 14:25
Hallo Kay,
du solltest nie direkt im Responsive Theme arbeiten, immer mit einem eigenen. Sonst sind Deine Änderungen beim nächsten Update futsch!
Siehe z.b: http://8mylez.com/blog/shopware-5-theme-erstellen/
AntwortenFabio
20. April 2016 at 14:39
Vielen Dank für deine gute Erklärung!
AntwortenBei Google gesucht und direkt auf diese Seite!
Top, weiter so!
Oliver Kasper
28. April 2016 at 2:51
Danke. Einfach nur DANKE! 😉
AntwortenOlaf
8. Juni 2016 at 9:04
Hallo zusammen,
ich habe das gleiche Problem dass die Html-Elemente erst nach einem Resize oder nach erneutem klicken der Kathegorie die Größe richtig angezeigt wird. Ich kriege bei Chrome und Firefox initial zwei verschiedene Ergebnisse. Bei Chrome werden die Emotion Html-Elemente von den Kategorie Teasern überlagert, während sie bei Firefox nach unten verschoben werden, sprich der Abstand zwischen HTML-Element und Teaser wird unheimlich gross. Ich hatte schon zusätzlich min-height:16rem; und min-height:20rem; eingefügt, damit die Seiten einigermassen benutzbar sind.
Hat schon jemand eine Lösung gefunden, welche die Bildgröße vor dem laden der Seite erfasst und so auf Anhieb die Seite richtig ausgibt.
Ich hoffe dass mir jemand bei dem Problem helfen kann,
Vielen Dank im Voraus
Olaf
AntwortenJoschi
16. Juni 2016 at 12:38
Perfekt. Funzt einwandfrei! Guter Artikel… 🙂
AntwortenLeo Jung
21. Juni 2016 at 12:06
Danke. Genau das habe ich gesucht.
AntwortenDie Höhe wird jetzt, auch responsive, an den Inhalt angepasst..
Manuel Schefthaler
23. Juli 2016 at 20:11
Hallo,
wie funktioniert das ganze denn für Shopware 5.2.2.?
Kann mir hier wer helfen?
Danke.
LG Manuel
AntwortenChristian Matula
6. August 2016 at 20:41
Mich würde auch die Anpassung an Shopware 5.2.x interessieren…
AntwortenMartin
29. August 2016 at 9:54
@Manuel Schefthaler:
Antwortenwürde mich auch interessieren.
Alex
1. September 2016 at 18:49
Super danke für die Hilfe, in Sachen Bilder und Werbung kann man ja die Einkaufswel von Shopware 5 in die Tonne werfen…. Echt miss
AntwortenMcLunix
31. Oktober 2016 at 13:20
Leider finde ich den Abschnitt nicht in der Index.tpl bei Shopware 5.2.9. Wie bzw. wo muss in der aktuellen Version angepasst werden? Würde mich über Hilfe sehr freuen.
AntwortenStefan
21. November 2016 at 21:53
Danke für die Anleitung. Leider benötigt man für Shopware 5.2.9 anscheinend eine andere Lösung, da der oben erwähnte Abschnitt in dieser Version nicht zu finden ist. Über eine schnellstmögliche Lösung bzw. Erweiterung der Anleitung würden sich denke ich viele freuen! Vielen Dank im Voraus
AntwortenDennis Konoppa (COMPRA GmbH)
21. Februar 2017 at 12:09
Hallo Zusammen!
Die Lösung ist der neue “Zeilen-Modus” in den Einkaufswelten. Dieser passt die Höhen der Elemente automatisch an den Inhalt und die Bildschirmbreite an
AntwortenLenjka
27. Juni 2017 at 15:45
Leider funktioniert diese Methode nicht mehr in Shopware 5.2, da die Einkaufswelten komplett überarbeitet worden sind.
AntwortenEs schaudert mich jedes mal, wenn ich in den Einkaufswelten einfache Texte bearbeiten muss. Besonders beim zweispaltigen Layout wird die Anzeige in verschiedenen Viewports jedesmal ein Disaster.
Es ist unglaublich, dass Shopware da keine vernüftige Lösung bringen kann.
Oliver Kasper
16. November 2017 at 12:09
Hast Du es schonmal mit dem “Zeilen-Modus” in den neuen Shopware Einkaufswelten probiert?
AntwortenDer sollte das Problem eigtl. lösen 🙂
Leave a Comment