Verfügbarkeiten von Varianten in Backend und Frontend stimmen nicht überein

[HolgerMoeller]

Hallo zusammen,

jetzt wird's gruselig, denn meinem Kunden ist in seinem Shop tauchsport-pape.de ein sehr seltsames Verhalten aufgefallen. Er hat ein Produkt mit diversen Größenvarianten von XS bis XXL und hat nur die Größe L 1x verfügbar. Das trägt er im Produkt so ein. "Draußen" im Shop ist dann aber nicht Größe L verfügbar, sondern die direkt daneben (what??). Dann klickt man zwischen den verschiedenen Größen hin und her und merkt dann, dass die Varianten mal vorrätig sind und mal nicht.

Gekauftes Theme: Pursuit, Version 1.1

Hier ein Screencast, denn ich wollte es auch erst nicht glauben, aber seht selbst (mp4 darf ich leider nicht anhängen, daher als Link):

https://www.dropbox.com/s/7ochrzk1b0z1rrw/Shopify-Bug%20bei%20den%20Verf%C3%BCgbarkeiten%3F.mp4?dl=0

Habe irgendwo mal versehentlich "Shopware" gesagt, nicht dran stören 😉

Es wirkt eigentlich wie ein Refreshing-Bug im Browser, dürfte aber für Verwirrung bei den Käufern sorgen...

Hier der Direktlink zum Produkt aus dem Screencast, einfach mal selbst hin und her klicken und Spaß haben:

https://tauchsport-pape.de/products/kwark-navy-extreme-unterzieher?_pos=1&_psq=Navy+extreme&_ss=e&_v...

Ich freue mich über Antworten oder Hinweise, vielleicht bin ich ja nicht der erste, dem das passiert.

Danke euch vorab und Gruß

Holger

[Gabe · Accepted solution]

Hey Holger! @HolgerMoeller 

Super mit dem Video! Das scheint mir auf den ersten Blick entweder ein Browser Cache Problem zu sein oder ein Theme Code Problem denn für mich hat das jetzt eigentlich funktioniert, wie du hier sehen kannst:

Dann habe ich sie Seite in der Chrome Developer Console geprüft und es könnte auch daran liegen, wie die Verfügbarkeit der Produktvarianten über JavaScript geregelt wird. Der bereitgestellte Codeabschnitt zeigt, dass für jede Variante ein Skript vorhanden ist, das explizit die Klasse soldout entfernt und available hinzufügt und das disabled-Attribut vom jeweiligen Radio-Button entfernt. Das bedeutet, dass unabhängig vom tatsächlichen Lagerbestand jede Variante als verfügbar markiert wird, sobald das entsprechende Skript ausgeführt wird.

Der Fehler Liquid error (layout/theme line 27): font_url can only be used with a font drop weist darauf hin, dass es ein Problem mit der Verwendung der font_url-Funktion im Theme gibt. Diese Funktion wird typischerweise verwendet, um benutzerdefinierte Schriftarten in Shopify-Themes einzubinden. Der Fehler könnte bedeuten, dass die Funktion falsch verwendet wird oder dass versucht wird, sie außerhalb eines gültigen Kontexts aufzurufen.

Das Theme ausschließen:

• Füge mal eine ganz frische Kopie des Theme: Pursuit, Version 1.1 zum Shop und teste ob dasselbe Problem da auch vorkommt.

Den Browser ausschließen

Welcher Browser ist das in deinem Video wenn ich fragen darf? Probiere mal folgendes:

• Um den Browser auszuschliessen habe ich eine Liste Dinge unten aufgelistet die du bitte alle ausprobieren könntest.

Wenn es sich doch um ein Browser Problem auf deiner Seite handelt, unten liste ich Schritte auf die ich empfehle alle durchzuführen mit deinem Browser. Es sind uns beispielsweise Probleme mit dem Safari Browser bereits bekannt und wurden hier in der Community mehrfach gemeldet (siehe Beispiele hier) da Apple super proprietär geworden ist. Wir empfehlen im Admin nur mit dem Google Chrome oder MS Edge Browser zu arbeiten.

Hier sind einige weitere Schritt für deinen Browser, die du lokal durchführen kannst, um das Problem zu beheben:

• Cache und Cookies löschen: Manchmal können veraltete oder beschädigte Cache-Daten und Cookies Probleme auf Websites verursachen. Lösche den Cache und die Cookies in den Browsereinstellungen und versuche dann, die Seite erneut zu laden.
• Browser-Erweiterungen überprüfen: Deaktiviere alle Browser-Erweiterungen, insbesondere solche, die das Verhalten von Webseiten beeinflussen können (wie z.B. Werbeblocker, Skript-Blocker oder ähnliche Tools), und sieh nach, ob das Problem damit behoben wird.
• Shopify-Theme überprüfen: Gehe zu deinem Shopify-Admin-Bereich und überprüfe das verwendete Theme. Manchmal können Probleme durch Updates oder Änderungen an den Themen-Einstellungen entstehen. Überprüfe auch, ob kürzlich Änderungen am Thema durchgeführt wurden und setze diese gegebenenfalls zurück.
• Konflikte mit JavaScript/CSS prüfen: Wenn du benutzerdefinierte Skripte oder Stylesheets zu deinem Shop hinzugefügt hast, könnten diese Konflikte verursachen. Prüfe den Code auf Fehler oder Inkompatibilitäten.
• Reaktion des Ladens bei unterschiedlichen Bildschirmgrößen testen: Öffne deinen Shop auf einem Desktop und verkleinere oder vergrößere das Browserfenster, um zu sehen, ob das Scrollen bei bestimmten Größen funktioniert. Dies könnte auf ein responsives Design-Problem hinweisen.
• Prüfe das Konsolen-Log: Öffne die Entwicklertools in deinem Browser (in der Regel mit F12 oder Rechtsklick und „Untersuchen“ zugänglich) und überprüfe die Konsole auf Fehlermeldungen beim Laden der Seite und beim Versuch zu scrollen.
• Überprüfen auf kürzlich installierte Apps: Manchmal können Shopify-Apps Konflikte verursachen. Überprüfe, ob du kürzlich Apps installiert hast und deaktiviere sie gegebenenfalls temporär.

Wenn das Problem weiterhin besteht, führe bitte alle folgenden Schritte durch um ein lokales Problem auszuschließen. 

Lokale Fehlerbehebungs-Schritte - Um sicherzustellen, dass es sich nicht um ein Problem mit deinem Browser, deinem Gerät oder deiner Internetverbindung handelt, versuche bitte Folgendes:

1. Lösche den Cache und die Cookies (verwende in Chrome die Zeitspanne "Alle Zeiten").
   • Warum: Dadurch werden gespeicherte Informationen aus dem Browser entfernt, die Fehler verursachen.
     Lösung: Lösche regelmäßig Cache und Cookies.
      
2. Stelle sicher, dass die Cookie-Einstellungen des Browsers NICHT auf "Alle Cookies blockieren" eingestellt sind.
   • Warum: Wenn sie "Alle Cookies blockieren", werden einige Apps wie Flow, Scripts, Launchpad oder andere Apps in der Verwaltung möglicherweise nicht richtig angezeigt.
     Lösung: Stelle entweder "Alle Cookies zulassen" oder "Cookies von Drittanbietern im Inkognito-Modus blockieren" ein.
      
3. Versuche es mit einem anderen Webbrowser UND im Inkognito-Modus des Browsers.
   • Warum: Das schließt den Browser oder die Version des Browsers aus, die Fehler verursacht.
     Lösung: Aktualisiere den Browser, deinstalliere ihn und installiere ihn neu.
      
4. Wenn du im Inkognito-Modus immer noch ein Anzeigeproblem hast, überprüfe, ob sie die Browsererweiterungen deaktiviert haben, da diese das Aussehen der Seiten verändern können.
   • Warum: So werden Erweiterungen, die Fehler verursachen, ausgeschaltet.
     Lösung: Lösche ungenutzte Erweiterungen, schalte Erweiterungen aus.
      
5. Vergewissere dich, dass der Webbrowser auf dem neuesten Stand ist (wir unterstützen nicht jeden Browser, aber diese hier).
   • Warum: So vermeidest du, dass die Browserversion zu Fehlern führt.
     Lösung: Aktualisiere den Browser, deinstalliere den Browser und installiere ihn neu, verwende einen unterstützten Browser.
      
6. Probiere ein anderes Gerät aus, z. B. einen anderen Computer oder ein Mobiltelefon.
   • Warum: Dadurch wird das Gerät, das die Fehler verursacht, ausgeschaltet.
     Lösung: Starte das Gerät neu, aktualisiere das Betriebssystem.
      
7. Versuche es mit der Shopify Mobile App.
   • Warum: Dadurch wird verhindert, dass die webbasierte Version von Shopify Fehler verursacht.
     Lösung: Geräteabhängiges Problem, andere Beispiele in dieser Liste können helfen, die Lösung zu finden.
      
8. Probiere eine andere Internetverbindung aus (wechsle z.B. mit deinem Telefon zu einem Mobilfunknetz statt zu WLAN).
   • Warum: Dies schließt eine schwache Internetverbindung oder ein ISP-Problem aus, das zu Fehlern führt.
     Lösung: Internetbasiertes Problem, sprich mit dem Internetanbieter.
      
9. Stelle sicher, dass im Webbrowser keine Pop-ups blockiert werden.
   • Warum: So kannst du verhindern, dass Pop-ups übersehen werden, z. B. wenn für eine Funktion ein neuer Tab geöffnet werden muss.
     Lösung: Wähle "Popups zulassen" im Gerät/Browser. Google den Browser/das Gerät, um passende Lösungen zu finden.
      
10. Vergewissere dich, dass auf deinem Gerät oder Netzwerk keine Firewalls oder VPNs (virtuelle private Netzwerke) aktiviert sind, die Shopify blockieren.
    • Warum: Dadurch wird verhindert, dass Firewalls oder VPNs Fehler liefern. Beispiel: Kaspersky kann Shopify blockieren.
      Lösung: Stelle sicher, dass Shopify nicht blockiert wird, verwende einen anderen Standort für VPN, schalte VPN aus.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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 · Accepted solution]

Hey Holger! @HolgerMoeller 

Super mit dem Video! Das scheint mir auf den ersten Blick entweder ein Browser Cache Problem zu sein oder ein Theme Code Problem denn für mich hat das jetzt eigentlich funktioniert, wie du hier sehen kannst:

Dann habe ich sie Seite in der Chrome Developer Console geprüft und es könnte auch daran liegen, wie die Verfügbarkeit der Produktvarianten über JavaScript geregelt wird. Der bereitgestellte Codeabschnitt zeigt, dass für jede Variante ein Skript vorhanden ist, das explizit die Klasse soldout entfernt und available hinzufügt und das disabled-Attribut vom jeweiligen Radio-Button entfernt. Das bedeutet, dass unabhängig vom tatsächlichen Lagerbestand jede Variante als verfügbar markiert wird, sobald das entsprechende Skript ausgeführt wird.

Der Fehler Liquid error (layout/theme line 27): font_url can only be used with a font drop weist darauf hin, dass es ein Problem mit der Verwendung der font_url-Funktion im Theme gibt. Diese Funktion wird typischerweise verwendet, um benutzerdefinierte Schriftarten in Shopify-Themes einzubinden. Der Fehler könnte bedeuten, dass die Funktion falsch verwendet wird oder dass versucht wird, sie außerhalb eines gültigen Kontexts aufzurufen.

Das Theme ausschließen:

• Füge mal eine ganz frische Kopie des Theme: Pursuit, Version 1.1 zum Shop und teste ob dasselbe Problem da auch vorkommt.

Den Browser ausschließen

Welcher Browser ist das in deinem Video wenn ich fragen darf? Probiere mal folgendes:

• Um den Browser auszuschliessen habe ich eine Liste Dinge unten aufgelistet die du bitte alle ausprobieren könntest.

Wenn es sich doch um ein Browser Problem auf deiner Seite handelt, unten liste ich Schritte auf die ich empfehle alle durchzuführen mit deinem Browser. Es sind uns beispielsweise Probleme mit dem Safari Browser bereits bekannt und wurden hier in der Community mehrfach gemeldet (siehe Beispiele hier) da Apple super proprietär geworden ist. Wir empfehlen im Admin nur mit dem Google Chrome oder MS Edge Browser zu arbeiten.

Hier sind einige weitere Schritt für deinen Browser, die du lokal durchführen kannst, um das Problem zu beheben:

• Cache und Cookies löschen: Manchmal können veraltete oder beschädigte Cache-Daten und Cookies Probleme auf Websites verursachen. Lösche den Cache und die Cookies in den Browsereinstellungen und versuche dann, die Seite erneut zu laden.
• Browser-Erweiterungen überprüfen: Deaktiviere alle Browser-Erweiterungen, insbesondere solche, die das Verhalten von Webseiten beeinflussen können (wie z.B. Werbeblocker, Skript-Blocker oder ähnliche Tools), und sieh nach, ob das Problem damit behoben wird.
• Shopify-Theme überprüfen: Gehe zu deinem Shopify-Admin-Bereich und überprüfe das verwendete Theme. Manchmal können Probleme durch Updates oder Änderungen an den Themen-Einstellungen entstehen. Überprüfe auch, ob kürzlich Änderungen am Thema durchgeführt wurden und setze diese gegebenenfalls zurück.
• Konflikte mit JavaScript/CSS prüfen: Wenn du benutzerdefinierte Skripte oder Stylesheets zu deinem Shop hinzugefügt hast, könnten diese Konflikte verursachen. Prüfe den Code auf Fehler oder Inkompatibilitäten.
• Reaktion des Ladens bei unterschiedlichen Bildschirmgrößen testen: Öffne deinen Shop auf einem Desktop und verkleinere oder vergrößere das Browserfenster, um zu sehen, ob das Scrollen bei bestimmten Größen funktioniert. Dies könnte auf ein responsives Design-Problem hinweisen.
• Prüfe das Konsolen-Log: Öffne die Entwicklertools in deinem Browser (in der Regel mit F12 oder Rechtsklick und „Untersuchen“ zugänglich) und überprüfe die Konsole auf Fehlermeldungen beim Laden der Seite und beim Versuch zu scrollen.
• Überprüfen auf kürzlich installierte Apps: Manchmal können Shopify-Apps Konflikte verursachen. Überprüfe, ob du kürzlich Apps installiert hast und deaktiviere sie gegebenenfalls temporär.

Wenn das Problem weiterhin besteht, führe bitte alle folgenden Schritte durch um ein lokales Problem auszuschließen. 

Lokale Fehlerbehebungs-Schritte - Um sicherzustellen, dass es sich nicht um ein Problem mit deinem Browser, deinem Gerät oder deiner Internetverbindung handelt, versuche bitte Folgendes:

1. Lösche den Cache und die Cookies (verwende in Chrome die Zeitspanne "Alle Zeiten").
   • Warum: Dadurch werden gespeicherte Informationen aus dem Browser entfernt, die Fehler verursachen.
     Lösung: Lösche regelmäßig Cache und Cookies.
      
2. Stelle sicher, dass die Cookie-Einstellungen des Browsers NICHT auf "Alle Cookies blockieren" eingestellt sind.
   • Warum: Wenn sie "Alle Cookies blockieren", werden einige Apps wie Flow, Scripts, Launchpad oder andere Apps in der Verwaltung möglicherweise nicht richtig angezeigt.
     Lösung: Stelle entweder "Alle Cookies zulassen" oder "Cookies von Drittanbietern im Inkognito-Modus blockieren" ein.
      
3. Versuche es mit einem anderen Webbrowser UND im Inkognito-Modus des Browsers.
   • Warum: Das schließt den Browser oder die Version des Browsers aus, die Fehler verursacht.
     Lösung: Aktualisiere den Browser, deinstalliere ihn und installiere ihn neu.
      
4. Wenn du im Inkognito-Modus immer noch ein Anzeigeproblem hast, überprüfe, ob sie die Browsererweiterungen deaktiviert haben, da diese das Aussehen der Seiten verändern können.
   • Warum: So werden Erweiterungen, die Fehler verursachen, ausgeschaltet.
     Lösung: Lösche ungenutzte Erweiterungen, schalte Erweiterungen aus.
      
5. Vergewissere dich, dass der Webbrowser auf dem neuesten Stand ist (wir unterstützen nicht jeden Browser, aber diese hier).
   • Warum: So vermeidest du, dass die Browserversion zu Fehlern führt.
     Lösung: Aktualisiere den Browser, deinstalliere den Browser und installiere ihn neu, verwende einen unterstützten Browser.
      
6. Probiere ein anderes Gerät aus, z. B. einen anderen Computer oder ein Mobiltelefon.
   • Warum: Dadurch wird das Gerät, das die Fehler verursacht, ausgeschaltet.
     Lösung: Starte das Gerät neu, aktualisiere das Betriebssystem.
      
7. Versuche es mit der Shopify Mobile App.
   • Warum: Dadurch wird verhindert, dass die webbasierte Version von Shopify Fehler verursacht.
     Lösung: Geräteabhängiges Problem, andere Beispiele in dieser Liste können helfen, die Lösung zu finden.
      
8. Probiere eine andere Internetverbindung aus (wechsle z.B. mit deinem Telefon zu einem Mobilfunknetz statt zu WLAN).
   • Warum: Dies schließt eine schwache Internetverbindung oder ein ISP-Problem aus, das zu Fehlern führt.
     Lösung: Internetbasiertes Problem, sprich mit dem Internetanbieter.
      
9. Stelle sicher, dass im Webbrowser keine Pop-ups blockiert werden.
   • Warum: So kannst du verhindern, dass Pop-ups übersehen werden, z. B. wenn für eine Funktion ein neuer Tab geöffnet werden muss.
     Lösung: Wähle "Popups zulassen" im Gerät/Browser. Google den Browser/das Gerät, um passende Lösungen zu finden.
      
10. Vergewissere dich, dass auf deinem Gerät oder Netzwerk keine Firewalls oder VPNs (virtuelle private Netzwerke) aktiviert sind, die Shopify blockieren.
    • Warum: Dadurch wird verhindert, dass Firewalls oder VPNs Fehler liefern. Beispiel: Kaspersky kann Shopify blockieren.
      Lösung: Stelle sicher, dass Shopify nicht blockiert wird, verwende einen anderen Standort für VPN, schalte VPN aus.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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.

[HolgerMoeller]

Hey Gabe,

ganz herzlichen Dank für Deine umfangreiche Antwort, ich werde das genau testen, ich denke, Du hast Recht mit Deinen Vermutungen, das Verhalten der Schaltflächen riecht stark nach Aktualisierungsproblem durch Javascript/Browser/wasauchimmer 😉

Wenn ich es gelöst habe, schreibe ich hier wieder zurück, damit das Kapitel dann (hoffentlich) erfolgreich abgeschlossen ist.

Danke und herzlichen Gruß!

Holger

[Gabe]

Hey Holger! @HolgerMoeller 

Ja, halte mich gerne auf dem Laufenden, wie ihr das löst! 

VG,

[HolgerMoeller]

Hey Gabe,

wir haben das Thema nun abgeschlossen, idem die oben aufgeführte Funktionalität nicht mehr verwendet wird. Wenn Artikel nicht vorratig sind, dann werden sie nun ganz klassisch als nicht vorrätig dargestellt mit der Möglichkeit, sich per Mail benachrichtigen zu lassen (s. Screen unten).

Die Funktion, die wir erst haben wollten, lief zu "wackelig", der Refresh funktionierte nicht auf allen Browsern/Endgeräten zuverlässig, daher war der Kunde dann ganz pragmatisch, ohne ein Forschungsprojekt hochziehen zu wollen 😅

Danke Dir nochmal für die tollen Anregungen und die Unterstützung 👍

Viele Grüße

Holger

[Gabe · Accepted solution]

Super freut mich! 😉