Hey @lsievers
Das Problem, dass der Code auf mobilen Geräten nicht funktioniert, könnte mehrere Ursachen haben. Stelle zuerst mal sicher, dass du das richtige Element auswählst. Deine aktuelle Auswahl könnte auf mobilen Geräten anders sein:
Anstatt:
const variantSelect = document.querySelector("variant-picker");
Probier mal:
const variantSelect = document.querySelector(".variant-select"); // Beispiel für die tatsächliche Klasse des Auswahl-Elements
Stelle sicher, dass der Event Listener korrekt auf das change Event des Auswahl-Elements reagiert. Manchmal verhalten sich JavaScript-Events auf mobilen Geräten anders. Versuche eine andere Methode zu verwenden, um sicherzustellen, dass das Event korrekt ausgelöst wird. Hier ist der überarbeitete Code:
document.addEventListener('DOMContentLoaded', function() {
const variantSelect = document.querySelector(".variant-select"); // Ersetze mit der tatsächlichen Klasse deines Auswahl-Elements
if (variantSelect) {
variantSelect.addEventListener('change', function() {
window.location.reload(); // Erzwingt das Neuladen der Seite
});
}
});
Falls das Problem weiterhin besteht, kannst du alternative Methoden ausprobieren, um die Seite neu zu laden wie mit window.location.href:
document.addEventListener('DOMContentLoaded', function() {
const variantSelect = document.querySelector(".variant-select"); // Ersetze mit der tatsächlichen Klasse deines Auswahl-Elements
if (variantSelect) {
variantSelect.addEventListener('change', function() {
window.location.href = window.location.href; // Erzwingt das Neuladen der Seite
});
}
});
Verwende die Entwicklerwerkzeuge deines Browsers, um das Verhalten auf mobilen Geräten zu debuggen:
- Google Chrome DevTools: Du kannst die Entwicklerwerkzeuge öffnen (Rechtsklick > Untersuchen oder F12) und das Gerät auf ein mobiles Gerät umschalten (Symbolleiste oben).
- Fehlerprotokoll: Überprüfe die Konsole auf Fehlermeldungen, die auf mobilen Geräten auftreten könnten.
Eine bessere Praxis: Ajax statt Reload
Statt die Seite komplett neu zu laden, kannst du auch nur die notwendigen Teile der Seite neu laden, um die Benutzererfahrung zu verbessern mit etwas Ajax:
document.addEventListener('DOMContentLoaded', function() {
const variantSelect = document.querySelector(".variant-select"); // Ersetze mit der tatsächlichen Klasse deines Auswahl-Elements
if (variantSelect) {
variantSelect.addEventListener('change', function() {
fetch(window.location.href)
.then(response => response.text())
.then(html => {
document.documentElement.innerHTML = html;
});
});
}
});
- Fehlerhafte oder langsame Seitenladezeiten auf mobilen Geräten: Einige Nutzer berichteten, dass ihre Produktseiten auf mobilen Geräten sehr langsam laden oder sich nicht korrekt aktualisieren. Ein häufig genannter Lösungsansatz war die Optimierung der Seitenladegeschwindigkeit durch Reduzierung von JavaScript-Payloads und die Verwendung von Critical CSS (Shopify Community).
- Doppelte Seitenladungen: Andere Nutzer hatten Probleme mit doppelten Seitenladungen. Dies wurde oft durch fehlerhafte Skripte oder ungenaue Codeanpassungen verursacht. Es wurde empfohlen, die genauen Schritte zur Replikation des Problems zu überprüfen und sicherzustellen, dass der Code nicht mehrfach ausgeführt wird (Shopify Community).
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
