> ## 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-blok

> Het Aftersell Cart Rewards-blok: gestaffelde gratis verzending, kortingen en gratis geschenken, inclusief verschillende niveaus per markt, land of valuta.

> Het **Rewards**-blok toont een voortgangsbalk naar beloningsniveaus (gratis verzending, een bestelkorting of een gratis geschenk) die shoppers ontgrendelen door meer aan hun winkelwagen toe te voegen. Het stimuleert grotere winkelwagens door shoppers te laten zien hoe dicht ze bij de volgende beloning zijn, en kent kwalificerende beloningen automatisch toe. Niveaus kunnen variëren per markt, land en valuta.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-rewards-block-progress-bar-toward-tiered.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=14074a434c0024287bd1dd36051af69b" alt="Rewards-blok met een voortgangsbalk naar gestaffelde beloningen zoals gratis verzending en een gratis geschenk" width="1412" height="312" data-path="images/aftersell/cart-rewards-block-progress-bar-toward-tiered.png" />
</Frame>

<div id="tier-threshold-validation">
  ## Validatie van niveaudrempels
</div>

De niveaulijst van elke conditie bevat maximaal **4** niveaus — een Rewards-blok met meerdere markt-, land- of valutacondities slaat er maximaal 4 per conditie op, en omdat de eerste passende conditie wordt getoond, ziet één shopper er hoogstens 4. De drempel van elk niveau moet strikt hoger zijn dan die van het niveau erboven — drempels moeten oplopend zijn. Als de drempel van een niveau gelijk is aan of lager is dan die van het vorige niveau, verschijnt er een inline foutmelding bij het drempelveld van dat niveau en wordt de **Save**-knop geblokkeerd totdat het probleem is opgelost. Het betreffende niveau klapt automatisch uit zodat de fout zichtbaar is.

Bijvoorbeeld: als Niveau 1 is ingesteld op \$100, moet Niveau 2 op \$101 of hoger worden ingesteld.

<div id="behavior">
  ## Gedrag
</div>

* De voortgang **sluit** regels van beloningsgeschenken, product add-on-regels, verzendbeschermingsregels en cadeaubonnen uit van het totaal, zodat die artikelen de shopper niet kunstmatig richting een beloning stuwen.
* Het bericht toont het resterende bedrag of aantal tot het volgende niveau, of het voltooiingsbericht zodra alle niveaus zijn behaald.
* **Gratis geschenken worden automatisch toegekend.** Wanneer een shopper een geschenkniveau bereikt, wordt het geschenk aan de winkelwagen toegevoegd; zakt hij eronder, dan wordt het geschenk verwijderd. Met stapelbare beloningen uit wordt alleen het geschenk van het hoogst behaalde niveau toegekend.
* **Add back removed free gifts** bepaalt wat er gebeurt wanneer een shopper een automatisch toegekend geschenk handmatig verwijdert. Indien ingeschakeld (de standaard) wordt het geschenk bij de volgende winkelwagen-update automatisch opnieuw toegevoegd. Indien uitgeschakeld wordt de verwijdering gerespecteerd en blijft het geschenk voor de rest van die sessie uit de winkelwagen, zodat shoppers niet met de winkelwagen hoeven te vechten om een geschenk te weigeren.

<div id="settings">
  ## Instellingen
</div>

| Instelling                                 | Wat het regelt                                                                                                                                                    | Standaard               |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| **Rewards calculation**                    | Of de voortgang wordt gemeten op basis van **Cart total (\$)** of **Cart quantity (#)**.                                                                          | Cart total (\$)         |
| **Stack rewards across tiers**             | Aan: pas elke beloning toe die de koper ontgrendelt, tot en met het hoogste bereikte niveau. Uit: pas alleen de beloning van het hoogste ontgrendelde niveau toe. | Aan                     |
| **Add back removed free gifts**            | Voeg een verdiend gratis geschenk opnieuw toe nadat de koper het heeft verwijderd.                                                                                | Aan                     |
| **Show tier icons**                        | Of niveau-iconen op de balk verschijnen.                                                                                                                          | Aan                     |
| **Show tier labels**                       | Of de labeltekst op elke niveaumarkering op de balk verschijnt.                                                                                                   | Uit                     |
| **Text after completing full rewards bar** | Opgemaakte tekst die wordt getoond zodra alle niveaus zijn behaald.                                                                                               | `All rewards unlocked!` |
| **Tiers**                                  | De beloningsniveaus (zie hieronder). Maximaal **4** per conditie; het paneel toont een `n/4`-teller en schakelt **Add tier** uit bij het maximum.                 | Geen                    |

Elk **niveau** klapt uit tot:

| Niveau-instelling                          | Wat het regelt                                                                                                                                                        | Standaard                                    |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| **Reward type**                            | **Free shipping**, **Order discount** of **Free gift**. Wijzigen reset de titel en het voortgangsbalklabel van dat niveau naar de standaardtekst van het nieuwe type. | Free shipping                                |
| **Threshold (\$)** / **Threshold (items)** | Het winkelwagentotaal of aantal artikelen dat het niveau ontgrendelt. Het label volgt **Rewards calculation**. Minimum `1`.                                           | `50`                                         |
| **Discount value type**                    | Alleen bestelkortingen: **Percentage (%)** of **Fixed amount (\$)**.                                                                                                  | Percentage (%)                               |
| **Percentage off** / **Amount off**        | Alleen bestelkortingen: het kortingsbedrag. Percentages zijn gemaximeerd op 100.                                                                                      | `10`                                         |
| **Title before achieving tier**            | Bericht met opgemaakte tekst dat wordt getoond zolang de shopper het niveau nog niet heeft bereikt. Ondersteunt het token `{{amount}}`.                               | `You're {{amount}} away from free shipping!` |
| **Progress bar label**                     | Het label dat op de niveaumarkering wordt getoond.                                                                                                                    | `Free shipping`                              |
| **Gift products**                          | Alleen gratis geschenken: het toegekende product/de varianten, maximaal **3** per niveau.                                                                             | Geen                                         |

<div id="placement-and-limits">
  ## Plaatsing en limieten
</div>

* **Regio:** overal (bovenkant, body of onderkant).
* **Maximum:** 1 per winkelwagenstaat — de gevulde winkelwagen en de lege winkelwagen krijgen er elk hun eigen.
* **Staat:** zowel gevulde als lege winkelwagen.
* Niet standaard toegevoegd. Niet vergrendeld, dus je kunt het verwijderen of verbergen.

<div id="per-market-rewards">
  ## Rewards per markt
</div>

Rewards is momenteel het blok met de volledige **Conditions**-UI: definieer meerdere sets niveaus, elk gericht op een **Shopify-markt**, **klantland** of **klantvaluta** (**In** of **Not in**). De eerste passende conditie wordt aan de shopper getoond. Als er geen past, rendert het blok niets voor die shopper.

Elke conditie is een kaart in het instellingenpaneel (**When** + conditie). Daaronder bevat een sectie **Display** de niveaus voor die conditie. Houd specifieke regels boven een **All buyers**-vangnet. Volgorde is prioriteit, geen combinatie van elke match.

Je kunt de laatste conditie niet verwijderen (er is altijd minstens één vereist). De editor-preview evalueert de live koper niet; selecteer een conditie in het paneel om die variant te previewen.

Voor hoe condities zich verhouden tot de oog-schakelaar en andere blokken, zie [Tonen of verbergen per markt, land of valuta](/nl/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency).

<div id="custom-template">
  ## Aangepaste template
</div>

Ondersteunt een [aangepaste template](/nl/aftersell/cart/custom-templates) via het tabblad Code, die de ingebouwde markup van dit blok vervangt door jouw JSX. Dit zijn de props die het ontvangt.

| Prop                 | Type          | Waarvoor het dient                                                                                                                           |
| -------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `milestones`         | `Milestone[]` | De beloningsniveaus, op volgorde. Zie hieronder.                                                                                             |
| `rewardsMessageHtml` | `string`      | Het voortgangs- of voltooiingsbericht als gesaneerde HTML.                                                                                   |
| `showIcons`          | `boolean`     | Of de merchant niveau-iconen heeft ingeschakeld.                                                                                             |
| `showTierLabels`     | `boolean`     | Of de merchant labels op de niveaubalk heeft ingeschakeld.                                                                                   |
| `isLoading`          | `boolean`     | Hier altijd `false`: het blok rendert zijn ingebouwde skeleton tijdens het laden en roept je template pas aan zodra de winkelwagen klaar is. |

Elke `Milestone`:

| Veld              | Type                   | Waarvoor het dient                                                                                                |
| ----------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `id`              | `string`               | Stabiele sleutel voor het niveau. Gebruik het als je React `key`.                                                 |
| `label`           | `string`               | Het label van het niveau, als platte tekst.                                                                       |
| `icon`            | `ReactElement \| null` | Vooraf gerenderd icoonelement. `null` wanneer het niveau er geen heeft. Render het direct: `{m.icon}`.            |
| `isCompleted`     | `boolean`              | Of de winkelwagen dit niveau heeft bereikt.                                                                       |
| `positionPercent` | `number`               | Hoe vol **het eigen segment van dit niveau** op de balk is, `0` tot `100` — geen positie langs één gedeelde balk. |

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function Rewards(props) {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />

      {props.milestones.map((milestone) => (
        // Each tier gets its own track; positionPercent (0-100) fills that track.
        <div key={milestone.id}>
          <div style={{ background: '#E9E9E9', height: 5 }}>
            <div style={{ width: `${milestone.positionPercent}%`, background: '#000', height: 5 }} />
          </div>
          {props.showIcons && milestone.icon ? milestone.icon : null}
          {props.showTierLabels && milestone.label !== '' ? milestone.label : null}
        </div>
      ))}
    </div>
  );
}
```

`m.icon` is een **vooraf gerenderd element**, geen URL of icoonnaam, dus render het direct in plaats van er een afbeeldingselement van te proberen te bouwen.

<Note>
  `milestones` is nooit leeg binnen een aangepaste template. Wanneer er geen niveaus te tonen zijn, rendert het blok niets en wordt je template helemaal niet aangeroepen, dus je hebt geen lege-staat-vertakking nodig.
</Note>

<div id="design">
  ## Design
</div>

Style dit blok via de sectie **Design** in het instellingenpaneel. Dit zijn overrides per blok die bovenop je globale design komen en erop terugvallen wanneer ze leeg zijn.

<div id="text">
  ### Text
</div>

De sectie **Text** in Design regelt de typografie van de tekstelementen van rewards. Gebruik de kiezer **Text element** om ertussen te wisselen.

**Message** — het voortgangs- of voltooiingsbericht. Ondersteunt ook een aangepaste font family. Vet en tekstkleur stel je in de Rich Text Editor hierboven in (op het tabblad Settings), niet hier.

| Instelling         | Wat het regelt                | Standaard            |
| ------------------ | ----------------------------- | -------------------- |
| **Font**           | Font family voor het bericht. | Neemt over van thema |
| **Size**           | Lettergrootte.                | `14px`               |
| **Line height**    | Regelhoogtevermenigvuldiger.  | `1.43`               |
| **Letter spacing** | Tracking tussen letters.      | Normal               |

**Tier label** — het label dat op elke niveaumarkering wordt getoond. Alleen beschikbaar wanneer **Show tier labels** is ingeschakeld.

| Instelling         | Wat het regelt                                          | Standaard             |
| ------------------ | ------------------------------------------------------- | --------------------- |
| **Text color**     | Kleur van het niveaulabel.                              | Secundaire tekstkleur |
| **Size**           | Lettergrootte.                                          | `13px`                |
| **Weight**         | Fontgewicht — Light, Regular, Medium, Semibold of Bold. | Regular (400)         |
| **Line height**    | Regelhoogtevermenigvuldiger.                            | `1.2`                 |
| **Letter spacing** | Tracking tussen letters.                                | Normal                |

<Tip>
  Als je in de winkelwagenvoorvertoning direct op een tekstelement klikt, wordt dat element gemarkeerd en worden de bedieningsopties automatisch in het paneel geopend.
</Tip>

Wat zijn design-instellingen? Lees er hier meer over: [Design-instellingen](/nl/aftersell/cart/design-settings).