FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Erzwungener Page Reload auf mobilen Geräten

Gelöst

Erzwungener Page Reload auf mobilen Geräten

lsievers
Entdecker
29 1 9

Hallo zusammen,

 

wir haben in unserem "Impact"-Theme den Code so angepasst, dass sich die Produktseite automatisch aktualisiert, wenn man eine Variante auswählt. Dadurch sollen die spezifischen Metafelder der Variante aktualisiert werden. Auf dem Desktop funktioniert das einwandfrei, aber auf mobilen Geräten nicht. Könnt ihr uns sagen, warum der Code auf mobilen Geräten nicht funktioniert?

 

Hier ist der Code, den wir in "theme.js.liquid" hinzugefügt haben:

 

document.addEventListener('DOMContentLoaded', function() {
  const variantSelect = document.querySelector("variant-picker"); // Ersetze '.variant-select' mit der tatsächlichen Klasse deines Varianten-Auswahl-Elements
  if (variantSelect) {
    variantSelect.addEventListener('change', function() {
      location.reload(); // Erzwingt das Neuladen der Seite
    });
  }
});

 

Danke und VG!

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
19233 3005 4430

Erfolg.

@lsievers 

 

Ja es ist von hier aus schwer zu sagen warum die Codes nicht funzen. Das habe ich aber jetzt in meinem Test-Impact Theme getestet und ein paar weitere Empfehlungen werde ich dir unten geben die du in einer Test-Kopie deines IMpact Themes ausprobieren kannst, zusammen mit dem Entwickler Tool deines Browsers.

 

Das Problem kann verschiedene Ursachen haben, insbesondere wenn es auf mobilen Geräten auftritt und auf dem Desktop nicht. Hier sind einige Vorschläge zur Fehlerbehebung und Verbesserung des Codes. Überprüfe mal den Event Listener auf Mobile - stelle sicher, dass das Event korrekt auf den mobilen Geräten ausgelöst wird. Und auch das Verhalten der variant-picker Komponente auf Mobile. Es ist möglich, dass die variant-picker Komponente auf Mobile anders funktioniert.

 

Um sicherzustellen, dass das Event Listener korrekt auf allen Geräten funktioniert, nutze beispielweise eine genauere Abfrage, um sicherzustellen, dass du das richtige Element auswählst. Verwende window.addEventListener für Mobile da Mobile Geräte unterschiedlich auf DOMContentLoaded reagieren können. Verwende vielleicht eine breitere Auswahl an Events.

 

Hier ein Beispiel:

 

document.addEventListener('DOMContentLoaded', function() {
  const variantSelect = document.querySelector(".variant-select input[type='radio']"); // Genauere Auswahl des Elements

  if (variantSelect) {
    document.querySelectorAll(".variant-select input[type='radio']").forEach(function(radio) {
      radio.addEventListener('change', function() {
        // Stelle sicher, dass das Event nur einmal ausgelöst wird
        if (radio.checked) {
          window.location.reload();
        }
      });
    });
  }
});

// Fallback für mobile Geräte
window.addEventListener('load', function() {
  const variantSelect = document.querySelector(".variant-select input[type='radio']"); // Genauere Auswahl des Elements

  if (variantSelect) {
    document.querySelectorAll(".variant-select input[type='radio']").forEach(function(radio) {
      radio.addEventListener('change', function() {
        // Stelle sicher, dass das Event nur einmal ausgelöst wird
        if (radio.checked) {
          window.location.reload();
        }
      });
    });
  }
});

 

  1. Verwende die Entwicklertools des Browsers:

    • Öffne die Entwicklertools (F12 oder Rechtsklick -> Untersuchen) und prüfe die Konsole auf Fehlermeldungen.
    • Verwende die mobile Ansicht in den Entwicklertools, um das Verhalten auf mobilen Geräten zu simulieren.
  2. Überprüfe die Netzwerkaktivität:

    • Überprüfe, ob alle notwendigen Ressourcen (JavaScript-Dateien, CSS-Dateien usw.) korrekt geladen werden.
  3. Überprüfe das Verhalten ohne Javascript:

    • Deaktiviere JavaScript und überprüfe, ob die Seite korrekt funktioniert. Manchmal können kleine JavaScript-Fehler zu unerwartetem Verhalten führen.

Alternative Lösung mit AJAX (für bessere Performance):

Falls das Neuladen der Seite zu langsam ist, könntest du AJAX verwenden, um nur die relevanten Teile der Seite neu zu laden. Hier ist ein Beispiel:

 

document.addEventListener('DOMContentLoaded', function() {
  const variantSelect = document.querySelector(".variant-select input[type='radio']");

  if (variantSelect) {
    document.querySelectorAll(".variant-select input[type='radio']").forEach(function(radio) {
      radio.addEventListener('change', function() {
        if (radio.checked) {
          fetch(window.location.href)
            .then(response => response.text())
            .then(html => {
              // Parsen des neuen HTML
              const parser = new DOMParser();
              const doc = parser.parseFromString(html, 'text/html');
              // Aktualisiere nur den relevanten Teil der Seite
              document.querySelector('.product-info').innerHTML = doc.querySelector('.product-info').innerHTML;
            });
        }
      });
    });
  }
});

 

Dieser Code verwendet fetch, um die aktuelle Seite erneut zu laden und dann den relevanten Teil der Seite zu aktualisieren, ohne die gesamte Seite neu zu laden. Dies verbessert die Benutzererfahrung erheblich meiner Meinung nach!

 

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

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

Gabe
Shopify Staff
19233 3005 4430

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:

  1. Google Chrome DevTools: Du kannst die Entwicklerwerkzeuge öffnen (Rechtsklick > Untersuchen oder F12) und das Gerät auf ein mobiles Gerät umschalten (Symbolleiste oben).
  2. 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.

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

lsievers
Entdecker
29 1 9

Hi @Gabe !

Wie immer vielen Dank für deine ausführliche Nachricht und die angegebenen Codes. 😊


Leider hat keiner deiner Codes zu einer Lösung auf mobilen Geräten geführt. Auf dem Desktop funktionieren sie aber ohne Probleme, bis auf den Ajax-Code. Dein Tipp mit der Fehlersuche über die Entwicklungstools ist sehr gut. Das werde ich mir mal genauer anschauen.

 

Hast du noch weitere Tipps, warum die Codes mobil nicht funktionieren?

 

Viele Grüße!

Gabe
Shopify Staff
19233 3005 4430

Erfolg.

@lsievers 

 

Ja es ist von hier aus schwer zu sagen warum die Codes nicht funzen. Das habe ich aber jetzt in meinem Test-Impact Theme getestet und ein paar weitere Empfehlungen werde ich dir unten geben die du in einer Test-Kopie deines IMpact Themes ausprobieren kannst, zusammen mit dem Entwickler Tool deines Browsers.

 

Das Problem kann verschiedene Ursachen haben, insbesondere wenn es auf mobilen Geräten auftritt und auf dem Desktop nicht. Hier sind einige Vorschläge zur Fehlerbehebung und Verbesserung des Codes. Überprüfe mal den Event Listener auf Mobile - stelle sicher, dass das Event korrekt auf den mobilen Geräten ausgelöst wird. Und auch das Verhalten der variant-picker Komponente auf Mobile. Es ist möglich, dass die variant-picker Komponente auf Mobile anders funktioniert.

 

Um sicherzustellen, dass das Event Listener korrekt auf allen Geräten funktioniert, nutze beispielweise eine genauere Abfrage, um sicherzustellen, dass du das richtige Element auswählst. Verwende window.addEventListener für Mobile da Mobile Geräte unterschiedlich auf DOMContentLoaded reagieren können. Verwende vielleicht eine breitere Auswahl an Events.

 

Hier ein Beispiel:

 

document.addEventListener('DOMContentLoaded', function() {
  const variantSelect = document.querySelector(".variant-select input[type='radio']"); // Genauere Auswahl des Elements

  if (variantSelect) {
    document.querySelectorAll(".variant-select input[type='radio']").forEach(function(radio) {
      radio.addEventListener('change', function() {
        // Stelle sicher, dass das Event nur einmal ausgelöst wird
        if (radio.checked) {
          window.location.reload();
        }
      });
    });
  }
});

// Fallback für mobile Geräte
window.addEventListener('load', function() {
  const variantSelect = document.querySelector(".variant-select input[type='radio']"); // Genauere Auswahl des Elements

  if (variantSelect) {
    document.querySelectorAll(".variant-select input[type='radio']").forEach(function(radio) {
      radio.addEventListener('change', function() {
        // Stelle sicher, dass das Event nur einmal ausgelöst wird
        if (radio.checked) {
          window.location.reload();
        }
      });
    });
  }
});

 

  1. Verwende die Entwicklertools des Browsers:

    • Öffne die Entwicklertools (F12 oder Rechtsklick -> Untersuchen) und prüfe die Konsole auf Fehlermeldungen.
    • Verwende die mobile Ansicht in den Entwicklertools, um das Verhalten auf mobilen Geräten zu simulieren.
  2. Überprüfe die Netzwerkaktivität:

    • Überprüfe, ob alle notwendigen Ressourcen (JavaScript-Dateien, CSS-Dateien usw.) korrekt geladen werden.
  3. Überprüfe das Verhalten ohne Javascript:

    • Deaktiviere JavaScript und überprüfe, ob die Seite korrekt funktioniert. Manchmal können kleine JavaScript-Fehler zu unerwartetem Verhalten führen.

Alternative Lösung mit AJAX (für bessere Performance):

Falls das Neuladen der Seite zu langsam ist, könntest du AJAX verwenden, um nur die relevanten Teile der Seite neu zu laden. Hier ist ein Beispiel:

 

document.addEventListener('DOMContentLoaded', function() {
  const variantSelect = document.querySelector(".variant-select input[type='radio']");

  if (variantSelect) {
    document.querySelectorAll(".variant-select input[type='radio']").forEach(function(radio) {
      radio.addEventListener('change', function() {
        if (radio.checked) {
          fetch(window.location.href)
            .then(response => response.text())
            .then(html => {
              // Parsen des neuen HTML
              const parser = new DOMParser();
              const doc = parser.parseFromString(html, 'text/html');
              // Aktualisiere nur den relevanten Teil der Seite
              document.querySelector('.product-info').innerHTML = doc.querySelector('.product-info').innerHTML;
            });
        }
      });
    });
  }
});

 

Dieser Code verwendet fetch, um die aktuelle Seite erneut zu laden und dann den relevanten Teil der Seite zu aktualisieren, ohne die gesamte Seite neu zu laden. Dies verbessert die Benutzererfahrung erheblich meiner Meinung nach!

 

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

lsievers
Entdecker
29 1 9

Jetzt habe ich es tatsächlich geschafft, dass der Reload auch mobil funktioniert, danke für die Hilfe! 😊

Gabe
Shopify Staff
19233 3005 4430

giphy

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