FROM CACHE - de_header

Lagerbestand Anzeige bei mehreren Varianten dynamisch ändern

Thomas201
Tourist
11 0 1

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 %}

 

 

 

2 ANTWORTEN 2

Niki_K
Shopify Partner
447 45 124

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! 🙂

 

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.

soenmez
Shopify Partner
50 6 17

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 🙂

Kenan Sönmez | CTO @ Klondev Automation GmbH
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- https://klon.dev/