> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Rewards-Block
> Der Rewards-Block des Aftersell Cart: gestaffelter Gratisversand, Rabatte und Gratisgeschenke, einschließlich unterschiedlicher Stufen nach Markt, Land oder Währung.
> Der **Rewards**-Block zeigt einen Fortschrittsbalken hin zu Reward-Stufen (Gratisversand, ein Bestellrabatt oder ein Gratisgeschenk), die Käufer freischalten, indem sie mehr in ihren Warenkorb legen. Er motiviert zu größeren Warenkörben, indem er Käufern zeigt, wie nah sie am nächsten Reward sind, und gewährt qualifizierende Rewards automatisch. Stufen können nach Markt, Land und Währung variieren.
## Validierung der Stufen-Schwellenwerte
Die Stufenliste jeder Bedingung fasst bis zu **4** Stufen — ein Rewards-Block mit mehreren Markt-, Länder- oder Währungsbedingungen speichert bis zu 4 pro Bedingung, und da die erste passende Bedingung angezeigt wird, sieht jeder einzelne Käufer höchstens 4. Der Schwellenwert jeder Stufe muss strikt größer sein als der der darüberliegenden Stufe — Schwellenwerte müssen in aufsteigender Reihenfolge sein. Wenn der Schwellenwert einer Stufe gleich oder niedriger ist als der der vorherigen Stufe, erscheint ein Inline-Fehler am Schwellenwert-Feld dieser Stufe und der **Save**-Button ist blockiert, bis das Problem behoben ist. Die betroffene Stufe klappt automatisch aus, damit der Fehler sichtbar ist.
Wenn Stufe 1 zum Beispiel auf \$100 gesetzt ist, muss Stufe 2 auf \$101 oder höher gesetzt werden.
## Verhalten
* Der Fortschritt **schließt** Reward-Geschenk-Zeilen, Product-add-on-Zeilen, Versandschutz-Zeilen und Geschenkkarten von der Summe **aus**, damit diese Artikel den Käufer nicht künstlich Richtung Reward treiben.
* Die Nachricht zeigt den verbleibenden Betrag oder die verbleibende Anzahl bis zur nächsten Stufe, oder die Abschluss-Nachricht, sobald alle Stufen erreicht sind.
* **Gratisgeschenke werden automatisch gewährt.** Wenn ein Käufer eine Geschenk-Stufe erreicht, wird das Geschenk in den Warenkorb gelegt; fällt er darunter, wird das Geschenk entfernt. Bei ausgeschalteten stapelbaren Rewards wird nur das Geschenk der höchsten erreichten Stufe gewährt.
* **Add back removed free gifts** steuert, was passiert, wenn ein Käufer ein automatisch gewährtes Geschenk manuell entfernt. Wenn aktiviert (der Standard), wird das Geschenk beim nächsten Warenkorb-Update automatisch wieder hinzugefügt. Wenn deaktiviert, wird die Entfernung respektiert und das Geschenk bleibt für den Rest dieser Sitzung aus dem Warenkorb — Käufer kämpfen also nicht gegen den Warenkorb, um ein Geschenk abzulehnen.
## Einstellungen
| Einstellung | Was sie steuert | Standard |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
| **Rewards calculation** | Ob der Fortschritt nach **Cart total (\$)** oder **Cart quantity (#)** gemessen wird. | Cart total (\$) |
| **Stack rewards across tiers** | An: Jeden Reward anwenden, den der Käufer freischaltet, bis zur höchsten erreichten Stufe. Aus: Nur den Reward der höchsten freigeschalteten Stufe anwenden. | An |
| **Add back removed free gifts** | Ein verdientes Gratisgeschenk erneut hinzufügen, nachdem der Käufer es entfernt hat. | An |
| **Show tier icons** | Ob Stufen-Symbole auf dem Balken erscheinen. | An |
| **Show tier labels** | Ob der Label-Text an jeder Stufen-Markierung auf dem Balken erscheint. | Aus |
| **Text after completing full rewards bar** | Rich Text, der angezeigt wird, sobald alle Stufen erreicht sind. | `All rewards unlocked!` |
| **Tiers** | Die Reward-Stufen (unten). Bis zu **4** pro Bedingung; das Panel zeigt einen `n/4`-Zähler und deaktiviert **Add tier** bei der Obergrenze. | Keine |
Jede **Stufe** klappt aus zu:
| Stufen-Einstellung | Was sie steuert | Standard |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| **Reward type** | **Free shipping**, **Order discount** oder **Free gift**. Eine Änderung setzt Titel und Fortschrittsbalken-Label dieser Stufe auf die Standard-Formulierung des neuen Typs zurück. | Free shipping |
| **Threshold (\$)** / **Threshold (items)** | Die Warenkorb-Summe oder Artikelanzahl, die die Stufe freischaltet. Das Label folgt **Rewards calculation**. Minimum `1`. | `50` |
| **Discount value type** | Nur Bestellrabatte: **Percentage (%)** oder **Fixed amount (\$)**. | Percentage (%) |
| **Percentage off** / **Amount off** | Nur Bestellrabatte: die Rabatthöhe. Prozentwerte sind auf 100 begrenzt. | `10` |
| **Title before achieving tier** | Rich-Text-Nachricht, die angezeigt wird, solange dem Käufer noch etwas zur Stufe fehlt. Unterstützt das `{{amount}}`-Token. | `You're {{amount}} away from free shipping!` |
| **Progress bar label** | Das Label, das an der Stufen-Markierung angezeigt wird. | `Free shipping` |
| **Gift products** | Nur Gratisgeschenke: die gewährten Produkte/Varianten, bis zu **3** pro Stufe. | Keine |
## Platzierung und Limits
* **Region:** beliebig (oben, Body oder unten).
* **Maximum:** 1 pro Warenkorb-Zustand — der gefüllte und der leere Warenkorb erhalten jeweils einen eigenen.
* **Zustand:** sowohl gefüllter als auch leerer Warenkorb.
* Nicht standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn also entfernen oder ausblenden.
## Rewards pro Markt
Rewards ist heute der Block mit der vollständigen **Conditions**-UI: Definiere mehrere Sets von Stufen, die jeweils auf einen **Shopify-Markt**, ein **Kundenland** oder eine **Kundenwährung** zielen (**In** oder **Not in**). Die erste passende Bedingung wird dem Käufer angezeigt. Wenn keine passt, rendert der Block für ihn nichts.
Jede Bedingung ist eine Karte im Einstellungs-Panel (**When** + Bedingung). Darunter enthält ein **Display**-Abschnitt die Stufen für diese Bedingung. Halte spezifische Regeln über einem **All buyers**-Catch-all. Die Reihenfolge ist Priorität, keine Kombination aller Treffer.
Du kannst die letzte Bedingung nicht löschen (mindestens eine ist immer erforderlich). Die Editor-Vorschau wertet den echten Käufer nicht aus; wähle eine Bedingung im Panel, um diese Variante in der Vorschau zu sehen.
Wie Bedingungen mit dem Augen-Toggle und anderen Blöcken zusammenhängen, siehe [Nach Markt, Land oder Währung ein- oder ausblenden](/de/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency).
## Benutzerdefiniertes Template
Unterstützt ein [benutzerdefiniertes Template](/de/aftersell/cart/custom-templates) über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Das sind die Props, die er erhält.
| Prop | Typ | Wofür sie ist |
| -------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `milestones` | `Milestone[]` | Die Reward-Stufen, in Reihenfolge. Siehe unten. |
| `rewardsMessageHtml` | `string` | Die Fortschritts- oder Abschluss-Nachricht als bereinigtes HTML. |
| `showIcons` | `boolean` | Ob der Händler Stufen-Symbole aktiviert hat. |
| `showTierLabels` | `boolean` | Ob der Händler Stufen-Balken-Labels aktiviert hat. |
| `isLoading` | `boolean` | Hier immer `false`: Der Block rendert sein integriertes Skeleton während des Ladens und ruft dein Template erst auf, wenn der Warenkorb bereit ist. |
Jeder `Milestone`:
| Feld | Typ | Wofür es ist |
| ----------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | Stabiler Schlüssel für die Stufe. Verwende ihn als deinen React-`key`. |
| `label` | `string` | Das Label der Stufe, als reiner Text. |
| `icon` | `ReactElement \| null` | Vorgerendertes Icon-Element. `null`, wenn die Stufe keins hat. Rendere es direkt: `{m.icon}`. |
| `isCompleted` | `boolean` | Ob der Warenkorb diese Stufe erreicht hat. |
| `positionPercent` | `number` | Wie voll **das eigene Segment dieser Stufe** auf dem Balken ist, `0` bis `100` — keine Position entlang eines gemeinsamen Balkens. |
```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function Rewards(props) {
return (
{props.milestones.map((milestone) => (
// Each tier gets its own track; positionPercent (0-100) fills that track.
{props.showIcons && milestone.icon ? milestone.icon : null}
{props.showTierLabels && milestone.label !== '' ? milestone.label : null}
))}
);
}
```
`m.icon` ist ein **vorgerendertes Element**, keine URL und kein Icon-Name — rendere es also direkt, statt daraus ein Bild-Element bauen zu wollen.
`milestones` ist innerhalb eines benutzerdefinierten Templates nie leer. Wenn es keine Stufen anzuzeigen gibt, rendert der Block nichts und dein Template wird gar nicht aufgerufen, du brauchst also keinen Leerzustands-Zweig.
## Design
Style diesen Block über seinen **Design**-Abschnitt im Einstellungs-Panel. Das sind blockspezifische Overrides, die über deinem globalen Design liegen und darauf zurückfallen, wenn sie leer sind.
### Text
Der Abschnitt **Text** in Design lässt dich die Typografie der Rewards-Textelemente steuern. Verwende den **Text element**-Picker, um zwischen ihnen zu wechseln.
**Message** — die Fortschritts- oder Abschluss-Nachricht. Unterstützt zusätzlich eine benutzerdefinierte Schriftfamilie. Fett und Textfarbe werden im Rich-Text-Editor darüber (im Settings-Tab) festgelegt, nicht hier.
| Einstellung | Was sie steuert | Standard |
| ------------------ | --------------------------------- | -------------- |
| **Font** | Schriftfamilie für die Nachricht. | Erbt vom Theme |
| **Size** | Schriftgröße. | `14px` |
| **Line height** | Multiplikator für die Zeilenhöhe. | `1.43` |
| **Letter spacing** | Zeichenabstand. | Normal |
**Tier label** — das Label, das an jeder Stufen-Markierung angezeigt wird. Nur verfügbar, wenn **Show tier labels** aktiviert ist.
| Einstellung | Was sie steuert | Standard |
| ------------------ | ----------------------------------------------------------- | ------------------- |
| **Text color** | Farbe des Stufen-Labels. | Sekundäre Textfarbe |
| **Size** | Schriftgröße. | `13px` |
| **Weight** | Schriftstärke — Light, Regular, Medium, Semibold oder Bold. | Regular (400) |
| **Line height** | Multiplikator für die Zeilenhöhe. | `1.2` |
| **Letter spacing** | Zeichenabstand. | Normal |
Ein Klick auf ein Textelement direkt in der Warenkorb-Vorschau hebt es hervor und öffnet dessen Steuerelemente automatisch im Panel.
Was sind Design-Einstellungen? Erfahre mehr hier: [Design-Einstellungen](/de/aftersell/cart/design-settings).