[Gelöst] Evo 4.06: Nach Variantenauswahl in Produktliste ist Element zu klein

[Xantiva]

Hi,

ich teste gerade das Update auf die 4.06'er Shop-Version. Wenn ich den neuen Hovereffekt mit Variantenauswahl aktiviere, dann ist das Layout zerstört nachdem ich eine Variante ausgewält habe, die einen längeren Artikelnamen hat und somit einen Zeilenumbruch erzeugt:



Der Shop müsste die Zeilenhöhe von allen Artikeln in der Zeile entsprechend vergrößern?

Shop-Version 4.06.11 mit Standard Evo-Template. (Im Child-Template passiert das auch.)

 

[css-umsetzung]

Hast du deinen Browsercache mal gelöscht (STRG-F5)

Es kamen neue style Anweisungen hinzu, daher gibt es nur zwei Möglichkeiten:

Du arbeitest mit einem eigenem Template (Child oder was ganz eigenes) und hast die less Dateien nicht compiled. (Am wahrscheinlichsten)
Dein Browsercache weiß nichts von den geänderten Styles.

 

[Xantiva]

Hi @css-umsetzung ,

Danke für Deine Antwort. Ich habe sowohl den Browser Cache, wie auch Object- und Templatecache im Shop gelöscht. Und das Problem habe ich mit dem originalen Evo. Egal, ob ich das Theme noch mal kompiliere, oder ob die mitgelieferte bootstrap.css verwendet wird.

Es sieht so aus, als wenn der Browser nicht neuzeichnet. Wenn ich im Firefox oder Chrome z. B. nur mit "F 12" die Entwicklertools öffne oder schliesse, dann wird danach die Zeile korrekt angezeigt.

Lediglich im Chrome sehe ich in der Console nach einer Auswahl einer Variante folgenden Hinweis:

jquery-1.12.4.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
add @ jquery-1.12.4.min.js:3
(anonymous) @ jquery-1.12.4.min.js:3
each @ jquery-1.12.4.min.js:2
each @ jquery-1.12.4.min.js:2
sa @ jquery-1.12.4.min.js:3
on @ jquery-1.12.4.min.js:3
clickListener @ bootstrap-select.js?v=4.06:1041
init @ bootstrap-select.js?v=4.06:351
Selectpicker @ bootstrap-select.js?v=4.06:264
(anonymous) @ bootstrap-select.js?v=4.06:1632
each @ jquery-1.12.4.min.js:2
each @ jquery-1.12.4.min.js:2
Plugin @ bootstrap-select.js?v=4.06:1623
registerSimpleVariations @ jtl.article.js?v=4.06:134
register @ jtl.article.js?v=4.06:93
(anonymous) @ jtl.article.js?v=4.06:895
(anonymous) @ jtl.evo.js?v=4.06:388
i @ jquery-1.12.4.min.js:2
fireWith @ jquery-1.12.4.min.js:2
y @ jquery-1.12.4.min.js:4
c @ jquery-1.12.4.min.js:4

 

[css-umsetzung]

Es sieht so aus, als wenn der Browser nicht neuzeichnet. Wenn ich im Firefox oder Chrome z. B. nur mit "F 12" die Entwicklertools öffne oder schliesse, dann wird danach die Zeile korrekt angezeigt.

Das deutet eigentlich auf ein Browsercache Problem hin. Es wäre besser wenn man sich das anschauen könnte, dann könnte man da eher etwas zu sagen, Du kannst mir das auch per PN schicken wenn du möchtest.

 

[Xantiva]

jtlfree.basteln-selbermachen.de/Malerei/Acrylfarben/Glanzlack

Benutzername test
Passwort test

 

[css-umsetzung]

Bei mir ist alles gut, auch im Firefox und auch wenn ich danach dann die Browsergröße ändere und nochmal hover

 

[Xantiva]

Ok? Dein Screenshot zeigt den Hovereffekt, der ist nicht das Problem ...

So sieht das bei mir vorher aus:


Dann mit Hovereffekt und ausgewählter Variante:


Und danach ist das Layout kaputt:



Die Lieferzeitangabe ragt über die Elementgrenzen hinaus.

 

[css-umsetzung]

Ahh das hatte ich nicht bemerkt.

da wurde vergessen ein "$.evo.extended().autoheight();" auszuführen nachdem der content sich geändert hat.
Bei dir fällt das besonders auf weil bei dir ja zwei Zeilen hinzukommen mit der zusätzlichen Lieferzeit angabe.

 

[Xantiva]

Wenn Du jetzt noch einen Tipp für mich hättest, wo das konkret fehlt?

(Ich habe auch bei JTL ein Ticket aufgemacht.)

 

[css-umsetzung]

wenn du in die jtl.article.js gehst und nach der Funktion "setArticleContent" suchst was so in Zeile 857 anfangen sollte.
Dann steht in ca. Zeile 915 dieses hier: $spinner.stop();

vor dieser Zeile fügst du dann diesen Code ein:

          $("body").on("mouseleave",wrapper, function(el) {
                          $("body").off("mouseleave","#" + el.currentTarget.id);
                          $.evo.extended().autoheight();
                      });

Das ist aber jetzt nichts offizielles von JTL sondern nur ein Provisorium bis JTL den Fehler gelöst hat.

 

[Xantiva]

Auch wenn es nicht offiziell ist - es ist aber der richtige Code an der richtigen Stelle ...

Danke!