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

# Cart items-blok

> Cart items-blokken: linjevarelisten, Product-rækken og værten for indlejrede under-blokke.

> **Cart items**-blokken er listen over linjevarer i carten, som viser hvert produkt, kunden har tilføjet, med billede, titel, variant, pris, antalsvælger og fjern-kontrol. Det er en påkrævet blok, og det er containeren, der rummer cartens under-blokke (**Product**-rækken, [**Subscription upgrade**](/da/aftersell/cart/subscription-upgrade-block) og [**Custom code**](/da/aftersell/cart/custom-code-blocks)), og som leverer den struktur, under-blokke pr. linje hæftes på.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-items-block-line-product-title-variant.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=3c9f088b55cfd8450dcb8670dfe0728a" alt="Cart items-blok med linjevarer med produktbillede, titel, variant, pris, antalsvælger og fjern-kontrol" width="1420" height="486" data-path="images/aftersell/cart-items-block-line-product-title-variant.png" />
</Frame>

<div id="the-product-row">
  ## Product-rækken
</div>

Inde i Cart items sidder **Product**-under-blokken: selve linjevare-rækken. Den er låst og tilføjes automatisk, så hver Cart items-blok har altid præcis én Product-række, som du ikke kan fjerne; du placerer andre under-blokke omkring den. Dens indstillinger styrer, hvordan hver linjes prissætning vises:

| Indstilling                                | Hvad den styrer                                                                                                                                                                                                                                                                                               | Standard                                        |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| **Strike-through price**                   | Hvilken pris der vises gennemstreget: **Compare-at or pre-discount, whichever is higher**, **Compare-at price**, **Pre-discount price** eller **No strike-through**.                                                                                                                                          | Compare-at or pre-discount, whichever is higher |
| **Strike-through price for subscriptions** | Samme valg for abonnementslinjer, med to forskelle: en ekstra mulighed **Subscription compare-at price**, og **Compare-at price** omdøbt til **Product compare-at, then subscription compare-at**.                                                                                                            | Compare-at or pre-discount, whichever is higher |
| **Savings label**                          | Om besparelser vises som et **Amount**, en **Percentage** eller er **Hidden**.                                                                                                                                                                                                                                | Amount                                          |
| **Bundle price**                           | Hvordan den viste pris beregnes for bundle-linjer. **Automatic** viser totalen af alle varer i bundlen (eller hovedvarens pris, når de andre varer er gratis). **Main item price only** viser kun hovedvarens (anker-varens) pris. Dette er kun en visningsetiket — Shopifys cart-total er altid autoritativ. | Automatic                                       |
| **Savings text**                           | Besparelsesetiketten. Understøtter `{{value}}`-tokenet.                                                                                                                                                                                                                                                       | `Save {{value}}`                                |

Rækken selv viser produktbilledet (med link til produktsiden, når det er tilgængeligt), titel, variant, pris og en eventuel gennemstreget compare-at-pris, en antalsvælger og en fjern-knap. Bundle-linjer viser en udfoldelig liste over deres komponenter.

<div id="text-styling">
  ### Tekst-styling
</div>

Product-rækken indeholder en **Text**-sektion i sine Design-indstillinger. Brug den til at styre typografien for de enkelte tekstelementer i hver linjevare. Vælg et tekstelement fra vælgeren for at justere dets indstillinger:

| Indstilling        | Hvad den styrer                                                                                                                                                         |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text color**     | Farve på det valgte tekstelement.                                                                                                                                       |
| **Font**           | **Theme font** (arver dit temas skrifttype) eller **Custom font** (indtast navnet på en skrifttype, dit tema allerede indlæser). Kun tilgængelig for **Product title**. |
| **Size**           | Skriftstørrelse i pixels.                                                                                                                                               |
| **Weight**         | Skrifttykkelse: Light, Regular, Medium, Semibold eller Bold.                                                                                                            |
| **Line height**    | Linjehøjde som en multiplikator af skriftstørrelsen (for eksempel `1.4`).                                                                                               |
| **Letter spacing** | Bogstavafstand i pixels. Negative værdier strammer teksten.                                                                                                             |

De tekstelementer, du kan style, er grupperet efter kategori:

**Product**

* **Product title** — produktnavnet på hver linje. Understøtter også en tilpasset skriftfamilie.
* **Variant** — variantetiketten (for eksempel *Size: Medium*).
* **Subscription plan** — den skrivebeskyttede planetiket, der vises på abonnementslinjer.

**Pricing**

* **Price** — linjens aktuelle pris.
* **Compare-at price** — den gennemstregede oprindelige pris.
* **Savings** — besparelsesetiketten (for eksempel *Save \$5.00*). Kun størrelse og linjehøjde — fed og farve indstilles i Rich Text Editor ovenfor.

**Bundle**

* **Bundle toggle** — udfoldelseshovedet, der udvider en bundles komponentliste.
* **Bundle item title** — titlen på hver komponent inde i en bundle.
* **Bundle item variant** — variantetiketten for hver bundle-komponent.

Hvis et felt efterlades tomt, bibeholdes elementets standardværdi.

<Tip>
  Ved at klikke direkte på et tekstelement i cart-forhåndsvisningen fremhæves det, og dets kontroller åbnes automatisk i panelet.
</Tip>

<div id="discount-tags-design">
  ### Design af rabat-tags
</div>

Product-rækken indeholder en **Discount tags**-sektion i sine Design-indstillinger. Brug den til at style de rabat-tag-piller, der vises på hver linjevare:

| Indstilling          | Hvad den styrer                      | Standard  |
| -------------------- | ------------------------------------ | --------- |
| **Background color** | Fyldfarve på rabat-tag-pillen.       | `#F1F1F1` |
| **Text color**       | Tekstfarve inde i rabat-tag-pillen.  | `#585858` |
| **Border radius**    | Hjørneafrunding af rabat-tag-pillen. | `6px`     |

Disse indstillinger gælder kun for linjevare-rabat-tags i Cart items-blokken. Rabatkode-tags i [Summary-blokken](/da/aftersell/cart/summary-block) styles separat.

<div id="sub-blocks-and-how-they-position">
  ## Under-blokke og hvordan de placeres
</div>

Cart items er den eneste blok, der rummer under-blokke. **Under-blokke renderes én gang pr. linje, inde i hver produktrække**, placeret i forhold til den fastgjorte Product-række:

* Under-blokke placeret **før** Product-rækken vises **over** produktindholdet i hver linje.
* Under-blokke placeret **efter** Product-rækken vises **under** produktindholdet i hver linje.

Så en [Subscription upgrade](/da/aftersell/cart/subscription-upgrade-block) placeret efter Product-rækken vises under hver berettiget linje, ikke én gang i bunden af hele listen.

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

* Når carten ikke har nogen varer, skifter skuffen til den tomme tilstand, og denne blok vises ikke.
* **Én cart-ændring kører ad gangen.** Mens en antalsopdatering eller fjernelse er i gang, er rækkens kontroller deaktiveret for at holde carten konsistent, og genaktiveres, når ændringen er gennemført.
* At sænke en linjes antal under 1 fjerner den. Et antal, som butikken afviser (for eksempel ud over tilgængeligt lager), synkroniseres tilbage til den sidste gyldige værdi.
* **Bundles ændres som en enhed.** Justering af antallet på en bundles ankerlinje skalerer hele bundlen i én operation — hvis en underordnet vare er inkluderet med 3 pr. anker, tager en ændring af ankeret fra 1 til 2 den underordnede vare til 6. Fjernelse af ankeret fjerner alle bundlens medlemmer på én gang.
* **Nogle bundles kan ikke få ændret antal.** Hvis en af en bundles underordnede varer er inkluderet med en brøkdel (fx 1,5 pr. anker), er antalsvælgeren på den bundle låst: +/−-knapperne og antalsfeltet er begge deaktiveret, og indtastede antal accepteres ikke. Bundlen kan stadig fjernes.
* **Abonnementslinjer viser deres plan.** Når en linje har en salgsplan, og [Subscription upgrade](/da/aftersell/cart/subscription-upgrade-block)-under-blokken er slået fra eller ikke tilføjet, viser Product-rækken en skrivebeskyttet planetiket under varianten — for eksempel *Delivers every month (save 30%)*. Når den under-blok er aktiveret, præsenterer den planen i sin egen vælger, så den skrivebeskyttede etiket undertrykkes i stedet for at blive duplikeret.

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

* **Region:** brødtekst.
* **Maksimum:** 1 pr. cart-tilstand.
* **Tilstand:** kun fyldt cart.
* **Låst og tilføjet som standard.** Cart items kan ikke fjernes eller skjules, kun flyttes.

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

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

**Cart items**-containeren har ingen tilpasset skabelon. Det har **Product**-rækken inde i den, og den er den rigeste flade i carten: din skabelon renderes én gang pr. linje.

<div id="line-content">
  ### Linjeindhold
</div>

| Prop               | Type                        | Hvad den bruges til                                                                                                                                                                                                      |
| ------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `title`            | `string`                    | Produkttitel, som ren tekst.                                                                                                                                                                                             |
| `variantTitle`     | `string \| null`            | Variantetiket. `null` for produkter med én variant og native bundles.                                                                                                                                                    |
| `url`              | `string \| null`            | Produktsidens URL. `null`, når linjen ikke skal linke ud.                                                                                                                                                                |
| `imageUrl`         | `string \| null`            | Linjebillede. `null`, når produktet ikke har noget.                                                                                                                                                                      |
| `quantity`         | `number`                    | Aktuelt antal på linjen.                                                                                                                                                                                                 |
| `price`            | `string`                    | Linjepris, **allerede formateret**.                                                                                                                                                                                      |
| `compareAtPrice`   | `string \| null`            | Den gennemstregede "før"-pris, allerede formateret. `null`, når der ikke er noget at gennemstrege.                                                                                                                       |
| `savingsHtml`      | `string \| null`            | Besparelsesetiket som saneret HTML. `null`, når den er skjult, eller der ikke er nogen besparelse.                                                                                                                       |
| `discountTags`     | `string[]`                  | Titler på rabatter på denne linje, f.eks. `['Spring Sale']`. `[]`, når der ikke er nogen.                                                                                                                                |
| `sellingPlanLabel` | `string \| null`            | Skrivebeskyttet navn på abonnementsplan. `null`, når det er en engangslinje, eller når [Subscription upgrade](/da/aftersell/cart/subscription-upgrade-block#custom-template)-under-blokken renderer plan-UI'et i stedet. |
| `bundle`           | `object \| null`            | [Bundle](/da/aftersell/cart/sdk-cart-object#bundles)-visningsmodel på en ankerlinje. `null` ellers.                                                                                                                      |
| `productId`        | `number`                    | Shopify-produkt-ID.                                                                                                                                                                                                      |
| `variantId`        | `number`                    | Shopify-variant-ID.                                                                                                                                                                                                      |
| `line`             | `AftersellCartLine`         | Den fulde [cart-linje](/da/aftersell/cart/sdk-cart-object#cart-lines), for alt det, ovenstående props ikke dækker.                                                                                                       |
| `formatMoney`      | `(cents: number) => string` | Formaterer et beløb i mindste enhed. Brug den til priser, du læser fra `line`.                                                                                                                                           |

<Warning>
  **`price` og `compareAtPrice` er formaterede strenge; alt på `line` er i cent.** Lav ikke aritmetik på `price`. Beregn ud fra `line.finalLinePrice` og lignende, og kør derefter resultatet gennem `formatMoney`.
</Warning>

<div id="quantity-and-removal">
  ### Antal og fjernelse
</div>

| Prop                | Type                                             | Hvad den bruges til                                                                                                                                                                                                                           |
| ------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `increment`         | `() => void`                                     | Lægger én til linjen.                                                                                                                                                                                                                         |
| `decrement`         | `() => void`                                     | Fjerner én fra linjen.                                                                                                                                                                                                                        |
| `remove`            | `() => void`                                     | Fjerner linjen helt.                                                                                                                                                                                                                          |
| `quantityInput`     | `string`                                         | Aktuel værdi til et kontrolleret antal-`<input>`. En streng, så tilstande midt i indtastningen overlever.                                                                                                                                     |
| `onQuantityInput`   | `(event: Event) => void`                         | `onInput`-handler for det felt.                                                                                                                                                                                                               |
| `commitQuantity`    | `() => void`                                     | Anvender det indtastede antal. Kobl til `onBlur`.                                                                                                                                                                                             |
| `onQuantityKeyDown` | `(event: KeyboardEvent) => void`                 | `onKeyDown`-handler, så Enter bekræfter.                                                                                                                                                                                                      |
| `busy`              | `boolean`                                        | `true`, mens en cart-mutation er i gang. Deaktivér dine kontroller på denne.                                                                                                                                                                  |
| `pending`           | `'increment' \| 'decrement' \| 'remove' \| null` | Hvilken handling der aktuelt er i gang, til en målrettet spinner.                                                                                                                                                                             |
| `stepperLocked`     | `boolean`                                        | `true`, når antallet ikke kan ændres, fordi linjen er et bundle-anker med en underordnet vare inkluderet med en brøkdel pr. anker. Skjul eller deaktivér antalsvælgeren — de indbyggede handlers afviser allerede ændringer, mens den er sat. |

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  return (
    <div className="cart-external-cart-items__row" style={{ display: 'flex', gap: '12px', opacity: props.busy ? 0.6 : 1 }}>
      {props.imageUrl && <img src={props.imageUrl} alt="" width={64} height={64} />}

      <div style={{ flex: 1 }}>
        {props.url ? <a href={props.url}>{props.title}</a> : <span>{props.title}</span>}
        {props.variantTitle && <div style={{ opacity: 0.6 }}>{props.variantTitle}</div>}
        {props.sellingPlanLabel && <div style={{ opacity: 0.6 }}>{props.sellingPlanLabel}</div>}

        {props.discountTags.map((tag) => (
          <span key={tag} style={{ fontSize: '11px', border: '1px solid', borderRadius: '4px', padding: '1px 5px' }}>
            {tag}
          </span>
        ))}

        {!props.stepperLocked && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
            <button type="button" onClick={props.decrement} disabled={props.busy}>&minus;</button>
            <input
              value={props.quantityInput}
              onInput={props.onQuantityInput}
              onBlur={props.commitQuantity}
              onKeyDown={props.onQuantityKeyDown}
              size={2}
            />
            <button type="button" onClick={props.increment} disabled={props.busy}>+</button>
            <button type="button" onClick={props.remove} disabled={props.busy}>
              {props.pending === 'remove' ? 'Removing…' : 'Remove'}
            </button>
          </div>
        )}
      </div>

      <div style={{ textAlign: 'right' }}>
        <div>{props.price}</div>
        {props.compareAtPrice && <s style={{ opacity: 0.5 }}>{props.compareAtPrice}</s>}
        {props.savingsHtml && <div dangerouslySetInnerHTML={{ __html: props.savingsHtml }} />}
      </div>
    </div>
  );
}
```

<div id="rendering-a-bundle">
  ### Rendering af en bundle
</div>

På en bundles ankerlinje indeholder `bundle.children` dens indhold. Underordnede varer optræder aldrig som deres egne rækker, så hvis du ikke renderer dem, ser kunden ikke, hvad der er i bundlen:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  return (
    <div>
      <div>{props.title} {props.price}</div>

      {props.bundle && (
        <ul style={{ margin: '4px 0 0 12px', fontSize: '12px', opacity: 0.7 }}>
          {props.bundle.children.map((child, i) => (
            <li key={child.key ?? i}>{child.quantity} × {child.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
```

En underordnet vares `key` er `null` for en Shopify native bundle-komponent, så fald tilbage til indekset som ovenfor.

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

Stil denne blok med dens **Design**-sektion i indstillingspanelet. Dette er tilsidesættelser pr. blok, der lægges oven på dit globale design og falder tilbage til det, når de er tomme.

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