Liquid, JavaScript, Themes
Hallo Shopify Community,
Wir bekommen ab und zu Mails und Feedback dazu, dass Kunden mit der Zurück-Funktion des Browsers nicht an der Stelle der Seite landen wo sie vorher waren, sondern wieder ganz nach oben auf der vorherigen Seite geschickt werden...
Beispielsweise: In unserer Kategorie Papiere befinden sie sich kurz vor Schluss der Seite, klicken ein Papier an und gehen dann wieder auf die Kategorie zurück. Dann landen sie oben auf der Seite, nicht wieder kurz vor Schluss.
Bei mir selbst im Browser funktioniert es allerdings.
Hat jemand eine Idee woran das liegen kann?
Beste Grüße
Lara
@AlRe das kann mehrere Gründe haben. Ich würde aber mal darauf tippen, dass es am Browser selbst liegt. Weißt du welchen Browser die Kunden dafür verwendet haben oder vielleicht selbst die Seite mit verschiedenen Browsern/Endgeräten besucht?
Solange man nicht den Fehler nachstellen kann, wird man auf Anhieb keine Lösung finden können.
Hi Finer,
wir selbst verwenden Firefox und Chrome und bei beiden scheint es von unserer Seite zu funktionieren. Ich höre nach was unsere Kunden für einen Browser verwenden.
Eine Kundin hat allerdings erzählt, dass dieses Verhalten nur bei uns auftaucht und sie in anderen Shops das Problem nicht hat...
Hey Lara! @AlRe
Das habe ich jetzt auch auf meinem Browser getestet und siehe die Ergebnisse hier.
VG,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hi Gabe,
danke, dass du dir die Zeit genommen hast.
Vielleicht habe ich mich oben nicht klar genug ausgedrückt, hier nochmal eine klarere Beschreibung des Verhaltens was unsere Kunden beschreiben.
1. Sie befinden sich in einer Collection (Bsp. https://www.alexandra-renke.com/collections/dies?filter.v.price.gte=&filter.v.price.lte=&sort_by=cre...) und klicken relativ weit unten auf ein Produkt was sie interessant finden (Bsp. das letzte Produkt der oberen Seite:https://www.alexandra-renke.com/products/die-mini-lagerfeuer-set ). Da wir 100 Produkte pro Seite anzeigen haben sie sich also schon weit nach unten gescrollt.
2. Sie legen das Produkt vielleicht in den Warenkorb oder nicht und möchten dann zurück auf die erste Seite, um zu schauen ob hier noch mehr interessantes für sie dabei ist. Sie klicken im Browser auf Zurück.
3. Sie landen wieder ganz oben auf der Seite (https://www.alexandra-renke.com/collections/dies?filter.v.price.gte=&filter.v.price.lte=&sort_by=cre...) und müssen sich zu der Stelle wo sie waren wieder hinunterscrollen.
Dieses Verhalten fällt natürlich nur bei Seiten und Produktkategorien auf, welche sehr lang sind und wo man viel scrollen muss...
Könntest du nochmal versuchen das Verhalten nachzuproduzieren?
Danke nochmals
Lara
Hey Lara! @AlRe
Danke für die tolle Aufklärung und das habe ich jetzt nochmal getestet. Lass wissen falls ich etwas falsch gemacht habe hier.
Dieses Problem könnte auf eine Reihe von Faktoren zurückzuführen sein, einschließlich der Art, wie die Website gecacht wird, oder auf JavaScript-Funktionalität, die das Standardverhalten des Browsers beeinflusst.
VG
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hi Gabe,
danke dir für die schnelle Hilfe.
Genau das ist das Problem was unsere Kunden beschrieben haben und was ich selbst auch nicht reproduziert bekomme. Ich wollte dennoch ausschließen, dass es an unserem Shop selbst liegt.
Darf ich noch kurz erfahren ob du die Cookies angenommen oder abgelehnt hast? Das wäre sonst noch eine Vermutung von mir woran es ggf. liegen könnte.
Beste Grüße
Lara
@AlRe, das Problem taucht ausschließlich bei mobilen Endgeräten auf. Bei Chrome (Mobil) und Safari (Mobil) wird die Seite beim Zurückgehen wieder an den Anfang gesetzt. Bei einer so großen Kategorie also doppelt ärgerlich, da man lange scrollen muss.
Leider ist das auf eine Funktion zurückzuführen, die der Endnutzer mit den Browsereinstellungen beeinflussen kann. Alternativ dazu gibt es anscheinend die Möglichkeit, die Position auf einer Seite als Cookie zu speichern, damit, wenn der Nutzer zurückgeht, er auf der gleichen Position landet. Hier findet Ihr mehr Informationen dazu:
https://stackoverflow.com/questions/29203312/how-can-i-retain-the-scroll-position-of-a-scrollable-ar...
Das Ganze hängt m. E. auch damit zusammen, dass die Kategorieseite zum größten Anteil dynamischen Content beinhaltet, welcher beim Zurückgehen erneut geladen wird. Dadruch verliert sich die Position des Nutzers. Bei statischen Seiten besteht dieses Problem nicht.
Lara @AlRe
Ich habe die Cookies angenommen.
Und wie Finer sagt - tatsächlich kann das beschriebene Verhalten auf mobilen Endgeräten besonders problematisch sein, insbesondere aufgrund des begrenzten Bildschirmplatzes und der Neigung von mobilen Browsern, Seiten neu zu rendern, wenn sie aus dem Cache geholt werden. Da das Problem auf dynamischen Inhalten basiert, die beim Zurückgehen erneut geladen werden, wäre eine Lösung, die Position des Benutzers auf der Seite in einem Cookie oder im SessionStorage zu speichern, besonders sinnvoll.
Speichere die aktuelle Scroll-Position im SessionStorage, wenn ein Produkt angeklickt wird:
document.addEventListener('click', function (e) {
if (e.target.classList.contains('product-link')) { // Ersetze 'product-link' mit der tatsächlichen Klasse deiner Produktlinks
sessionStorage.setItem('scrollPosition', window.scrollY);
}
});
Wenn die Kategorieseite geladen wird, überprüfe, ob eine Scroll-Position im SessionStorage gespeichert ist, und scrolle dorthin zurück:
window.addEventListener('load', function () {
const scrollPosition = sessionStorage.getItem('scrollPosition');
if (scrollPosition) {
window.scrollTo(0, scrollPosition);
sessionStorage.removeItem('scrollPosition'); // Optional: Position entfernen, nachdem sie wiederhergestellt wurde
}
});
Du könntest auch den Scroll-Positionszustand speichern, wenn der Benutzer auf ein Produkt klickt, und dann diese Position verwenden, um wieder dorthin zu scrollen, wenn er/sie zur Produktliste zurückkehrt. Zum Beispiel könntest du beim Klicken auf ein Produkt folgenden Code ausführen:
sessionStorage.setItem('scrollPosition', window.scrollY);
Und dann, wenn der Benutzer auf die Collection-Seite zurückkehrt:
const scrollPosition = sessionStorage.getItem('scrollPosition');
if (scrollPosition) window.scrollTo(0, scrollPosition);
Manchmal können auch bestimmte Einstellungen oder Plugins, die mit der Darstellung oder dem Caching der Seite zu tun haben, solche Probleme verursachen. Überprüfe, ob es irgendwelche spezifischen Einstellungen in Shopify oder verwendete Plugins gibt, die dieses Verhalten beeinflussen könnten.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hi @AlRe,
könntest du auch bitte den Link zu eurem Shopify Shop mit uns teilen, damit wir versuchen können das von dir beschriebene Verhalten zu reproduzieren?
Und welches Theme verwendet ihr? Wer euer Theme entwickelt hat und unterstützt seht ihr so nach.
Kai | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hi Kai,
wir verwenden momentan das Dawn Theme 9.0.0.
Hier einmal unserer Shop Link:
https://www.alexandra-renke.com/
Beste Grüße
Lara
Moin,
konnte das Problem behoben werden?
Ich habe genau dasselbe Problem mit dem Dawn-Theme v 14.0.0 bei den oben genannten Browsern auf dem Handy + Safari.. Ständig wird man wieder zum Anfang der Seite zurückgeworfen, wenn man die Zurück-Funktion des Browsers nutzt.
VG Lukas
Hey Lukas! @luukas_wi
Es ist ohne konkrete Beispiele eher schwer nachzuvollziehen was genau das Problem ist. Hast du vielleicht einen befristeten Vorschaulink oder Link zu einem Beispiel?
Probleme mit Safari sinds uns ja auch bekannt und wir empfehlen nicht mit diesem Browser zu Arbeiten aufgrund Webkit (extra Code muss dafür im schlimmsten Fall in das Theme eingebaut werden um ein korrektes Rendering des Shops auf den Safari Browser zu gewährleisten).
Als Versuch den ganzen Sachverhalt besser zu verstehen bin ich nochmal den ganzen Thread oben durchgegangen der von Mitte 2023 stammt und das FAZIT was ich jetzt aus dem Ganzen entnehmen konnte, ist:
Das hilft uns nicht viel weiter leider da es mit manchen passiert und mit anderen nicht. Der Finer hat ja oben eine gute Erklarung des erwarteten Systemverhalten angeboten. Er sagt folgendes:
Leider ist das auf eine Funktion zurückzuführen, die der Endnutzer mit den Browsereinstellungen beeinflussen kann. Alternativ dazu gibt es anscheinend die Möglichkeit, die Position auf einer Seite als Cookie zu speichern, damit, wenn der Nutzer zurückgeht, er auf der gleichen Position landet. Hier findet Ihr mehr Informationen dazu:
https://stackoverflow.com/questions/29203312/how-can-i-retain-the-scroll-position-of-a-scrollable-ar...
Das Ganze hängt m. E. auch damit zusammen, dass die Kategorieseite zum größten Anteil dynamischen Content beinhaltet, welcher beim Zurückgehen erneut geladen wird. Dadruch verliert sich die Position des Nutzers. Bei statischen Seiten besteht dieses Problem nicht.
Hoffe das hilft dir weiter! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hallo Gabe,
vielen Dank für die Rückmeldung. Das Problem hast du in deinem 2. Video perfekt repleziert. Wenn der Kunde auf eine Seite bis ganz nach unten gescrollt hat, um dann z.B. bei einer Kategorieübersicht auf das unterste Produkt zu klicken, dieser dann aber die Zurück-Funktion des Browsers nutzt, landet dieser bei der Seite ganz oben, anstatt bei dem Produkt ganz unten.
Ich finde, man kann nicht sagen, dass man mit einem bestimmten Browser nicht arbeiten sollte, da eben eine Vielzahl von Menschen ein IPhone und dessen Safari Browser nutzen. Gleiches gilt unter anderem für Firefox und Google Chrome. Zu deiner Nachricht "Speichere die aktuelle Scroll-Position im SessionStorage, wenn ein Produkt angeklickt wird..." wie und wo kann ich die oben aufgeführten Codes einbetten, um das Problem zu umgehen?
VG Lukas
Ah verstehe und dafür müsste man ggf. eine Anchor Link Funktion in den Back-Button einbauen, die dich zurück zum Produkt ganz unten bringt, um das ganze nach unten nochmal Scrollen ersparen zu können. Das wäre i.d.T. eine bessere Erfahrung.
Was Safari anbelangt, ich weise nur darauf hin dass Problem mit Safari bekannt sind und Händler die im Admin arbeiten besser mit Chrome, Opera, oder Firefox bedient sind als mit Safari. Das ist nun leider mal so und eben doch kann man darauf hinweisen da andere ja auch hier mitlesen und nach Lösungen suchen.
Im Grunde müsstest du 1) einen globalen JS in dein theme.liquid
vor dem schließenden </body>
-Tag, oder in eine dedizierte JS Datei im Theme Code einbauen, um die genaue Scroll-Position beim Klicken auf ein Produkt zu speichern, wie z. B.:
document.addEventListener('click', function (e) {
if (e.target.closest('.product-link')) { // Ersetze 'product-link' mit der tatsächlichen Klasse oder dem Selector deiner Produktlinks
sessionStorage.setItem('scrollPosition', window.scrollY);
}
});
Dann 2) für das Wiederherstellen der Scroll-Position beim Laden der Seite einen weiteren JS in etwa wie:
window.addEventListener('load', function () {
const scrollPosition = sessionStorage.getItem('scrollPosition');
if (scrollPosition) {
window.scrollTo(0, scrollPosition);
sessionStorage.removeItem('scrollPosition'); // Optional: Position entfernen, nachdem sie wiederhergestellt wurde
}
});
ODer erstelle eine neue Datei in Assets mit dem Namen custom.js
und füge den Code da ein. Dann die Datei im theme.liquid
einbinden:
<script src="{{ 'custom.js' | asset_url }}"></script>
Oder eben einen Caching-Mechanismus einbauen, so dass dynamische Inhalte beim Zurücknavigieren erneut geladen werden, sobald der Browser die Seite neu rendert. Ein Caching-Mechanismus oder die Verwendung von Paginierung kann dabei helfen.
Experten wie @Finer können dir gerne damit gegen eine Spende helfen, das einzubauen.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hallo Gabe,
vielen Dank für deine Rückmeldung! Da hast du natürlich Recht mit dem Hinweis für die Leute, die hier mitlesen!
Ich habe es mithilfe des Codes versucht. Ich habe eine Asset-Datei namens "custom.js" erstellt, die beiden oberen Codes dort eingefügt und den anderen Code im theme.liquid vor dem </body>-Tag eingefügt.
Das hat leider nicht geholfen...
VG Lukas
Hey Lukas! @luukas_wi
Poste auch deine Anfrage auf Fiverr. Da wird sich bestimmt ein Programmierer melden!
VG,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024