Haken beim Laden der Startseite im Hintergrund

Liebe Community,

ich habe ein kleines Problem.

Beim Laden meiner Startseite erscheint im Hintergrund kurzzeitig ein “Haken”. Habe es von verschiedenen Computer ausprobiert: selbe Ergebnis.

Gibt es eine Möglichkeit das zu reparieren? Eventuell hat das was mit eine der Apps zu tun?

https://www.stillclassic.de/

Für Unterstützung wäre ich sehr dankbar.

VG

Niklas

Hi Niklas, die Seite steht noch unter Passwortschutz. Gerne würde ich den Fehler einsehen, um eine Einschätzung abgeben zu können.

Hey Niklas! @niklasH

Die Passwortseite sieht wie Dawn aus und wenn ja, kann das an zwei Dingen liegen:

1) an der icon-checkmark.liquid Datei im Dawn Theme und den Code kannst du ruhig auskommentieren. Siehe was ich meine hier:

Zu was genau die Datei dient kann ich nicht sagen. Wenn das nicht funzt dann einfach das auskommentieren aufheben. Es ist wahrscheinlich ein Inline-SVG-Element das geladen wird und ein Häkchen darstellt, bevor die Stylesheet der Website angewendet worden ist. Das kann bei Inline-SVG-Elementen durchaus vorkommen.

Du kannst den Throttle in der Chrome-Developer Console verwenden, um das zu reproduzieren:

2) Dann kann es auch mit dem display: none; CSS am ende der cart-notification.liquid das nicht executed wird. Wenn man den Code nach oben rutscht kann es das lösen bis über Zeile 12 oder so:

Das CSS funktioniert dann richtig und blendet die Warenkorb-Benachrichtigung aus, bis sie angebracht ist:

Um sicherzugehen, dass dies nicht zu Problemen bei der Anzeige der Warenkorb-Benachrichtigung führt, kann man die Benachrichtigung mit dem neu positionierten Code getestet, und sie wird sowohl auf den Produktseiten als auch im Abschnitt “Featured Product” korrekt angezeigt:

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!

Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 4 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

Wir haben, wie Gabe schon beschrieben hat, das Icon mittels CSS auskommentiert. Fehler behoben.

Hi,

der Fehler mit dem Haken taucht leider immer wieder auf, nicht immer aber bei jedem 10. oder 15. Mal. Der Haken ist nicht nur bei der Startseite zu sehen, sondern auch bei anderen Seiten.

Könntet Ihr mir da vielleicht nochmal helfen?

Viele Grüße

Niklas

Hey Niklas,

Welches Theme verwendest du? Hast du vielleicht einen Link zu einem Beispiel?

Ich nutze Dawn. Beim ersten Mal (Juli 22) hatte ich ein Foto gemacht. (siehe Anhang) Das mit dem Beispiel ist gar nicht so leicht, da der Haken nur für eine Sekunde zu sehen ist und der Haken unregelmäßig vorkommt.

Ihr, Rankist und Du, hattet es damals auch behoben, bzw. es tauchte einige Zeit nicht auf. Liegt es vielleicht an einer App? Ich würde dann schauen, ob ich nicht eine alternative App nutzen könnte.

VG

Hi Klondev,

der Fehler mit dem Haken taucht immer Mal wieder auf. Nicht nach jedem neuen Laden. Eher so bei jedem 15ten Mal. Lässt sich das noch beheben? Ich hatte die Dawn-Version geupdatet und dachte lange alles wäre in Ordnung. Aber wie gesagt, der Haken taucht immer Mal wieder auf.

Liegt es vielleicht an einer App, die ich löschen sollte?

Viele Grüße

Hey Niklas! @niklasH

Ich füge unsere Unterhaltung von heute nochmal hier ein, so dass auch andere das lesen können.

Es handelt sich wahrscheinlich um die Liquid Datei snippets -> icon-checkmark.liquid die wie unten abgebildet aussieht und eigentlich Teil de Dawn Themes ist. Du kannst wie @byteriver sagt diese File auskommentieren wie ich hier zeige:

Wenn du eine nagelneue Kopie des Dawn Themes zum Shop herunterladest wirst du da auch die selbe File sehen, was bedeutet, dass diese Checkmark eigentlich ein Bestandteil der Page Elemente des Dawn Themes ist.

Dennoch liegt die Ursache, dass der Haken manchmal ganz gross beim Page Load erscheint nicht bei dem Haken selber, sondern meist bei einer falschen Reihenfolge des Ladens der Page Elemente beim Page load, sprich, das manche Elemente langsamer laden als die erwartete Page-Load-Reihenfolge es vorsieht, was meist von einer App verursacht wird. In einem ähnlichen Fall war es die Tidio Live Chat App die das verursacht hatte.

Die JavaScript Ressource [https://widget-v4.tidiochat.com/1_88_0/static/js/chunk-WidgetIframe-f8a51bf919a77f20eaff.js](https://widget-v4.tidiochat.com/1_88_0/static/js/chunk-WidgetIframe-f8a51bf919a77f20eaff.js) wurde mittels Link-Preload vorgeladen, aber innerhalb weniger Sekunden nach dem Page Load nicht verwendet. In so einem Fall sollte man sich vergewissern, dass der Code einen entsprechenden *as_*value hat und korrekt vorgeladen wird. das kannst du mit dem Chrome Dev Tool finden und analysieren.

Du kannst das selber in der Chrome Developer Console analysieren indem du auf der betroffenen Seite einen Rechtsklick machst → Inspect → Netzwerk Tab → Refresh die Page nochmal und folge das Laden der verschiedenen Page Elemente im Netzwerk Tab. Eins dieser Elemente wird die Checkmark sein und da sieht man ob sie in der korrekten Page-Elemente Reihenfolge ladet oder nicht. Du kannst mit dem Dev Tool das Laden des Hakens auch stoppen um das besser zu analysieren welches App-Element den Haken am korrekten Laden hindert, wie ich in meinem eigenen Beispiel hier zeige:

Eine Ursache kann manchmal das cart notification Code sein dass man auskommentieren kann, wie ich hier zeige:

Das kann also nicht die Schuld der Checkmark sein, sondern das Verzögern des Ladens der anderen Page Elemente, die dann die ganze Lade-Kette der Seite durcheinander bringen und verzögern und somit das korrekte Laden des Hakens verhindern. Poste die URL der Seite hier und ich kann das mal testen.

Hierzu kommt auch das jeglicher JavaScript Code im Page Code nicht korrekt ausgelöst werden kann wenn die Page Elemente alle nicht in der korrekten Reihenfolge laden, sprich, bevor JavaScript Code (die funktionalen Elemente) und den CSS-Code (der Stil/das Design, der/das auf die Elemente angewendet wird - in diesem Fall wird es versteckt) vollständig angewendet werden können. Wenn das Element ausgeblendet ist, aber die Seite schneller lädt als das Skript, kann das Element für einen kurzen Moment auftauchen. Das ist wahrscheinlich der Grund, warum das Häkchen manchmal blinkt und manchmal nicht erscheint, beim Page Load.

Apps und der Theme-Code können also viele versteckte Elemente enthalten, die normalerweise unsichtbar bleiben, es sei denn, ein App Code wird nicht wie erwartet ausgelöst oder in der richtigen Reihenfolge beim Page Load. Oder es ist ein alter App Code der nicht vollständig deinstalliert und aus dem Theme Code entfernt wurde.

Da du dieses Problem sowohl mit der alten und der neuen Version des Dawn-Themes hattest, deutet das auf den Code einer App eines Drittanbieters die ggf. das Laden in der korrekten Reihenfolge der Page Elemente hindert und das kannst du, wie gesagt, in der Chrome Developer Console genau analysieren.

Hoffe das hilft, Niklas! :wink: