Lagerbestand Anzeige bei mehreren Varianten dynamisch ändern

[Thomas201]

Hallo zusammen,

ich habe diesen Code für die Anzeige eines Lagerbestandes auf der Produktseite gefunden. Diesen setze ich u.a. bei Socken ein, bei denen man sich die passende Farbe UND Größe aussuchen kann. So gibt es z.B. Socken schwarz in  der Größe 36 genügend, während Größe 40 oder Farbe rot und Größe 42 ausverkauft ist.

Dieser Code funktioniert so bei mir leider nicht. Die Anzeige bleibt nach dem ersten Aufruf statisch - auch wenn ich eine Selection ändere (z.B. Größe oder Farbe).

Hat jemand eine Idee, woran es liegen könnte oder müsste ich Javascript einsetzen?

{% 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:22px; font-size:12px;font-weight:900;">!</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:22px; font-size:12px;font-weight:900;">!</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:22px; font-size:12px;font-weight:900;">✓</div>
  <span style="color:green;">Auf Lager</span>
{% endif %}

[Niki_K]

Hallo @Thomas201,

du musst JavaScript einsetzen so dass der Lagerbestand aktualliziert wird wenn du eine Variant auswählst. Vor ein paar Monatem habe ich einen Artikel darüber geschrieben. Es ist auf Englisch aber ich hoffe dass es dir dennoch helfen wird.

Hier ist der Artikel: How to display the number of products left in stock on product pages?

Ich habe die Funktion für das Dawn-Theme entwickelt. Ich weiß nicht, welches Theme du verwendest, aber die Einstellungen sollten ähnlich sein (du musst dann z.B. die CSS-Klassen anpassen, damit sie zum Theme passen).

Lass mich wissen, ob es funktioniert! 🙂

[soenmez]

Guten Tag Thomas,

vielen Dank für deine Frage hier im Shopify Community Forum.

An sich bist du schon auf dem richtigen Weg, die Liquid Variablen werden aber serverseitig gerendert und deshalb beim Ändern der Varianten nicht upgedatet.

Du kannst HTML-Elemente mit einer ID versehen, um diese über Javascript zu aktualisieren:

<div>
  <span>Lagerbestand:</span>
  <span id="stock"></span>
  <span id="status"></span>
</div>

Im Head Bereich der Produktseite kannst du dann eine "updateStock" Methode einbauen, in dieser liest du die ausgewählte Variante aus und änderst die Darstellung des Stocks und des Status.

<script>
  function updateStock() {
    var product = {{ product | json }};
    var variant = product.variants.filter(function(v) {
      return v.id == {{ variant.id }};
    })[0];
    var stock = variant.inventory_quantity;
    var stockEl = document.getElementById('stock');
    var statusEl = document.getElementById('status');
    
    Beispielcode
    if (stock == 0) {
      stockEl.innerHTML = '....';
      statusEl.style.color = '....';
    }
  }

  document.addEventListener('DOMContentLoaded', updateStock);
</script>

Sobald sich die ausgewählte Variante ändert, kannst du diese Methode aufrufen:

<script>
  document.getElementById('product-select').addEventListener('change', function() {
    updateStock();
  });
</script>

Viel Erfolg bei der Implementierung 🙂

[mehmeti42]

Hallo @soenmez,

ich habe dir auf LinkedIn auch eine Nachricht geschrieben, der von Bahacan Tür geschickt wurde. Wir haben das gleiche Problem und würden uns sehr freuen, wenn du uns behilflich sein könntest.

Liebe Grüße und bis bald!

Mehmet