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

# Product add-on-blok

> Aftersell Cart Product add-on-blokken: tilbyd ét specifikt produkt som et hurtigt tilkøb inde i draweren.

> Blokken **Product add-on** tilbyder ét enkelt, specifikt produkt, du vælger, som et tilkøb inde i kurven — den promoverer ét kendt produkt (en garanti, en vareprøve, en bestseller) som et hurtigt tilkøb direkte i kurven.

<Info>
  I modsætning til [**Upsells**](/da/aftersell/cart/upsells-block), som viser produkter valgt af en strategi, viser Product add-on altid præcis det produkt, du vælger.
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="Product add-on-blok der tilbyder et ekstra produkt, som kunden kan tilføje til sin kurv" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

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

* **Hvis ingen live variant kan opløses** — produktet er ikke angivet, arkiveret eller udsolgt — renderer blokken **ingenting** frem for en død knap.
* Kontrollen afspejler, om *denne bloks egen* tilkøbslinje er i kurven, så hvis du slår den fra, fjernes den linje, den tilføjede (og det påvirker ikke det samme produkt tilføjet andetsteds).
* En førpris gennemstreges, når der er en reel nedsættelse; "% off"-labelen skjules, hvis rabatten afrundes til under 1%.
* Tilkøbsbilledet falder tilbage på produktets fremhævede billede, når den valgte variant ikke har noget.

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

| Indstilling      | Hvad den styrer                                                                                                | Standard                              |
| ---------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Display type** | Hvordan tilføjelseskontrollen vises: **Toggle** eller **Checkbox**.                                            | Toggle                                |
| **Product**      | Den produktvariant, der skal tilbydes — én vælger dækker begge. Billede og pris kommer fra den valgte variant. | Ingen                                 |
| **Title**        | Rich text-overskrift.                                                                                          | `<strong>{{product_title}}</strong>`  |
| **Price label**  | Prislinjen.                                                                                                    | `{{price}}`                           |
| **Description**  | Understøttende tekst.                                                                                          | `Add {{product_title}} to your order` |

**Title**, **Price label** og **Description** understøtter alle de samme fire tokens: `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` og `{{savings}}`.

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

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

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

<div id="content">
  ### Indhold
</div>

| Prop                      | Type             | Hvad den bruges til                                                                                                |
| ------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ |
| `addonTitle`              | `string`         | Titel som ren tekst. Brug den til alt-teksten og `aria-label` og som fallback, når der ikke er en rich text-titel. |
| `addonTitleHtml`          | `string`         | Saneret rich text-titel-HTML. Tom når ingen.                                                                       |
| `descriptionHtml`         | `string`         | Saneret rich text-beskrivelses-HTML. Tom når ingen.                                                                |
| `formattedPrice`          | `string`         | Valutaformateret prislabel. Tom når den ikke vises.                                                                |
| `formattedCompareAtPrice` | `string`         | Formateret førpris for varianten (vejledende pris). Tom når der ikke er en reel besparelse.                        |
| `savings`                 | `string`         | Besparelseslabel i hele procent, for eksempel `25%`. Tom når der ikke er en besparelse.                            |
| `priceHtml`               | `string \| null` | Saneret rich text-pris-HTML fra det dedikerede prisfelt. `null` når tom.                                           |
| `ctaText`                 | `string`         | Knaptekst, til formatet `button`.                                                                                  |
| `imageUrl`                | `string`         | Produktbillede. Tom når ingen.                                                                                     |
| `productUrl`              | `string`         | Produktsidens URL. Tom når ingen — i så fald skal du ikke linke billedet eller titlen.                             |

<div id="state-and-actions">
  ### Tilstand og handlinger
</div>

| Prop           | Type                                 | Hvad den bruges til                                                                                       |
| -------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------- |
| `variantId`    | `number \| null`                     | Opløst variant. `null` når der ikke er en live variant, fordi produktet ikke er angivet eller er udsolgt. |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | Hvordan køberen tilføjer tilkøbet. Forgren din markup på denne.                                           |
| `isEnabled`    | `boolean`                            | Om tilkøbet i øjeblikket er i kurven.                                                                     |
| `isAdding`     | `boolean`                            | `true` mens tilføjelsen eller fjernelsen er i gang. Deaktivér din kontrol ud fra denne.                   |
| `handleAdd`    | `() => void`                         | Tilføjer tilkøbet. Til formatet `button`.                                                                 |
| `handleToggle` | `() => void`                         | Slår tilkøbet til og fra i kurven. Til `checkbox` og `toggle`.                                            |
| `isLoading`    | `boolean`                            | `true` mens kurven stadig laver sin første hentning.                                                      |

<Warning>
  `format` bestemmer, hvilken handler der gælder: `handleAdd` for `button`, `handleToggle` for `checkbox` og `toggle`. Et `variantId` med `null` betyder, at der ikke er noget at tilføje, så gate din kontrol på det frem for at kalde en handler, der ikke kan lykkes.
</Warning>

<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 tre elementer. Brug **Text element**-vælgeren til at skifte mellem dem.

**Title** — produktnavnet. 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 titlen.     | Arves fra temaet |
| **Size**           | Skriftstørrelse.              | `15px`           |
| **Line height**    | Multiplikator for linjehøjde. | `1.33`           |
| **Letter spacing** | Tegnafstand.                  | Normal           |

**Price** — prislinjen. Fed og tekstfarve indstilles i Rich Text-editoren ovenfor.

| Indstilling        | Hvad den styrer               | Standard |
| ------------------ | ----------------------------- | -------- |
| **Size**           | Skriftstørrelse.              | `15px`   |
| **Line height**    | Multiplikator for linjehøjde. | `1.33`   |
| **Letter spacing** | Tegnafstand.                  | Normal   |

**Description** — den understøttende tekst. Fed og tekstfarve indstilles i Rich Text-editoren ovenfor.

| Indstilling        | Hvad den styrer               | Standard |
| ------------------ | ----------------------------- | -------- |
| **Size**           | Skriftstørrelse.              | `14px`   |
| **Line height**    | Multiplikator for linjehøjde. | `1.29`   |
| **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).