Liquid, JavaScript, Themes
Hi zusammen,
Wie kann ich in meinem Shop eine dynamische Anzeige für verfügbare Plätze (z. B. 30) umsetzen, die sich unabhängig von Varianten anpasst, sobald ein Platz gebucht wird?
Aktuell nutze ich die App OC Quantity Breaks & Limit, jedoch wird die Anzeige fälschlicherweise pro Variante berechnet.
Dadurch ergibt sich statt der 30 Plätze auf Produktebene eine Gesamtanzahl von 480 Einheiten über alle Varianten.
Hat jemand eine Lösung oder Erfahrung damit?
Die Bestandsmenge auf der PDP berechnen und anzeigen? Wenn das das gleiche Problem auf Varianten Ebene darstellt dann musst du Produkte ohne Varianten verwenden, oder mit Coding lösen da der Bestand meistens auf Varianten Ebene arbeitet, nicht auf Produkt Ebene:
Oder ein Liquid wie folgendes auf der PDP einbauen:
{% assign total_inventory = 0 %}
{% for variant in product.variants %}
{% assign total_inventory = total_inventory | plus: variant.inventory_quantity %}
{% endfor %}
<div class="available-places">
<strong>Verfügbare Plätze:</strong> {{ total_inventory }}
</div>
Aber wenn Kunden Plätze buchen, soll die Anzahl dynamisch aktualisiert werden - erfordert JavaScript, um die Seite nicht neu laden zu müssen:
document.addEventListener('DOMContentLoaded', function() {
const availablePlaces = document.querySelector('.available-places strong');
document.querySelector('form[action="/cart/add"]').addEventListener('submit', function(event) {
// Simuliere Buchung: Ziehe 1 von der Gesamtanzahl ab
const bookedAmount = parseInt(document.querySelector('[name="quantity"]').value, 10) || 1;
const currentPlaces = parseInt(availablePlaces.textContent.match(/\d+/)[0], 10);
if (currentPlaces > 0) {
availablePlaces.textContent = `Verfügbare Plätze: ${currentPlaces - bookedAmount}`;
}
});
});
Logik hinzufügen, um die Kunden informiert, wenn keine Plätze mehr verfügbar sind:
{% if total_inventory > 0 %}
<div class="available-places">
<strong>Verfügbare Plätze:</strong> {{ total_inventory }}
</div>
{% else %}
<div class="no-places-available">
<strong>Leider sind alle Plätze ausgebucht!</strong>
</div>
{% endif %}
Mit dem Shopify-API arbeiten um den gesamten Bestand eines Produkts ermitteln und dynamisch die Gesamtanzahl bei Buchungen anpassen...
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024