Shopware 5: HTML-Element & automatische Höhe

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.

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:

<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}%;">

<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:

<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}%;">

<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.

Shopware-Tipp:

Ich habe bei Amazon ein Buch entdeckt, das ab Dezember in den Handel kommt. Ein absolutes muss für jeden Shopware-Nutzer. Viele hilfreiche Tipps & Tricks, Praxisbeispiele und hilfreiche Informationen für Shopware-Neulinge und Profis:

Shopware: Das Handbuch für Entwickler

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?
Antworten
- Oliver 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,
  Oliver Kasper
  Antworten
  - 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
    Antworten
  - Andrej
    
    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!
    Antworten
    - Andrej
      
      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.
      Antworten
    - Oliver 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.
      Ich suche gerade nach einer Lösung und werde sie hier veröffentlichen, wenn sie funktioniert!
      Antworten
      - 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?
      Antworten
      - Stefan 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ß.
Antworten
- Oliver Kasper
  
  8. Dezember 2015 at 16:51
  
  Hallo Kevin,
  
  hast Du mal einen Link zu Deiner Seite? Dann kann ich mir das ansehen.
  Antworten
Kay

8. April 2016 at 14:21

Hallo Oliver,

danke für diesen Tipp, wie stelle ich das aber im Responsive Theme ein?
Dort gibt es keinen Ordner Widgets, nur themes/Frontend/Responsive/frontend oder themes/Frontend/Responsive/tests.
Antworten
- 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/
  Antworten
Fabio

20. April 2016 at 14:39

Vielen Dank für deine gute Erklärung!
Bei Google gesucht und direkt auf diese Seite!
Top, weiter so!
Antworten
- Oliver Kasper
  
  28. April 2016 at 2:51
  
  Danke. Einfach nur DANKE! 😉
  Antworten
Olaf

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
Antworten
Joschi

16. Juni 2016 at 12:38

Perfekt. Funzt einwandfrei! Guter Artikel… 🙂
Antworten
Leo Jung

21. Juni 2016 at 12:06

Danke. Genau das habe ich gesucht.
Die Höhe wird jetzt, auch responsive, an den Inhalt angepasst..
Antworten
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
Antworten
Christian Matula

6. August 2016 at 20:41

Mich würde auch die Anpassung an Shopware 5.2.x interessieren…
Antworten
Martin

29. August 2016 at 9:54

@Manuel Schefthaler:
würde mich auch interessieren.
Antworten
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
Antworten
McLunix

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.
Antworten
Stefan

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
Antworten
Dennis 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
Antworten
Lenjka

27. Juni 2017 at 15:45

Leider funktioniert diese Methode nicht mehr in Shopware 5.2, da die Einkaufswelten komplett überarbeitet worden sind.
Es 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.
Antworten
- Oliver Kasper
  
  16. November 2017 at 12:09
  
  Hast Du es schonmal mit dem „Zeilen-Modus“ in den neuen Shopware Einkaufswelten probiert?
  Der sollte das Problem eigtl. lösen 🙂
  Antworten

Shopware 5 Einkaufswelten: HTML-Elemente mit automatischer Höhe

Shopware 5 Einkaufswelten: HTML-Elemente mit automatischer Höhe

Shopware-Tipp:

About the author - Oliver Kasper

27 Comments

Stefan

Oliver Kasper

Stefan

Andrej

Andrej

Oliver Kasper

Andrej

Oliver Kasper

Stefan Niedl

Kevin

Oliver Kasper

Kay

Oliver Kasper

Fabio

Oliver Kasper

Olaf

Joschi

Leo Jung

Manuel Schefthaler

Christian Matula

Martin

Alex

McLunix

Stefan

Dennis Konoppa (COMPRA GmbH)

Lenjka

Oliver Kasper

Leave a Comment

Shopware 5 Einkaufswelten: HTML-Elemente mit automatischer Höhe

Shopware 5 Einkaufswelten: HTML-Elemente mit automatischer Höhe

Shopware-Tipp:

About the author - Oliver Kasper

Related Posts

27 Comments

Stefan

Oliver Kasper

Stefan

Andrej

Andrej

Oliver Kasper

Andrej

Oliver Kasper

Stefan Niedl

Kevin

Oliver Kasper

Kay

Oliver Kasper

Fabio

Oliver Kasper

Olaf

Joschi

Leo Jung

Manuel Schefthaler

Christian Matula

Martin

Alex

McLunix

Stefan

Dennis Konoppa (COMPRA GmbH)

Lenjka

Oliver Kasper

Leave a Comment