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
Benutzer | RANKING |
---|---|
12 | |
11 | |
10 | |
9 | |
8 |
Online-Marketing für einen Shopify-Shop kann manchmal wie ein Minenfeld erscheinen und vie...
By Gabe Dec 1, 2023In diesem Leitartikel werden wir erläutern, warum es wichtig ist, dein Shop als vertrauens...
By Kai Oct 25, 2023Dieser Blog-Beitrag ist eine Zusammenfassung des Webinars Vorbereitung auf BFCM: ein Webi...
By Jacqui Oct 10, 2023