FROM CACHE - de_header

Lagerbestand Anzeigen Liquid Probleme

Gelöst

Lagerbestand Anzeigen Liquid Probleme

addy33
Besucher
2 1 1

Hallo Zusammen.

 

ich habe ein kleines Problem. Und zwar habe ich ein Liquid, das nicht so richtig funktioniert, obwohl es das sollte, meiner Meinung nach...

Ich habe bei der Produktseite im theme 'Dawn' ein Benutzerdefiniertes Liquid erstellt. Dieses sollte anzeigen, ob Lagerbestand vorhanden ist, wenig vorhanden, oder nicht vorhanden. Ich selle ihn hier zur Verfügung, wenn jemand ihn kopieren will, nur gerne 🙂 (aber eben... funktioniert irgendwie noch nicht richtig...)

 

{% assign stock = product.inventory_quantity %}
{% if stock == 0 %}
  <div style="display:inline-block; background-color:red; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">!</div>
  <span style="color:red;">Nicht Verfügbar</span>
{% elsif stock > 0 and stock <= 3 %}
  <div style="display:inline-block; background-color:orange; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">!</div>
  <span style="color:orange;">Nur noch wenige Verfügbar</span>
{% else %}
  <div style="display:inline-block; background-color:green; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">✓</div>
  <span style="color:green;">Ab Lager Verfügbar</span>
{% endif %}

Das problem ist, egal welchen Stock ich habe, es zeigt mir immer an, dass genügend Produkte vorhanden sind, das ist natürlich uncool... hat jemand einen Lösungsvorschlag?

 

Hier noch ein abzug von der Website

addy33_0-1678098809528.png

 

 

Liebe Grüsse

Addy33

1 AKZEPTIERTE LÖSUNG

addy33
Besucher
2 1 1

Erfolg.

Hallo Zusammen. Ich könnte das Problem selber Lösen. ich habe den Code Leicht angepasst, anhand des im Internet gefundenen Codes.

 

{% assign product = product.selected_or_first_available_variant %}
{% assign stock = product.inventory_quantity %}
{% if stock == 0 %}
  <div style="display:inline-block; background-color:red; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">!</div>
  <span style="color:red;">Nicht Verfügbar</span>
{% elsif stock > 0 and stock <= 3 %}
  <div style="display:inline-block; background-color:orange; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">!</div>
  <span style="color:orange;">Nur noch wenige Verfügbar</span>
{% else %}
  <div style="display:inline-block; background-color:green; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">✓</div>
  <span style="color:green;">Ab Lager Verfügbar</span>
{% endif %}

Es Funktioniert jetzt einwandfrei. Ihr dürft diesen Code selbstverständliche Kopieren und für eure Anwendungen nutzen, wenn ihr es gerne möchtet. Um Feedback wäre ich natürich auch nicht Unglücklich 🙂 

Lösung in ursprünglichem Beitrag anzeigen

7 ANTWORTEN 7

addy33
Besucher
2 1 1

Erfolg.

Hallo Zusammen. Ich könnte das Problem selber Lösen. ich habe den Code Leicht angepasst, anhand des im Internet gefundenen Codes.

 

{% assign product = product.selected_or_first_available_variant %}
{% assign stock = product.inventory_quantity %}
{% if stock == 0 %}
  <div style="display:inline-block; background-color:red; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">!</div>
  <span style="color:red;">Nicht Verfügbar</span>
{% elsif stock > 0 and stock <= 3 %}
  <div style="display:inline-block; background-color:orange; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">!</div>
  <span style="color:orange;">Nur noch wenige Verfügbar</span>
{% else %}
  <div style="display:inline-block; background-color:green; color:white; border-radius:50%; height:20px; width:20px; text-align:center; line-height:18px; font-size:10px;">✓</div>
  <span style="color:green;">Ab Lager Verfügbar</span>
{% endif %}

Es Funktioniert jetzt einwandfrei. Ihr dürft diesen Code selbstverständliche Kopieren und für eure Anwendungen nutzen, wenn ihr es gerne möchtet. Um Feedback wäre ich natürich auch nicht Unglücklich 🙂 

Gabe
Shopify Staff
18293 2871 4235

@addy33 

 

Danke auch für die Lösung denn das kann auch andere helfen die dasselbe machen wollen!

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

paratbags
Besucher
1 0 0

Hey sehr cool , das du so einen Code freigeben hast sowas habe ich gesucht, ich weiß jetzt bloß nicht unter welchen abschnitt ich den einfügen kann?

kannst du mir da noch helfen ?

 

Liebe Grüße

Eric

Gabe
Shopify Staff
18293 2871 4235

Hey Alle! 

 

Danke für die Code Korrektur und der Hauptunterschied ist die Zeile:

 

{% assign product = product.selected_or_first_available_variant %}

 

Das bedeutet, dass du den Lagerbestand des ausgewählten oder des ersten verfügbaren Variantenprodukts abrufst, anstatt des Hauptprodukts. Wenn ein Produkt mehrere Varianten hat (z.B. verschiedene Größen oder Farben), könnte ja jede Variante einen anderen Lagerbestand haben, und die Korrektur den Lagerbestand der tatsächlichen ausgewählten Variante betrachtet und nicht den Gesamtlagerbestand des Hauptprodukts.

 

Platziere den Code an der Stelle im Theme, an der du den Lagerstatus anzeigen möchtest, wahrscheinlich in der Nähe des Preis- oder "In den Warenkorb"-Buttons auf der Produktseite im "product.liquid" oder in einer Datei, die ähnlich benannt ist, je nach Theme.

 

Wenn du es selber programmieren möchtest dann in einer Themekopie/Testumgebung zuerst testen. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen

 

Hoffe das hilft! 😉

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

iamcane
Besucher
2 0 0

Hallo zusammen & vielen Dank für diese Lösung. Aus irgendwelchen Gründen ändert sich der Lagerbestand bei uns nicht (immer grün auf Lager trotz dem aktuellen Code)

 

Hat jemand eine Idee?

iamcane
Besucher
2 0 0

Ok, es scheint doch zu funktionieren, aber erst nachdem ich die Produktseite aktualisiert habe und nicht nachdem mach die Out Of Stock Variante ausgewählt hat, das ist etwas verwirrend.

Gabe
Shopify Staff
18293 2871 4235

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.

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