Grafik, Programmierung, Beratung und Marketing aus Cadolzburg

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:

 

Code neu:

 

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


Oliver Kasper

About the author - Oliver Kasper

Vor einigen Jahren habe ich mich - nach 10 Jahren bei der Nürnberger Web-Agentur GL Consult design & development GmbH - selbstständig gemacht und betreue seitdem kleine und große Unternehmen im Bereich eCommerce, Marketing und SEO. Besonders das Thema Shopware hat es mir seit langem angetan. 80% meiner täglichen Arbeit dreht sich um eCommerce - insbesondere um Shopware. Benötigen Sie Unterstützung beim Aufbau Ihres Online-Business? Kontaktieren Sie mich!

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
  • 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.1 auf domainFACTORY (df.eu) korrekt installieren Shopware-Praxisbeispiel: Merkzettel, Konto und Warenkorb in die Top-Navigation verschieben