Hey @iamcane
Das ist keine tolle Kundenerfahrung wenn der Lagerstatus auf deiner Shopify-Seite nicht korrekt angezeigt wird und erst nach einem Refresh der Seite aktualisiert wird. Daher liegt das wahrscheinlich daran, dass der Lagerstatus nicht dynamisch ist. Shopify verwendet Liquid als Templating-Sprache, welche serverseitig gerendert wird. Das bedeutet, dass Änderungen am Lagerbestand nicht in Echtzeit auf der Clientseite reflektiert werden, es sei denn, es gibt einen Mechanismus, der die neuen Daten ohne komplettes Neuladen der Seite abruft.
Um das Problem zu lösen, dass der Lagerbestand sich nicht dynamisch aktualisiert, kannst du etwas wie Ajax verwenden. Ajax erlaubt es dir, asynchron Daten zu laden, ohne dass die gesamte Seite neu geladen werden muss. Das könntest du wie folgt umsetzen:
- Ajax API Call hinzufügen: Du müsstest einen Ajax Call zu Shopify’s API hinzufügen, der den Lagerbestand des Produkts abruft, sobald ein Nutzer eine Variante auswählt.
- Event Listener: Du müsstest JavaScript verwenden, um einen Event Listener hinzuzufügen, der ausgelöst wird, wenn eine Variante ausgewählt wird.
- Update der Anzeige: Nachdem der Ajax Call den aktuellen Lagerbestand erfolgreich abgerufen hat, musst du das DOM entsprechend aktualisieren, um den neuen Lagerstatus anzuzeigen.
Hier ein grundlegendes Beispiel, wie du es in deinem Shopify-Theme implementieren könntest:
// Event Listener für Variante Auswahl
document.querySelector('[id^="ProductSelect-"]').addEventListener('change', function(e) {
var variantId = e.target.value;
fetch(`/variants/${variantId}/?section_id=product`)
.then(response => response.json())
.then(data => {
var stock = data.inventory_quantity;
updateStockDisplay(stock); // Funktion, die du definieren musst, um den Lagerstatus zu aktualisieren
});
});
function updateStockDisplay(stock) {
// Hier aktualisierst du das DOM basierend auf dem neuen Lagerbestand
}
Bitte beachte, dass der oben genannte Code nur ein grundlegendes Beispiel ist und an deine spezifische Implementierung angepasst werden muss. Du müsstest die richtigen Selektoren für deine HTML-Elemente einsetzen und die updateStockDisplay Funktion implementieren, die dein Lagerstatus-HTML basierend auf der Antwort aktualisiert.
Den angepassten Liquid-Code würdest du an der Stelle im Theme platzieren, an der der Lagerstatus angezeigt werden soll, was, wie du richtig vermutet hast, in der Nähe des Preises oder des “In den Warenkorb”-Buttons ist. Du musst auch sicherstellen, dass der JavaScript-Code geladen wird, was normalerweise im theme.liquid oder in einer spezifischen JavaScript-Datei, die im Theme eingebunden ist, erfolgt.
Für eine genauere Implementierung und Tests wären allerdings detailliertere Kenntnisse deines spezifischen Themes und eventuell auch eine Anpassung der API-Calls nötig, da sich die APIs und die Theme-Struktur je nach Shopify-Version und Theme unterscheiden können.
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.
(aber eben… funktioniert irgendwie noch nicht richtig…)