Overlay auf Produktseite einführen

[kschulze]

Hallo,

ist es möglich ein Schriftzug zu implementieren "nur noch 10 Stück verfügbar" wenn die Anzahl der verkaufbaren Produkte unter 10 sinkt

lg

Karsten

[Ben310 · Accepted solution]

Irgendwie sind deine ganzen Fragen in der Community unbeantwortet untergegangen Karsten...

Um die verbleibende Menge der Produkte auf der CollectioN Page unterhalb jedem Produkt anzuzeigen kannst du ein benutzerdefiniertes Liquid-Snippet hinzufügen -> Online-Shop -> Themes -> Aktionen -> Code.  Das aber bitte zuerst in einer Theme-Kopie/Testumgebung testen. 

Finde die Datei wie sections/main-collection-product-grid.liquid (oder ähnliche, die für das Product Grid verantwortlich ist). Füge die folgende FOR-Loop an die Stelle hinzu, an der die verbleibende Menge angezeigt werden soll:

{% for product in collection.products %}
  <li class="grid__item">
    <div class="card">
      <!-- Existierende Produktinformationen -->
      <h3 class="card__heading">
        <a href="{{ product.url }}">{{ product.title }}</a>
      </h3>
      <div class="price">{{ product.price | money }}</div>
      
      <!-- Verfügbarkeitsanzeige -->
      {% assign total_inventory = product.variants | map: 'inventory_quantity' | sum %}
      {% if total_inventory > 10 %}
        <p class="inventory-info">Auf Lager</p>
      {% elsif total_inventory > 0 %}
        <p class="inventory-info">Nur noch {{ total_inventory }} Stück verfügbar!</p>
      {% else %}
        <p class="inventory-info">Nicht auf Lager</p>
      {% endif %}
    </div>
  </li>
{% endfor %}

CSS für das Styling:

.inventory-info {
    font-size: 14px;
    color: #ff0000; /* Rot für niedrige Bestände */
    font-weight: bold;
}

Hoffe das hilft dir weiter! 😉