Heyb @JH6
Danke für die Anwendungsfall und wenn euch die Apps nicht passen, dann wird das womöglich eine eigene Anpassung verlangen und gerne kann ich dazu Coding Tipps abgeben. Welche genauen Apps hast du bis jetzt unerfolgreich getestet?
Vorher jedoch wäre vielleicht eine einfache Möglichkeit, Staffelpreise im Shopify-Shop ohne die Verwendung einer App oder einer Tabelle auf der Produktseite umzusetzen, ist die Verwendung von Varianten und zwar wie folgt:
- Wähle das gewünschte Produkt aus und klicke darauf, um die Produktdetails zu bearbeiten.
- Dann auf “Varianten hinzufügen” und erstellen Sie eine neue Variante mit dem Titel “Menge”.
Füge die verschiedenen Staffelungen hinzu, z.B.:
- “1-29 Stück”
- “30-49 Stück”
- “50+ Stück”
Lege für jede Variante den entsprechenden Preis fest:
- “1-29 Stück” = 50 €
- “30-49 Stück” = 45 €
- “50+ Stück” = 40 €
Speicher die Änderungen. Nun wird auf der Produktseite ein Dropdown-Menü mit den verschiedenen Mengenstaffelungen und den zugehörigen Preisen angezeigt. Wenn Kunden eine Staffelung auswählen, wird der Preis automatisch angepasst.
Beachte jedoch, dass diese Methode einige Einschränkungen hat wie z. B. wie das Inventar gefolgt wird. Dann können auch Kunden nicht die genaue Menge auswählen, sondern nur die vorgegebenen Staffelungen. Außerdem kann diese Methode bei komplexeren Staffelpreismodellen schnell unübersichtlich werden.
Eine weitere Möglichkeit besteht darin, benutzerdefinierten Code im Theme hinzuzufügen, um Staffelpreise basierend auf der Menge zu berechnen und anzuzeigen. Diese Lösung erfordert jedoch Kenntnisse in Liquid, HTML, CSS und JavaScript und kann je nach Theme unterschiedlich sein.
Wenn du es selber auf deiner Produktkorbseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.
Ä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!
Es DIY machen
Gehe in das Theme → Aktionen → Duplizieren → Code bearbeiten und suche die “product-template.liquid” Datei (oder eine ähnlich benannte Datei, die für die Produktseite zuständig ist) im Ordner “Sections” oder “Templates”. Suche den Abschnitt, in dem der Produktpreis angezeigt wird, und füge den folgenden HTML-Code ein, um den Staffelpreis anzuzeigen:
Öffne die “theme.js” Datei (oder eine ähnlich benannte Datei) im Ordner “Assets” und füge den folgenden JavaScript-Code hinzu, um den Staffelpreis basierend auf der ausgewählten Menge zu berechnen und anzuzeigen:
function updateTierPrice() {
const quantityInput = document.querySelector('input[name="quantity"]');
const tierPriceElement = document.querySelector('.tier-price');
if (!quantityInput || !tierPriceElement) return;
const quantity = parseInt(quantityInput.value, 10);
let tierPrice;
if (quantity >= 1 && quantity <= 29) {
tierPrice = 50;
} else if (quantity >= 30 && quantity <= 49) {
tierPrice = 45;
} else if (quantity >= 50) {
tierPrice = 40;
}
tierPriceElement.innerText = `Staffelpreis: €${tierPrice.toFixed(2)}`;
}
document.addEventListener('DOMContentLoaded', function () {
const quantityInput = document.querySelector('input[name="quantity"]');
if (quantityInput) {
quantityInput.addEventListener('change', updateTierPrice);
updateTierPrice();
}
});
Öffne die “theme.scss.liquid” Datei (oder eine ähnlich benannte Datei) im Ordner “Assets” und füge den folgenden CSS-Code hinzu, um den Staffelpreisbereich zu formatieren:
.product-price-tier {
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
Das obige ist, wie gesagt, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
