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

# Custom code-blokke

> Aftersell Cart Custom code-blokken: tilføj din egen HTML eller React hvor som helst i skuffen, inklusive inde i Cart items.

> **Custom code**-blokken tilføjer din egen HTML eller React til carten. Placér den i en hvilken som helst sektion af skuffen, eller indlejr den i [**Cart items**](/da/aftersell/cart/cart-items-block) som en under-blok, så den gentages for hver linje. I modsætning til andre blokke har den ingen Content-indstillinger og ingen Design-sektion: blokken *er* koden, så du arbejder udelukkende i dens **Code**-fane.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-custom-code-block-add-and-enable.gif?s=6717cc64a8765b0c06b65990f99e12ff" alt="Animeret forhåndsvisning af tilføjelse og aktivering af en Custom code-blok i Aftersell Cart-editoren" title="Animeret forhåndsvisning af tilføjelse og aktivering af en Custom code-blok i Aftersell Cart-editoren" width="1200" height="558" data-path="images/aftersell/cart-custom-code-block-add-and-enable.gif" />
</Frame>

<div id="add-and-turn-on-a-custom-code-block">
  ## Tilføj og aktivér en Custom code-blok
</div>

1. Tilføj en **Custom code**-blok til en hvilken som helst sektion, eller som en under-blok under **Cart items**.
2. Vælg den, og åbn **Code**-fanen.
3. Vælg **HTML** eller **React component**. Nye blokke er som standard HTML.
4. Skriv din kode.
5. Hvis du valgte React, skal du klikke på <span style={{display:'inline-flex',alignItems:'center',gap:'4px',background:'#1C1C1C',color:'#fff',border:'1px solid #0A0A0A',borderRadius:'4px',padding:'0 6px',fontSize:'0.85em',fontWeight:500,lineHeight:'1.4em',verticalAlign:'middle'}}><svg width="8" height="9" viewBox="0 0 10 12" fill="none" aria-hidden="true" style={{display:'block'}}><path d="M1.5 1.2v9.6L8.8 6 1.5 1.2Z" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round" /></svg>Compile</span>.
6. Slå **"Use custom template"** til. For denne blok betyder den kontakt "vis min tilpassede kode", og den er som standard slået fra, så intet vises, før du aktiverer den.
7. Hold sidebarens øje-knap slået til, så blokken forbliver synlig for kunder.

Både øje-knappen og **"Use custom template"** skal være slået til, for at blokken vises.

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

* Blokken viser intet, før carten er indlæst.
* Den viser heller intet, når sidebarens øje er slået fra, **"Use custom template"** er slået fra, koden er tom, eller React ikke kan kompilere eller rendere. Fordi en fejl er tavs, bør du tjekke din blok i [forhåndsvisning](/da/aftersell/cart/previewing-carts), før du publicerer.

<div id="html-mode">
  ## HTML-tilstand
</div>

HTML-tilstanden erstatter et lille sæt tokens i din markup. Den er til statisk eller token-drevet indhold, ikke til at køre logik.

* **Inline `<script>`-tags kører ikke**, og HTML-tilstanden har **ingen adgang til SDK'et eller `window`.**
* Til logik skal du bruge [**React-tilstand**](#react-mode) eller [Tilpassede scripts](/da/aftersell/cart/custom-scripts) med [Cart SDK](/da/aftersell/cart/sdk-overview).

<div id="tokens">
  ### Tokens
</div>

Token-værdier er **formaterede strenge** (butikkens pengeformat, en procentdel med `%` eller et antal), klar til at indsætte i markup:

| Token                    | Hvad det viser                                                           |
| ------------------------ | ------------------------------------------------------------------------ |
| `{{pre_cart_total}}`     | Cart-total før rabatter.                                                 |
| `{{post_cart_total}}`    | Cart-total efter rabatter.                                               |
| `{{savings_amount}}`     | Sparet beløb (total før rabat minus total efter rabat).                  |
| `{{savings_percentage}}` | Besparelse som en procentdel, inklusive `%`-tegnet (for eksempel `15%`). |
| `{{cart_quantity}}`      | Antal synlige varer i carten.                                            |

<div id="example">
  ### Eksempel
</div>

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>
```

<div id="react-mode">
  ## React-tilstand
</div>

React-tilstanden kompilerer en komponent og giver den cart-data plus en `add-to-cart`-handling.

* Editoren låser wrapperen til `function CustomCode(props: CustomCodeProps) { … }`, og du redigerer kun kroppen mellem de linjer.
* Du skal klikke på <span style={{display:'inline-flex',alignItems:'center',gap:'4px',background:'#1C1C1C',color:'#fff',border:'1px solid #0A0A0A',borderRadius:'4px',padding:'0 6px',fontSize:'0.85em',fontWeight:500,lineHeight:'1.4em',verticalAlign:'middle'}}><svg width="8" height="9" viewBox="0 0 10 12" fill="none" aria-hidden="true" style={{display:'block'}}><path d="M1.5 1.2v9.6L8.8 6 1.5 1.2Z" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round" /></svg>Compile</span> og derefter slå **"Use custom template"** til, før blokken vises.
* Din komponent kan bruge `useState`, `useEffect`, `useMemo`, `useRef` og `useCallback`.
* I modsætning til HTML-tilstanden kører React i sidens kontekst, så den kan kalde `window` og [Cart SDK](/da/aftersell/cart/sdk-overview), når de er tilgængelige.
* Hvis din komponent kaster fejl ved kørsel, viser blokken intet, og resten af carten fungerer fortsat.

<div id="props">
  ### Props
</div>

Totaler og besparelsesbeløb er heltal i valutaens [mindste enhed](/da/aftersell/cart/sdk-actions#formatmoneycents) (cent for USD), så `$12.50` er `1250`, ikke `12.50`. De er ikke formaterede pengestrenge som HTML-tokens.

| Prop                                            | Type                        | Beskrivelse                                                                                                                          |
| ----------------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `cart`                                          | `AftersellCart`             | Den aktuelle cart. Se [cart-objekt-referencen](/da/aftersell/cart/sdk-cart-object).                                                  |
| `line`                                          | `AftersellCartLine \| null` | Kun sat, når blokken er en Cart items-under-blok (én rendering pr. linje); `null` i en sektion.                                      |
| `preCartTotal`                                  | `number`                    | Cart-totalen **før rabatter** (Shopifys `original_total_price`), i valutaens mindste enhed (f.eks. cent).                            |
| `postCartTotal`                                 | `number`                    | Cart-totalen **efter rabatter**, i valutaens mindste enhed.                                                                          |
| `savings`                                       | `{ amount, percentage }`    | Besparelsesbeløb og -procent.                                                                                                        |
| `addProduct(variantId, quantity?, properties?)` | `function`                  | Tilføjer et produkt til carten, stemplet med denne bloks attribution, så [analyser](/da/aftersell/cart/analytics) kan kreditere den. |

<div id="the-cart-and-line-shapes">
  ### Cart- og line-formerne
</div>

`cart` og `line` er de samme objekter, som SDK'et eksponerer alle andre steder, så de er dokumenteret én gang i **[cart-objekt-referencen](/da/aftersell/cart/sdk-cart-object)**: hvert felt på carten, på en linje og på en bundle.

De, du oftest vil bruge: `cart.items`, `cart.itemCount`, `cart.totalPrice`, `line.title`, `line.quantity`, `line.finalLinePrice`.

Tre ting specifikke for denne blok:

* **`line` er kun sat på en Cart items-under-blok**, hvor din komponent renderes én gang pr. linje. Placeret som en sektion er `line` `null`, og du læser i stedet `cart.items`.
* **Bundle-underordnede er ikke i `cart.items`.** Når linjer er [grupperet i en bundle](/da/aftersell/cart/sdk-use-case-bundles), vises kun ankerlinjen; dens underordnede ligger på `line.bundle.children`.
* **Linjer skjult af en [linjetransformation](/da/aftersell/cart/sdk-hooks#registerlinetransform) er der heller ikke**, selvom de stadig tæller med i `cart.totalPrice`.

<div id="examples">
  ### Eksempler
</div>

Vis vareantallet:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}
```

Som en Cart items-under-blok skal du bruge `props.line` til indhold pr. produkt. Blokken renderes én gang pr. linje, mærket med den linjes produkt og variant:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}
```

<div id="reading-enrichment-metadata">
  ### Læsning af berigelses-metadata
</div>

Hver vare i `cart.items` har et `metadata`-felt: et tomt objekt `{}`, indtil en [cart enricher](/da/aftersell/cart/sdk-hooks#registercartenricher) udfylder det. Når det er udfyldt, er det nøglet efter enricherens `id` og indeholder Storefront-dataene for den linjes produkt eller variant:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}
```

`metadata` er altid til stede og er som standard et tomt objekt `{}`, indtil enricherens asynkrone hentning fuldføres (testen for "endnu ikke beriget" er `Object.keys(item.metadata).length === 0`). Brug optional chaining (`item.metadata?.enricherId`), når du læser en specifik enrichers nøgle, da den nøgle er fraværende, indtil berigelsen lander.

<div id="reading-discount-codes-and-line-discounts">
  ### Læsning af rabatkoder og linjerabatter
</div>

`cart.discountCodes` viser de rabatkoder, der er anvendt på carten, og hver linjes `discountAllocations` viser de rabatter, der er anvendt på den specifikke linje:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}
```

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

* **Region:** alle (top, brødtekst eller bund). Også tilgængelig som en Cart items-under-blok.
* **Maksimum:** ubegrænset.
* **Tilstand:** fyldt og tom cart (som sektionsblok). Som en Cart items-under-blok renderes den kun, når carten har linjer, én instans pr. linje.
* Ikke låst, så du kan fjerne eller skjule den.
* Der er ingen Design-sektion pr. blok. Stil gennem din egen markup, [**Tilpasset CSS**](/da/aftersell/cart/custom-css) og dine globale [**Designindstillinger**](/da/aftersell/cart/design-settings).

<div id="when-to-use-custom-code-block-vs-custom-template-vs-custom-script">
  ## Hvornår du skal bruge custom code-blok vs. tilpasset skabelon vs. tilpasset script
</div>

|                                                               | Hvad den gør                                                                             | Hvornår du skal bruge den                                               | Eksempel                                                                                                                                                               |
| ------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Custom code-blok**                                          | Tilføjer en *ny* blok med din egen HTML eller React.                                     | Noget de indbyggede blokke ikke dækker.                                 | En estimeret total-linje, der lægger din faste fragtpris til cart-totalen, eller en nedtælling til leveringsfrist over checkout-knappen.                               |
| **[Tilpasset skabelon](/da/aftersell/cart/custom-templates)** | Erstatter renderingen af en *eksisterende* blok med din JSX, ved brug af den bloks data. | Den indbyggede blok er næsten rigtig, men du har brug for anden markup. | Genopbyg [Product-rækken](/da/aftersell/cart/cart-items-block#custom-template), så variantnavn, besparelser og antalsvælger sidder på én linje.                        |
| **[Tilpasset script](/da/aftersell/cart/custom-scripts)**     | Kører JavaScript mod carten via [Cart SDK](/da/aftersell/cart/sdk-overview).             | Cart-dækkende logik, events og konfiguration snarere end skuffe-markup. | Brug \$75, få en gratis mulepose: [tilføj gaven](/da/aftersell/cart/sdk-use-case-free-gift), når carten krydser tærsklen, og fjern den igen, hvis kunden falder under. |