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

> Aftersell Cart Rewards-blokken: gratis fragt, rabatter og gratis gaver i niveauer, herunder forskellige niveauer efter marked, land eller valuta.

> Blokken **Rewards** viser en fremdriftslinje mod belønningsniveauer (gratis fragt, en ordrerabat eller en gratis gave), som kunder låser op ved at lægge mere i kurven — den motiverer større kurve ved at vise kunderne, hvor tæt de er på den næste belønning, og tildeler kvalificerende belønninger automatisk. Niveauer kan variere efter marked, land og 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 med en fremdriftslinje mod belønninger i niveauer såsom gratis fragt og en gratis gave" width="1412" height="312" data-path="images/aftersell/cart-rewards-block-progress-bar-toward-tiered.png" />
</Frame>

<div id="tier-threshold-validation">
  ## Validering af niveautærskler
</div>

Hver betingelses niveauliste rummer op til **4** niveauer — en Rewards-blok med flere markeds-, lande- eller valutabetingelser gemmer op til 4 pr. betingelse, og fordi den første matchende betingelse er den, der vises, ser en enkelt kunde højst 4. Hvert niveaus tærskel skal være strengt større end niveauet ovenfor — tærskler skal være i stigende rækkefølge. Hvis et niveaus tærskel er lig med eller lavere end det forrige niveaus tærskel, vises en inline-fejl på det niveaus tærskelfelt, og **Save**-knappen blokeres, indtil problemet er løst. Det berørte niveau udvides automatisk, så fejlen er synlig.

Hvis Niveau 1 for eksempel er sat til \$100, skal Niveau 2 sættes til \$101 eller højere.

<div id="behavior">
  ## Adfærd
</div>

* Fremdrift **udelukker** belønningsgave-linjer, tilkøbslinjer, fragtbeskyttelseslinjer og gavekort fra totalen, så disse varer ikke puster kunden op mod en belønning.
* Beskeden viser det resterende beløb eller antal til det næste niveau, eller den fuldførte besked, når alle niveauer er nået.
* **Gratis gaver tildeles automatisk.** Når en kunde når et gaveniveau, tilføjes gaven til kurven; hvis de falder under det, fjernes gaven. Med stakbare belønninger slået fra tildeles kun gaven fra det højeste opnåede niveau.
* **Add back removed free gifts** styrer, hvad der sker, når en kunde manuelt fjerner en automatisk tildelt gave. Når den er aktiveret (standard), tilføjes gaven automatisk igen ved den næste kurvopdatering. Når den er deaktiveret, respekteres fjernelsen, og gaven holdes ude af kurven resten af den session, så kunderne ikke kæmper med kurven for at afslå en gave.

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

| Indstilling                                | Hvad den styrer                                                                                                                            | Standard                |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
| **Rewards calculation**                    | Om fremdrift måles efter **Cart total (\$)** eller **Cart quantity (#)**.                                                                  | Cart total (\$)         |
| **Stack rewards across tiers**             | Til: anvend hver belønning, køberen låser op, op til det højeste nåede niveau. Fra: anvend kun belønningen fra det højeste oplåste niveau. | Til                     |
| **Add back removed free gifts**            | Tilføj en optjent gratis gave igen, efter at køberen har fjernet den.                                                                      | Til                     |
| **Show tier icons**                        | Om niveauikoner vises på linjen.                                                                                                           | Til                     |
| **Show tier labels**                       | Om labelteksten vises på hver niveaumarkør på linjen.                                                                                      | Fra                     |
| **Text after completing full rewards bar** | Rich text vist, når alle niveauer er nået.                                                                                                 | `All rewards unlocked!` |
| **Tiers**                                  | Belønningsniveauerne (nedenfor). Op til **4** pr. betingelse; panelet viser en `n/4`-tæller og deaktiverer **Add tier** ved loftet.        | Ingen                   |

Hvert **niveau** udvides til:

| Niveauindstilling                          | Hvad den styrer                                                                                                                                                | Standard                                     |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| **Reward type**                            | **Free shipping**, **Order discount** eller **Free gift**. Ændring nulstiller det niveaus titel og fremdriftslinjelabel til den nye types standardformulering. | Free shipping                                |
| **Threshold (\$)** / **Threshold (items)** | Den kurvtotal eller det vareantal, der låser niveauet op. Labelen følger **Rewards calculation**. Minimum `1`.                                                 | `50`                                         |
| **Discount value type**                    | Kun ordrerabatter: **Percentage (%)** eller **Fixed amount (\$)**.                                                                                             | Percentage (%)                               |
| **Percentage off** / **Amount off**        | Kun ordrerabatter: rabatbeløbet. Procenter er begrænset til 100.                                                                                               | `10`                                         |
| **Title before achieving tier**            | Rich text-besked vist, mens kunden stadig mangler at nå niveauet. Understøtter tokenet `{{amount}}`.                                                           | `You're {{amount}} away from free shipping!` |
| **Progress bar label**                     | Labelen vist på niveaumarkøren.                                                                                                                                | `Free shipping`                              |
| **Gift products**                          | Kun gratis gaver: de(t) tildelte produkt(er)/variant(er), op til **3** pr. niveau.                                                                             | Ingen                                        |

<div id="placement-and-limits">
  ## Placering og grænser
</div>

* **Region:** alle (top, body eller bund).
* **Maksimum:** 1 pr. kurvtilstand — den fyldte kurv og den tomme kurv får hver deres egen.
* **Tilstand:** både fyldt og tom kurv.
* Tilføjes ikke som standard. Ikke låst, så du kan fjerne eller skjule den.

<div id="per-market-rewards">
  ## Belønninger pr. marked
</div>

Rewards er den blok, der i dag har den fulde **Conditions**-UI: definer flere sæt niveauer, som hver målretter et **Shopify-marked**, **kundens land** eller **kundens valuta** (**In** eller **Not in**). Den første matchende betingelse vises for kunden. Hvis ingen matcher, renderer blokken ingenting for dem.

Hver betingelse er et kort i indstillingspanelet (**When** + betingelse). Under det rummer en **Display**-sektion niveauerne for den betingelse. Hold specifikke regler over en **All buyers**-opsamlingsregel. Rækkefølge er prioritet, ikke en kombination af hvert match.

Du kan ikke slette den sidste betingelse (mindst én er altid påkrævet). Editorens forhåndsvisning evaluerer ikke den rigtige køber; vælg en betingelse i panelet for at forhåndsvise den variant.

For hvordan betingelser forholder sig til øje-omskifteren og andre blokke, se [Vis eller skjul efter marked, land eller valuta](/da/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency).

<div id="custom-template">
  ## Brugerdefineret skabelon
</div>

Understøtter en [brugerdefineret skabelon](/da/aftersell/cart/custom-templates) fra dens Code-fane, som erstatter denne bloks indbyggede markup med din JSX. Dette er de props, den modtager.

| Prop                 | Type          | Hvad den bruges til                                                                                                            |
| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `milestones`         | `Milestone[]` | Belønningsniveauerne, i rækkefølge. Se nedenfor.                                                                               |
| `rewardsMessageHtml` | `string`      | Fremdrifts- eller fuldførelsesbeskeden som saneret HTML.                                                                       |
| `showIcons`          | `boolean`     | Om forhandleren har aktiveret niveauikoner.                                                                                    |
| `showTierLabels`     | `boolean`     | Om forhandleren har aktiveret labels på belønningslinjen.                                                                      |
| `isLoading`          | `boolean`     | Altid `false` her: blokken renderer sin indbyggede skeleton under indlæsning og kalder først din skabelon, når kurven er klar. |

Hver `Milestone`:

| Felt              | Type                   | Hvad det bruges til                                                                                             |
| ----------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- |
| `id`              | `string`               | Stabil nøgle for niveauet. Brug den som din React `key`.                                                        |
| `label`           | `string`               | Niveauets label, som ren tekst.                                                                                 |
| `icon`            | `ReactElement \| null` | Forudrenderet ikonelement. `null` når niveauet ikke har noget. Render det direkte: `{m.icon}`.                  |
| `isCompleted`     | `boolean`              | Om kurven har nået dette niveau.                                                                                |
| `positionPercent` | `number`               | Hvor fyldt **dette niveaus eget segment** af linjen er, `0` til `100` — ikke en position langs én fælles linje. |

```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` er et **forudrenderet element**, ikke en URL eller et ikonnavn, så render det direkte i stedet for at forsøge at bygge et billedelement ud fra det.

<Note>
  `milestones` er aldrig tom inde i en brugerdefineret skabelon. Når der ikke er niveauer at vise, renderer blokken ingenting, og din skabelon kaldes slet ikke, så du behøver ikke en gren til tom tilstand.
</Note>

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

Style denne blok med dens **Design**-sektion i indstillingspanelet. Det er tilsidesættelser pr. blok, som lægger sig oven på dit globale design og falder tilbage til det, når de er tomme.

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

Sektionen **Text** i Design lader dig styre typografien for tekstelementerne i belønninger. Brug **Text element**-vælgeren til at skifte mellem dem.

**Message** — fremdrifts- eller fuldførelsesbeskeden. Understøtter også en brugerdefineret skriftfamilie. Fed og tekstfarve indstilles i Rich Text-editoren ovenfor (i fanen Settings), ikke her.

| Indstilling        | Hvad den styrer               | Standard         |
| ------------------ | ----------------------------- | ---------------- |
| **Font**           | Skriftfamilie for beskeden.   | Arves fra temaet |
| **Size**           | Skriftstørrelse.              | `14px`           |
| **Line height**    | Multiplikator for linjehøjde. | `1.43`           |
| **Letter spacing** | Tegnafstand.                  | Normal           |

**Tier label** — labelen vist på hver niveaumarkør. Kun tilgængelig, når **Show tier labels** er aktiveret.

| Indstilling        | Hvad den styrer                                           | Standard            |
| ------------------ | --------------------------------------------------------- | ------------------- |
| **Text color**     | Farve på niveauets label.                                 | Sekundær tekstfarve |
| **Size**           | Skriftstørrelse.                                          | `13px`              |
| **Weight**         | Skriftvægt — Light, Regular, Medium, Semibold eller Bold. | Regular (400)       |
| **Line height**    | Multiplikator for linjehøjde.                             | `1.2`               |
| **Letter spacing** | Tegnafstand.                                              | Normal              |

<Tip>
  Hvis du klikker på et tekstelement direkte i kurv-forhåndsvisningen, fremhæves det, og dets kontroller åbnes automatisk i panelet.
</Tip>

Hvad er designindstillinger? Læs mere her: [Designindstillinger](/da/aftersell/cart/design-settings).
