Bestand anzeigen Syntax Fehler

[Buenyamin]

Ich möchte, dass mein Theme, mit einem grünen bzw. roten Icon anzeigt, ob das Produkt auf Lager ist oder nicht. (siehe folgendes Beispiel)

Dazu fügte ich den Code:

{% if product.available %}
{% assign stockQuantity = product.variants.first.inventory_quantity %}
{% assign stockIcon = stockQuantity > 0 ? 'green' : 'red' %}
<p>Lagerbestand: <span class="stock-icon stock-icon-{{ stockIcon }}"></span> {{ stockQuantity }}</p>
{% else %}
<p>Aktuell nicht auf Lager</p>
{% endif %}

Spoiler

da tauchen dann Fehler auf:


Liquid syntax error (snippets/product-buttons line 106): Expected end_of_string but found comparison in "{{stockQuantity > 0 ? 'green' : 'red' }}"

[Gabe]

Hey @Buenyamin 

Danke für die Bilder und dieser grüner "In-Stock" Punkt ist ein Feature des Impulse Themes wie es aussieht und deswegen wird das nicht so einfach sein so einen Punkt in dein Theme einzubauen. 

Der einfache Weg mit Apps:

Apps gibt es die das möglich machen was du brauchst. Siehe eine Demo die ich für dich ausgesucht habe hier.

Wenn du es doch DIY machen möchtest:

Wenn du es selber auf deiner XXXXseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. 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 die hier 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 negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Deine Verwendung der ternären Operation ist korrekt, aber sie entspricht nicht der Syntax, die von der Shopify Liquid-Templating-Engine verwendet wird. Die ternäre Operation in Liquid ist strukturiert wie eine IF-ELSE Statement. So könnte ein Beispiel Code aussehen:

{% if product.available %}
 {% assign stockQuantity = product.variants.first.inventory_quantity %}
 {% if stockQuantity > 0 %}
   {% assign stockIcon = 'green' %}
 {% else %}
   {% assign stockIcon = 'red' %}
 {% endif %}
 <p>Lagerbestand: <span class="stock-icon stock-icon-{{ stockIcon }}"></span> {{ stockQuantity }}</p>
{% else %}
 <p>Aktuell nicht auf Lager</p>
{% endif %}

In diesem obigen Code wird zuerst geprüft, ob das Produkt verfügbar ist. Wenn ja, wird die Lagermenge zugewiesen und anschließend geprüft, ob diese Menge größer als Null ist. Wenn dies der Fall ist, wird stockIcon auf 'green' gesetzt, ansonsten auf 'red'.

Jetzt berücksichtigt dieser Code aber nicht einen "low stock"-Status wie in meinem Impulse Theme Beispiel oben abgebildet. Wir können diesen Zustand hinzufügen, indem wir eine weitere Bedingung festlegen. Zum Beispiel könnte 'low stock' definiert werden, wenn die Lagermenge weniger als 10 ist:

{% if product.available %}
 {% assign stockQuantity = product.variants.first.inventory_quantity %}
 {% if stockQuantity > 10 %}
   {% assign stockIcon = 'green' %}
 {% elsif stockQuantity > 0 %}
   {% assign stockIcon = 'yellow' %}
 {% else %}
   {% assign stockIcon = 'red' %}
 {% endif %}
 <p>Lagerbestand: <span class="stock-icon stock-icon-{{ stockIcon }}"></span> {{ stockQuantity }}</p>
{% else %}
 <p>Aktuell nicht auf Lager</p>
{% endif %}

Es müssen auch die entsprechenden CSS-Stile für diese Lagerbestandsanzeigen definiert werden. Hier ist ein einfaches Beispiel:

.stock-icon {
 display: inline-block;
 vertical-align: middle;
 width: 10px;
 height: 10px;
 border-radius: 50%;
}

.stock-icon-green {
 background-color: green;
}

.stock-icon-yellow {
 background-color: yellow;
}

.stock-icon-red {
 background-color: red;
}

Hoffe das hilft! 😉

[Buenyamin]

Habe jetzt folgenden Code:

<div class="delivery-info">
  {% for variant in product.variants %}
    {%- if variant == product.selected_or_first_available_variant -%}
      {% if variant.available %}
        <p id="avail-{{ variant.id }}" class="product__text product__text-availability">
          <span class="dot dot-green"></span>
          <b>Auf Lager</b>
        </p>
      {% else %}
        <p id="avail-{{ variant.id }}" class="product__text product__text-availability">
          <span class="dot dot-orange"></span>
          <b>Demnächst verfügbar</b>
        </p>
      {% endif %}
    {% endif %}
  {% endfor %}
</div>

<style>
  .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .dot-green {
    background-color: green;
  }
  .dot-orange {
    background-color: orange;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var variants = document.querySelectorAll('[id^="avail-"]');
    var radios = document.querySelectorAll('[name="variant"]');
    
    function updateAvailabilityText() {
      variants.forEach(function(variant) {
        variant.classList.add('hidden');
      });
      
      radios.forEach(function(radio) {
        if (radio.checked) {
          var variantId = radio.getAttribute('id').replace('variant-', '');
          var variantText = document.querySelector('#avail-' + variantId);
          variantText.classList.remove('hidden');
        }
      });
    }
    
    radios.forEach(function(radio) {
      radio.addEventListener('change', updateAvailabilityText);
    });
    
    updateAvailabilityText();
  });
</script>

aber es funktioniert nur bedingt. Es wird beim Laden der Produktseite immer nur kurz angezeigt. Weißt du, woran das Problem liegen kann?

Hier das Preview:

https://fek39vcsq6dmqfee-46261272731.shopifypreview.com

[Gabe]

Hey @Buenyamin 

Danke für den Preview Link und da ich sehe derzeit folgendes:

Du verwendest im obigen Code also JS um die Verfügbarkeitsinformationen basierend auf der ausgewählten Produktvariante zu aktualisieren. Diese Informationen werden zunächst ausgeblendet und dann wieder eingeblendet, sobald die entsprechende Variante ausgewählt ist.

Wenn die Verfügbarkeitsinformationen nur kurz angezeigt werden und dann wieder verschwinden, könnte es sein, dass ein anderes Skript auf der Seite die Anzeige dieser Elemente beeinflusst. 

Überprüfe, ob es andere Skripte auf der Seite gibt, die die hidden Class hinzufügen oder entfernen. Es könnte sein, dass ein anderes Skript in Konflikt steht.

Dann die Developer Console des Browsers verwenden, um zu sehen, ob JavaScript-Fehler auftreten. Wenn Fehler auftreten in der Dev Console zu sehen sind, prüfe jegliche Hinweise in den Fehler die auf das Problemursache deuten können:

Es könnte auch sein, dass das Skript ausgeführt wird, bevor alle Elemente der Seite vollständig geladen sind. In diesem Fall versuche, das Skript ans Ende der Page oder Code zu verschieben oder es in einen window.onload Event Handler zu setzen, um sicherzustellen, dass es ausgeführt wird, nachdem die gesamte Seite geladen ist.

Beispiel:

window.onload = function() {
 // Dein Skript hier
};

Ich hoffe du kannst verstehen, dass ohne einen direkten Zugriff zu deinem Shop und ein Deep-Dive in deinen Code, ist es zu schwierig, von hier aus in der Community genau zu verstehen, was das Problem sein könnte. 

Du könntest auch einen unserer Experten engagieren indem du die hier eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.