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

# Configurare un template personalizzato in Upcart

> Questo articolo illustra le principali prop disponibili per personalizzare i template di Upcart, aiutandoti a personalizzare l'esperienza del carrello mantenendo le funzionalità di base.

<div id="important-notice">
  ## ⚠️ **Avviso importante**
</div>

I template personalizzati richiedono conoscenze tecniche avanzate di HTML, CSS, JavaScript e React. Assicurati di avere sufficiente esperienza di sviluppo o accesso a uno sviluppatore Shopify qualificato prima di procedere. **Il nostro team di supporto non fornirà assistenza per lo sviluppo, il debug o la risoluzione di problemi dei template personalizzati.** Le domande tecniche vanno rivolte a uno Shopify Expert o a uno sviluppatore qualificato.

***

<div id="code-editor-features">
  ## Funzionalità dell'editor di codice
</div>

L'editor di codice dei template personalizzati include strumenti integrati per aiutarti a scrivere template validi più facilmente.

<div id="typescript-intellisense">
  ### IntelliSense TypeScript
</div>

L'editor comprende TypeScript, quindi ottieni suggerimenti di completamento automatico, controllo dei tipi e documentazione inline per tutte le `props` disponibili mentre digiti. I suggerimenti sui tipi delle prop sono IntelliSense esclusivo dell'editor per aiutarti a scrivere i template — non sono qualcosa che scrivi nel template e non vengono mai eseguiti sul tuo negozio online.

<div id="editable-template-body">
  ### Corpo del template modificabile
</div>

L'editor espone solo il corpo JSX modificabile del tuo template — non ci sono righe bloccate. Il wrapper di funzione circostante viene aggiunto automaticamente in fase di build e non viene mai mostrato nell'editor.

Usa **Reset to default** in qualsiasi momento per ripristinare il template originale se le tue modifiche compromettono la struttura del template.

***

<div id="general-section">
  ## Sezione General
</div>

<div id="header">
  ## Header
</div>

Il modulo Header ti consente di personalizzare l'intestazione del carrello con il tuo design mantenendo le funzionalità essenziali del carrello, come la visualizzazione del numero di articoli e il pulsante di chiusura.

<div id="available-props-full-template">
  ### **Prop disponibili - Template completo**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-drawer-header-title.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=7c679bee70bf5ff8a61657d83158e986" alt="Intestazione del cart drawer con il titolo Cart, il conteggio degli articoli e il pulsante di chiusura" width="400" data-path="images/upcart/custom-template-cart-drawer-header-title.png" />

`cartQuantity`

* **Tipo**: `string`

* **Descrizione**: il numero attuale di articoli nel carrello, formattato come stringa

* **Utilizzo**: mostra il conteggio degli articoli del carrello nel design personalizzato della tua intestazione

```
<h2>Shopping Cart ({props.cartQuantity})</h2>
```

`closeHandler`

* **Tipo**: `() => void`

* **Descrizione**: una funzione di callback che chiude il carrello quando viene attivata

* **Utilizzo**: collegala a pulsanti, icone o altri elementi interattivi per chiudere il carrello

```
<button  
  onClick={props.closeHandler}  
  aria-label="Close cart"  
>×</button>
```

`titleComponent`

* **Tipo**: `React.ReactElement | null`

* **Descrizione**: un componente titolo pre-renderizzato per l'intestazione del carrello che include stili e traduzioni corretti

* **Utilizzo**: mostra il titolo del carrello in base alla configurazione delle impostazioni del tuo carrello

```
<div>{props.titleComponent}</div>
```

***

<div id="body-section">
  ## Sezione Body
</div>

<div id="announcements">
  ## Announcements
</div>

Il modulo Announcements ti consente di personalizzare la visualizzazione degli annunci con il tuo design mantenendo le funzionalità essenziali degli annunci, come i controlli del timer e la visibilità condizionale.

<div id="available-props-full-template-2">
  ### Prop disponibili - **Template completo**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-announcement-bar-countdown.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=2c7d03e71ebf5bec3b5d3bddff3447b3" alt="Barra degli annunci del carrello con un timer per il conto alla rovescia che riserva i prodotti del cliente" width="400" data-path="images/upcart/custom-template-cart-announcement-bar-countdown.png" />

`announcementTemplate`

* **Tipo**: `string`

* **Descrizione**: il contenuto HTML del messaggio di annuncio

* **Utilizzo**: mostra il messaggio di annuncio nelle tue implementazioni personalizzate

```
<div dangerouslySetInnerHTML={{ __html: props.announcementTemplate }} />
```

`timer`

* **Tipo**: `string`

* **Descrizione**: il valore attuale del timer formattato come stringa

* **Utilizzo**: mostra il conto alla rovescia nelle implementazioni personalizzate degli annunci

```
<div>Time remaining: {props.timer}</div>
```

`shouldUseTimer`

* **Tipo**: `boolean`

* **Descrizione**: indica se la funzionalità timer è abilitata per questo annuncio

* **Utilizzo**: renderizza in modo condizionale contenuti e controlli legati al timer

```
<div>  
  {props.shouldUseTimer && (  
    <span>{props.timer}</span>   
  )}  
</div>
```

`isTimerExpiredAndShouldHide`

* **Tipo**: `boolean`

* **Descrizione**: indica se il timer è scaduto e l'annuncio deve essere nascosto

* **Utilizzo**: controlla la visibilità dell'intero annuncio in base allo stato del timer

```
<div>  
  {!props.isTimerExpiredAndShouldHide && (  
    <div>{props.timer}</div>  
  )}  
</div>
```

<div id="tiered-rewards">
  ## Tiered Rewards
</div>

Il modulo Rewards ti consente di personalizzare la visualizzazione dell'avanzamento dei premi con il tuo design mantenendo le funzionalità essenziali dei premi, come il tracciamento dei traguardi, la visualizzazione dell'avanzamento e i messaggi dei premi.

<div id="available-props-full-template-3">
  ### Prop disponibili - **Template completo**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-tiered-rewards-progress-bar.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=78f30082b982815d333f8de09225d884" alt="Barra di avanzamento dei premi a livelli con le icone dei traguardi di spedizione gratuita e prodotto" width="400" data-path="images/upcart/custom-template-tiered-rewards-progress-bar.png" />

`rewardsMessageHtml`

* **Tipo**: `string`

* **Descrizione**: il contenuto HTML del messaggio dei premi

* **Utilizzo**: mostra il messaggio dei premi con formattazione avanzata nelle implementazioni personalizzate

```
<div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />
```

`milestonesCompleted`

* **Tipo**: `number`

* **Descrizione**: il numero di traguardi completati

* **Utilizzo**: mostra il conteggio dei completamenti o calcola la percentuale di completamento

```
<div>  
  {Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete  
</div>
```

`milestonesData`

* Tipo:

  ```
  {  
    milestonesToRender: {  
      id: string;  
      label: string;  
      icon: React.ReactElement;  
      isCompleted: boolean;  
      positionPercent: number;  
    }[];  
    progressPercent: number;  
    showMilestones: boolean;  
    settings: {  
      iconContainerSize: string;  
      iconAlignment: string;  
      labelAlignment: string;  
      hideLabel: boolean;  
    };  
  }
  ```

* **Descrizione**: configurazione completa dei traguardi e dati di avanzamento per il sistema dei premi

* **Utilizzo**: accedi alle informazioni sui traguardi, alla percentuale di avanzamento e alle impostazioni di visualizzazione

* **Proprietà**:

  * `milestonesToRender`: array di oggetti traguardo con stato di completamento e posizionamento
  * `progressPercent`: avanzamento attuale come percentuale (0-100)
  * `showMilestones`: se mostrare gli indicatori dei traguardi
  * `settings`: configurazione visiva per la visualizzazione dei traguardi

<div id="discounts">
  ## Discounts
</div>

Il modulo Discounts supporta i template personalizzati, così puoi progettare la tua visualizzazione mantenendo le funzionalità essenziali come la gestione delle regole, la visibilità della sezione e la presentazione dei premi. L'identificatore interno del tipo di modulo per i template personalizzati è `TRIGGERED_REWARDS`, per retrocompatibilità con il codice dei template personalizzati esistenti.

<div id="available-props-full-template-4">
  ### **Prop disponibili - Template completo**
</div>

`rules`

* **Tipo**:

  ```
  {  
    id: string;  
    title: string;  
    description: string;  
    conditionsMet: boolean;  
  }[]
  ```

* **Descrizione**: array delle regole di sconto attualmente abilitate

* **Utilizzo**: mostra i premi disponibili, i loro titoli, le descrizioni e se le condizioni di ciascuna regola sono state soddisfatte

* **Proprietà**:

  * `id`: identificatore univoco della regola del premio
  * `title`: titolo della regola di sconto
  * `description`: descrizione della regola del premio
  * `conditionsMet`: se le condizioni della regola sono attualmente soddisfatte dal carrello. Usala per costruire pattern UX del tipo "hai sbloccato X" vs "spendi altri \$Y per sbloccare X"

```
<div>
  {props.rules.map((rule) => (
    <div key={rule.id}>
      <h3>{rule.title}</h3>
      <p>{rule.conditionsMet ? "Reward unlocked!" : rule.description}</p>
    </div>
  ))}
</div>
```

`showSection`

* **Tipo**: `boolean`

* **Descrizione**: indica se la sezione Discounts deve essere mostrata

* **Utilizzo**: controlla la visibilità dell'intero modulo Discounts

```
<div>  
  {props.showSection && (  
    <div>  
      <h2>Available Rewards...</h2>  
    </div>  
  )}  
</div>
```

`onToggleSection`

* **Tipo**: `() => void`

* **Descrizione**: una funzione di callback che attiva/disattiva lo stato di visibilità della sezione Discounts

* **Utilizzo**: collegala a pulsanti o elementi interattivi per consentire agli utenti di mostrare/nascondere la sezione dei premi

```
<button type="button" onClick={props.onToggleSection}>  
  {props.showSection ? "Hide Rewards" : "Show Available Rewards"}  
</button>
```

<div id="recommendations">
  ## Recommendations
</div>

Il modulo Recommendation ti consente di personalizzare la visualizzazione dei prodotti in upsell con il tuo design mantenendo le funzionalità e-commerce essenziali come la selezione delle varianti, le azioni di aggiunta al carrello e la visualizzazione delle informazioni sul prodotto.

<div id="available-props-recommendation-tile-template">
  ### **Prop disponibili - Template tile raccomandazione**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-recommendation-tile-snowboard-product.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=7db82e0496937fa8ee8eea180edb3530" alt="Tile di raccomandazione che mostra uno snowboard con prezzo e pulsante Add" width="400" data-path="images/upcart/custom-template-recommendation-tile-snowboard-product.png" />

*Il template del tile di raccomandazione condivide la [stessa interfaccia di prop del template del tile di upsell](#available-props-upsell-tile-template) nel modulo Upsells. Tutte le prop disponibili, i tipi e gli esempi d'uso sono documentati nella sezione del modulo Upsells qui sotto.*

<div id="cart-items">
  ## Cart Items
</div>

Il modulo Cart Items ti consente di personalizzare la visualizzazione degli articoli del carrello con il tuo design mantenendo le funzionalità e-commerce essenziali. Questo modulo fornisce diversi tipi di template, ciascuno con le proprie prop specifiche per i vari aspetti della visualizzazione degli articoli del carrello.

<Note>
  **Mostrare un indicatore di caricamento durante l'aggiunta al carrello o gli aggiornamenti del carrello:** il modulo Cart Items standard non espone uno spinner "aggiunta al carrello" integrato. Se vuoi mostrare uno stato di caricamento mentre un articolo viene aggiunto o un'operazione sul carrello è in corso, usa il template Product tile e leggi le prop `isLoading` e `loadingOperation` (documentate qui sotto) per renderizzare in modo condizionale uno spinner o un overlay. I template personalizzati richiedono esperienza da sviluppatore — vedi l'avviso in cima a questa pagina.
</Note>

<div id="available-props-product-tile-template">
  ### **Prop disponibili - Template Product tile**
</div>

**Nota:** abilitare il template *Product Tile* sovrascriverà tutti gli altri template di questo modulo, inclusi **Variant template**, **Properties template**, **Bundle template** e **Price template**.\
Se vuoi usare codice personalizzato in uno di quei template, ***devi*** *disattivare il template Product Tile.*

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-product-tile-variant.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=3d2efc06b542f7c59cc86ad3fe611a0e" alt="Tile di prodotto del carrello con immagine, variante, prezzo scontato, selettore di quantità e pulsante di abbonamento" width="400" data-path="images/upcart/custom-template-cart-product-tile-variant.png" />

`title`

* **Tipo**: `string`

* **Descrizione**: il titolo/nome del prodotto

* **Utilizzo**: mostra il nome principale del prodotto negli articoli del carrello

`variant`

* **Tipo**: `React.ReactNode`

* **Descrizione**: componente pre-renderizzato con le informazioni sulla variante

* **Utilizzo**: mostra i dettagli della variante come componente React

`properties`

* **Tipo**: `React.ReactNode`

* **Descrizione**: componente pre-renderizzato con le proprietà del prodotto

* **Utilizzo**: mostra le proprietà del prodotto e le informazioni sull'abbonamento come componente React

`bundle`

* **Tipo**: `React.ReactNode`

* **Descrizione**: componente pre-renderizzato con i dettagli del bundle

* **Utilizzo**: mostra le informazioni sul bundle come componente React

`compareAtPrice`

* **Tipo**: `string | undefined`

* **Descrizione**: prezzo confrontato formattato (prezzo originale)

* **Utilizzo**: mostra il prezzo originale per gli articoli in saldo

`price`

* **Tipo**: `string`

* **Descrizione**: prezzo attuale formattato

* **Utilizzo**: mostra il prezzo attuale dell'articolo

`savings`

* **Tipo**: `string | undefined`

* **Descrizione**: importo del risparmio formattato

* **Utilizzo**: mostra quanto risparmia il cliente

`imageUrl`

* **Tipo**: `string | undefined`

* **Descrizione**: URL dell'immagine del prodotto

* **Utilizzo**: mostra l'immagine del prodotto

`productUrl`

* **Tipo**: `string | undefined`

* **Descrizione**: URL della pagina del prodotto

* **Utilizzo**: collega alla pagina di dettaglio del prodotto

`quantity`

* **Tipo**: `number`

* **Descrizione**: quantità attuale dell'articolo nel carrello

* **Utilizzo**: mostra e gestisci la quantità dell'articolo

`showQuantitySelector`

* **Tipo**: `boolean`

* **Descrizione**: se mostrare i controlli della quantità

* **Utilizzo**: mostra in modo condizionale il selettore di quantità

`discountCodes`

* **Tipo**: `string[] | undefined`

* **Descrizione**: array dei codici sconto applicati a questo articolo

* **Utilizzo**: mostra gli sconti specifici dell'articolo

`subscription`

* **Tipo**:

  ```
  {  
    subscriptionUpgradeData: {  
      buttonText: string;  
      defaultSellingPlanId: number;  
    } | null;  
    sellingPlansData: {  
      sellingPlanGroups: {  
        name: string;  
        selling_plans: {  
          id: number;  
          name: string;  
        }[];  
      }[] | null;  
      activeSellingPlanId: string;  
      oneTimePurchaseText: string | null;  
    } | null;  
    upgradeSellingPlan: (item: CartItem, sellingPlanId: number) => void;  
    changeSellingPlan: (item: CartItem, value: string) => void;  
    getSellingPlanGroupText: (groupName: string, planName: string) => string;  
  }
  ```

* **Descrizione**: oggetto completo di gestione dell'abbonamento con dati di upgrade, piani di vendita e funzioni handler

* **Utilizzo**: gestisci la funzionalità di abbonamento

* L'oggetto subscription contiene:

  * **subscriptionUpgradeData**: informazioni sull'upgrade (null se non è disponibile alcun upgrade)

    * `buttonText`: testo del pulsante di upgrade
    * `defaultSellingPlanId`: ID del piano di vendita predefinito per gli upgrade
  * **sellingPlansData**: opzioni dei piani di vendita disponibili (null se non ci sono piani)

    * `sellingPlanGroups`: array di gruppi di piani con i rispettivi piani di vendita
    * `activeSellingPlanId`: ID del piano di vendita attualmente selezionato
    * `oneTimePurchaseText`: testo per l'opzione di acquisto una tantum (null se non disponibile)
  * **upgradeSellingPlan**: funzione per passare a un piano di vendita specifico
  * **changeSellingPlan**: funzione per cambiare il piano di vendita attuale
  * **getSellingPlanGroupText**: funzione di utilità per formattare il testo di visualizzazione del piano di vendita

`onIncrease`

* **Tipo**: `() => void`

* **Descrizione**: funzione per aumentare la quantità dell'articolo

* **Utilizzo**: gestisci le azioni di aumento della quantità

`onDecrease`

* **Tipo**: `() => void`

* **Descrizione**: funzione per diminuire la quantità dell'articolo

* **Utilizzo**: gestisci le azioni di diminuzione della quantità

`onDeleteProduct`

* **Tipo**: `() => void`

* **Descrizione**: funzione per rimuovere l'articolo dal carrello

* **Utilizzo**: gestisci la rimozione dell'articolo

`onQuantityChange`

* **Tipo**: `(quantity: string) => void`

* **Descrizione**: funzione per gestire l'inserimento diretto della quantità

* **Utilizzo**: gestisci le modifiche manuali della quantità

`handleInputChange`

* **Tipo**: `(e: React.ChangeEvent<HTMLInputElement>) => void`

* **Descrizione**: handler di modifica dell'input per il campo quantità

* **Utilizzo**: gestisci le modifiche del campo di input della quantità

`replaceItemWithVariant`

* **Tipo**: `(variantId: string) => Promise<{ success: boolean }>`

* **Descrizione**: funzione per sostituire l'articolo con una variante diversa

* **Utilizzo**: gestisci il cambio di variante

`isLoading`

* **Tipo**: `boolean`

* **Descrizione**: stato di caricamento per le operazioni sul carrello

* **Utilizzo**: mostra indicatori di caricamento

`loadingOperation`

* **Tipo**: `'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined`

* **Descrizione**: operazione specifica attualmente in caricamento

* **Utilizzo**: mostra stati di caricamento specifici per operazione

`setLoadingOperation`

* **Tipo**: `(op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void`

* **Descrizione**: funzione per impostare lo stato dell'operazione in caricamento

* **Utilizzo**: gestisci gli stati di caricamento per le diverse operazioni

`rawItem`

* **Tipo**: `CartItem` (fai riferimento al tipo `CartItem` [qui sotto](#cartitem-object-properties))

* **Descrizione**: dati grezzi dell'articolo del carrello contenenti tutte le informazioni

<div id="available-props-variant-template">
  ### **Prop disponibili - Template Variant**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-item-variant-line.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c1220e3bf77d9b091c82d0f0b7709034" alt="Riga della variante dell'articolo del carrello che mostra la taglia Medium selezionata" width="150" data-path="images/upcart/custom-template-cart-item-variant-line.png" />

`item`

* **Tipo**: `CartItem` (fai riferimento al tipo `CartItem` [qui sotto](#cartitem-object-properties))

* **Descrizione**: dati grezzi dell'articolo del carrello contenenti le informazioni sulla variante

* **Utilizzo**: accedi ai dettagli della variante dall'articolo del carrello

<div id="available-props-properties-template">
  ### **Prop disponibili - Template Properties**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-item-property-line.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=2ce7abe36cf542d62e9fc7e2092e7009" alt="Riga delle proprietà dell'articolo del carrello che mostra una nota con messaggio regalo" width="220" data-path="images/upcart/custom-template-cart-item-property-line.png" />

`productProperties`

* **Tipo**: `{ key: string; value: string; isUrl?: boolean; }[]`

* **Descrizione**: array delle proprietà del prodotto (campi personalizzati, proprietà della riga d'ordine)

`subscriptionLabel`

* **Tipo**: `string | undefined`

* **Descrizione**: etichetta per le informazioni sull'abbonamento

<div id="available-props-bundle-template">
  ### **Prop disponibili - Template Bundle**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-expanded-bundle-components.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=9a04c17667ea4af9cef303b96c079f37" alt="Bundle espanso che elenca tre prodotti componenti inclusi con le varianti" width="200" data-path="images/upcart/custom-template-expanded-bundle-components.png" />

`getSizedImageUrl`

* **Tipo**: `getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string`

* **Descrizione**: funzione di utilità per ottenere URL di immagini nella dimensione corretta

`item`

* **Tipo**:

  ```
  {  
    itemComponents: {  
      quantity: number;  
      image: {  
        url: string;  
        height: number | null;  
        width: number | null;  
        alt: string;  
      };  
      product: {  
        title: string;  
        has_only_default_variant: boolean;  
      };  
      variantTitle: string;  
    }[];  
    variantTitle: string | undefined;  
    hasComponents: boolean;  
  }
  ```

* **Descrizione**: informazioni sull'articolo bundle, componenti inclusi. `itemComponents` è un array di oggetti componente — iteralo con map per renderizzare ogni componente del bundle.

`showDetailsText`

* **Tipo**: `string | undefined`

* **Descrizione**: testo per l'azione "mostra dettagli"

* **Utilizzo**: mostra il testo del pulsante di espansione

`hideDetailsText`

* **Tipo**: `string | undefined`

* **Descrizione**: testo per l'azione "nascondi dettagli"

`isExpanded`

* **Tipo**: `boolean`

* **Descrizione**: se i dettagli del bundle sono espansi

`toggleCollapsible`

* **Tipo**: `() => void`

* **Descrizione**: funzione per attivare/disattivare la visibilità dei dettagli del bundle

* **Utilizzo**: gestisci le azioni di espansione/compressione

`chevronDownIconComponent`

* **Tipo**: `React.ReactElement`

* **Descrizione**: icona chevron pre-renderizzata per l'espansione/compressione

* **Utilizzo**: mostra un indicatore di espansione/compressione coerente

<div id="available-props-price-template">
  ### **Prop disponibili - Template Price**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-price-strikethrough.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=34deca3e39b1aabbafae6ed19d209450" alt="Prezzo del carrello con il prezzo originale barrato, il prezzo scontato e il risparmio" width="250" data-path="images/upcart/custom-template-cart-price-strikethrough.png" />

`compareAtPrice`

* **Tipo**: `string | undefined`

* **Descrizione**: prezzo confrontato formattato (prezzo originale)

* **Utilizzo**: mostra il prezzo originale per gli articoli in saldo

`price`

* **Tipo**: `string`

* **Descrizione**: prezzo attuale formattato

* **Utilizzo**: mostra il prezzo attuale dell'articolo

`savings`

* **Tipo**: `string | undefined`

* **Descrizione**: importo del risparmio formattato

* **Utilizzo**: mostra quanto risparmia il cliente

<div id="cartitem-object-properties">
  ### **Proprietà dell'oggetto CartItem**
</div>

L'oggetto `CartItem` contiene tutte le informazioni dettagliate su una riga del carrello. Questo oggetto è disponibile come props.rawItem nel template Product Tile e come props.item nel template Variant.

<div id="core-identification">
  #### **Identificazione principale**
</div>

* `key (string)` - Identificatore univoco di questo articolo del carrello.

* `id (number)` - ID della variante (campo legacy, usa invece variant\_id)

* `variant_id (number)` - L'ID della variante Shopify per questo articolo

* `product_id (number)` - L'ID del prodotto Shopify

* `lineIdxFrom1 (number)` - Indice (a partire da 1) di questo articolo nel carrello originale prima delle modifiche

<div id="product-information">
  #### **Informazioni sul prodotto**
</div>

* `title (string)` - Il titolo della riga d'ordine (di solito il titolo della variante)

* `product_title (string)` - Il titolo principale del prodotto

* `handle (string)` - Handle dell'URL del prodotto (ad es. "camp-stool")

* `vendor (string)` - Nome del fornitore/brand del prodotto

* `product_type (string)` - Categoria/tipo di prodotto a fini fiscali

* `sku (string)` - Identificatore SKU (Stock Keeping Unit)

* `product_description (string)` - Descrizione completa del prodotto

* `product_has_only_default_variant (boolean)` - Se il prodotto ha una sola variante

<div id="pricing-all-prices-in-cents">
  #### **Prezzi (tutti i prezzi in centesimi)**
</div>

* `quantity (number)` - Numero di questo articolo nel carrello

* `price (number)` - Prezzo unitario prima degli sconti

* `original_price (number)` - Uguale a price

* `discounted_price (number)` - Prezzo unitario dopo gli sconti a livello di prodotto

* `compare_at_price (number | null)` - Prezzo confrontato (MSRP). Nota: questo campo è aggiunto da Upcart, non fornito dall'API del carrello di Shopify

* `final_line_price (number)` - Prezzo totale dopo gli sconti a livello di prodotto (quantity × discounted\_price)

* `original_line_price (number)` - Prezzo totale prima degli sconti (quantity × price)

* `line_price (number)` - Prezzo totale dopo tutti gli sconti

* `final_price (number)` - **Deprecato** - Prezzo unitario dopo gli sconti sul prodotto (non tiene conto della quantità)

* `total_discount (number)` - Uguale a line\_level\_total\_discount

* `line_level_total_discount (number)` - Importo totale dello sconto applicato a questa riga

<div id="media-urls">
  #### **Media e URL**
</div>

* `image (string)` - URL dell'immagine principale del prodotto

* `url (string)` - Percorso URL relativo alla pagina del prodotto (ad es. "/products/camp-stool?variant=42789611372803")

* `featured_image (object | null)` - Dettagli dell'immagine in evidenza:

  * `alt (string)` - Testo alternativo dell'immagine
  * `aspect_ratio (number)` - Proporzioni dell'immagine
  * `height (number)` - Altezza dell'immagine in pixel
  * `url (string)` - URL dell'immagine
  * `width (number)` - Larghezza dell'immagine in pixel

<div id="variants-options">
  #### **Varianti e opzioni**
</div>

* `variant_title (string | null)` - Titolo della variante (ad es. "Large / Red")

* `variant_options (string[])` - Array dei valori delle opzioni della variante

* `options_with_values (Array)` - Informazioni dettagliate sulle opzioni:

  * `name (string)` - Nome dell'opzione (ad es. "Size")
  * `value (string)` - Valore dell'opzione (ad es. "Large")

* `untranslated_product_title (string | undefined)` - Titolo originale del prodotto prima della traduzione (solo nelle risposte di mutazione del carrello)

* `untranslated_variant_title (string | undefined)` - Titolo originale della variante prima della traduzione (solo nelle risposte di mutazione del carrello)

<div id="custom-properties-metadata">
  #### **Proprietà personalizzate e metadati**
</div>

* `properties (Record<string, any> | null)` - Proprietà personalizzate della riga d'ordine, oppure `null` quando la riga non ne ha — verifica prima di leggere una chiave. Le proprietà le cui chiavi iniziano con `__` sono sempre nascoste ai clienti; anche le chiavi che iniziano con un singolo `_` sono nascoste quando l'impostazione del carrello **Hide properties starting with single underscore "\_"** è attiva.

* `gift_card (boolean)` - Se questo articolo è una carta regalo

* `taxable (boolean)` - Se questo articolo è soggetto a tasse

* `requires_shipping (boolean)` - Se questo articolo richiede la spedizione

* `grams (number)` - Peso dell'articolo in grammi

<div id="discounts-promotions">
  #### **Sconti e promozioni**
</div>

* `discounts (Array)` - Informazioni semplificate sugli sconti:

  * `amount (number)` - Importo dello sconto in centesimi
  * `title (string)` - Titolo/nome dello sconto

* `line_level_discount_allocations (Array)` - Informazioni dettagliate sull'allocazione degli sconti:

  * `amount (number)` - Importo dello sconto in centesimi
  * `discount_application (object)` - Dettagli completi dell'applicazione dello sconto:

    * `allocation_method (string)` - Come viene allocato lo sconto
    * `created_at (string)` - Quando è stato creato lo sconto
    * `description (string | null)` - Descrizione dello sconto
    * `key (string)` - Identificatore chiave dello sconto
    * `target_selection (string)` - Cosa prende di mira lo sconto
    * `target_type (string)` - Tipo di destinazione
    * `title (string)` - Titolo dello sconto
    * `total_allocated_amount (number)` - Importo totale allocato
    * `type ('discount_code' | '')` - Tipo di sconto (stringa vuota per gli sconti automatici)
    * `value (string)` - Valore dello sconto
    * `value_type (string)` - Come viene applicato il valore

<div id="bundle-products">
  #### **Prodotti bundle**
</div>

* `has_components (boolean | undefined)` - Se questo articolo è un bundle contenente altri prodotti (solo nelle risposte GET del carrello)

* `item_components (Array | null | undefined)` - Dettagli dei componenti del bundle:

  * `quantity (number)` - Quantità di questo componente
  * `image (object)` - Immagine del componente:

    * `url (string)` - URL dell'immagine
    * `height (number | null)` - Altezza dell'immagine
    * `width (number | null)` - Larghezza dell'immagine
    * `alt (string)` - Testo alternativo

* `product (object)` - Informazioni sul prodotto componente:

  * `title (string)` - Titolo del prodotto
  * `has_only_default_variant (boolean)` - Se il prodotto ha solo la variante predefinita

* `variantTitle (string)` - Titolo della variante del componente

<div id="business-rules">
  #### **Regole di business**
</div>

* `quantity_rule (object | undefined)` - Vincoli di quantità (solo nelle risposte GET del carrello):

  * `min (number)` - Quantità minima consentita
  * `max (number | null)` - Quantità massima consentita (null = nessun limite)
  * `increment (number)` - Passo di incremento della quantità

<div id="subscription-information">
  #### **Informazioni sull'abbonamento**
</div>

* `selling_plan_allocation (object | undefined)` - Dettagli dell'abbonamento/piano di vendita:

  * `price (number)` - Prezzo dell'abbonamento in centesimi
  * `compare_at_price (number | null)` - Prezzo confrontato dell'abbonamento
  * `per_delivery_price (number)` - Prezzo per consegna
  * `selling_plan (object)` - Dettagli del piano di vendita:

    * `id (number)` - ID del piano di vendita
    * `name (string)` - Nome del piano
    * `description (string)` - Descrizione del piano
    * `options (Array)` - Opzioni del piano:

      * `name (string)` - Nome dell'opzione
      * `position (number)` - Posizione dell'opzione
      * `value (string)` - Valore dell'opzione
    * `recurring_deliveries (boolean)` - Se il piano prevede consegne ricorrenti

<div id="integration-metadata">
  #### **Metadati di integrazione**
</div>

* `__appIntegrated (object | undefined)` - Dati di integrazione con app di terze parti:

  * `app ('stay.ai')` - Identificatore dell'app integrata
  * `bundleRole ('parent' | 'child')` - Ruolo nella struttura del bundle

<div id="upsells">
  ## Upsells
</div>

Il modulo Upsells ti consente di personalizzare la visualizzazione dei prodotti in upsell con il tuo design mantenendo le funzionalità e-commerce essenziali come la selezione delle varianti, le azioni di aggiunta al carrello e la visualizzazione delle informazioni sul prodotto.

<div id="available-props-upsell-tile-template">
  ### **Prop disponibili - Template tile upsell**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-upsell-tile-product-sale.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=276d261e795de83ca0882f4cd713ec61" alt="Tile di upsell che mostra un prodotto con prezzo scontato, menu a tendina delle varianti e pulsante Add" width="400" data-path="images/upcart/custom-template-upsell-tile-product-sale.png" />

`itemUrl`

* **Tipo**: `string`

* **Descrizione**: l'URL della pagina del prodotto

* **Utilizzo**: crea link alla pagina di dettaglio del prodotto per una migliore navigazione dell'utente

```
<a href={props.itemUrl} className="product-link">  
  <img src={props.imageUrl} alt={props.altText} />  
</a>
```

`imageUrl`

* **Tipo**: `string | undefined`

* **Descrizione**: l'URL dell'immagine del prodotto

* **Utilizzo**: mostra le immagini dei prodotti nelle implementazioni di upsell personalizzate

* **Fallback**: gestisci con eleganza i valori undefined con immagini segnaposto

`description`

* **Tipo**: `string`

* **Descrizione**: la descrizione del prodotto

* **Utilizzo**: mostra la descrizione del prodotto nelle implementazioni di upsell personalizzate

`altText`

* **Tipo**: `string`

* **Descrizione**: testo alternativo per l'immagine del prodotto ai fini dell'accessibilità

* **Utilizzo**: fornisci supporto agli screen reader e migliora la conformità in materia di accessibilità

```
<img   
  src={props.imageUrl}   
  alt={props.altText}  
  className="product-image"  
/>
```

`productId`

* **Tipo**: `string`

* **Descrizione**: l'identificatore univoco del prodotto

* **Utilizzo**: traccia i prodotti, implementa analytics o usalo nella funzionalità di aggiunta al carrello

`productTitle`

* **Tipo**: `string`

* **Descrizione**: il titolo/nome del prodotto

* **Utilizzo**: mostra il nome del prodotto nelle implementazioni di upsell personalizzate

```
<div>  
  <h3>{props.productTitle}</h3>  
</div>
```

`oldPrice` & `newPrice`

* **Tipo**: `string | null` (oldPrice), `string` (newPrice)

* **Descrizione**: prezzo confrontato e prezzo attuale formattati

* **Utilizzo**: mostra le informazioni sui prezzi con indicatori di saldo

`isSingleVariant`

* **Tipo**: `boolean`

* **Descrizione**: indica se il prodotto ha una sola variante

* **Utilizzo**: renderizza in modo condizionale gli elementi UI di selezione delle varianti

`productOptions`

* **Tipo**: `{ name: string; position: 1 | 2 | 3; values: string[]; }[]`

* **Descrizione**: configurazione completa delle opzioni del prodotto, incluse tutte le scelte disponibili

* **Utilizzo**: accedi alle informazioni dettagliate sulle opzioni del prodotto per interfacce avanzate di selezione delle varianti

`variantOptions`

* **Tipo**: `{ label: string; value: string }[]`

* **Descrizione**: opzioni di variante disponibili per il prodotto

* **Utilizzo**: crea menu a tendina o pulsanti per la selezione delle varianti

* **Struttura**: ogni opzione contiene un'etichetta di visualizzazione e un identificatore di valore univoco

`selectedVariantId` & `selectedVariantLabel`

* **Tipo**: string (selectedVariantId), string | undefined (selectedVariantLabel)

* **Descrizione**: ID della variante attualmente selezionata e la sua etichetta di visualizzazione

* **Utilizzo**: traccia e mostra le informazioni sulla variante selezionata

`onVariantChange`

* **Tipo**: `(variantId: string) => void`

* **Descrizione**: funzione per gestire i cambi di selezione della variante

* **Utilizzo**: aggiorna la variante selezionata quando l'utente effettua una selezione

`onAddClick`

* **Tipo**: `(productId: string, variantId?: string) => void`

* **Descrizione**: funzione per gestire l'aggiunta del prodotto al carrello

* **Utilizzo**: implementa la funzionalità di aggiunta al carrello con la corretta identificazione di prodotto e variante

```
<button   
  onClick={() => props.onAddClick(props.productId, props.selectedVariantId)}  
  disabled={props.addLoading}  
>  
  {props.addLoading ? 'Adding...' : props.addButtonText}  
</button>
```

`rating` & `reviewCount`

* **Tipo**: `number | undefined` (rating), `string | undefined` (reviewCount)

* **Descrizione**: valutazione del prodotto e testo formattato del conteggio delle recensioni

* **Utilizzo**: mostra riprova sociale e indicatori di qualità del prodotto

`addLoading` & `addButtonText`

* **Tipo**: `boolean` (addLoading), `string` (addButtonText)

* **Descrizione**: stato di caricamento per l'azione di aggiunta al carrello e testo del pulsante

* **Utilizzo**: fornisci feedback all'utente durante le operazioni sul carrello e personalizza il testo del pulsante

`cartItemsCount`

* **Tipo**: `number`

* **Descrizione**: il numero attuale di articoli nel carrello

* **Utilizzo**: mostra lo stato del carrello o implementa logiche basate sul carrello

<div id="additional-notes">
  ## Additional Notes
</div>

Il modulo Notes ti consente di personalizzare la funzionalità delle note del carrello con il tuo design mantenendo le capacità essenziali di annotazione come sezioni espandibili, gestione dell'input di testo e stati di caricamento.

<div id="available-props-full-template-5">
  ### **Prop disponibili - Template completo**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-notes-section-expandable.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=ce3f2a79f875029e6358c2227cd024d9" alt="Sezione delle note del carrello con un campo di testo espandibile per istruzioni speciali" width="400" data-path="images/upcart/custom-template-cart-notes-section-expandable.png" />

`cartNote`

* **Tipo**: `string`

* **Descrizione**: il contenuto attuale della nota del carrello inserita dal cliente

* **Utilizzo**: mostra e gestisci il testo della nota del carrello nelle implementazioni personalizzate

```
<textarea  
  value={props.cartNote}  
  ...  
/>
```

`notesPlaceholder`

* **Tipo**: `string`

* **Descrizione**: testo segnaposto per il campo di input delle note

* **Utilizzo**: fornisci ai clienti indicazioni su cosa includere nelle loro note

```
<textarea  
  placeholder={props.notesPlaceholder}  
  ...  
/>
```

`notesTitle`

* **Tipo**: `string`

* **Descrizione**: il testo del titolo/intestazione della sezione delle note

* **Utilizzo**: mostra il titolo della sezione nelle implementazioni personalizzate delle note

```
<h3 className="notes-title" dangerouslySetInnerHTML={{ __html: props.notesTitle }} />
```

`chevronDownIconComponent`

* **Tipo**: `React.ReactElement`

* **Descrizione**: componente icona chevron pre-renderizzato per la funzionalità di espansione/compressione

* **Utilizzo**: mostra indicatori di espansione/compressione coerenti nelle implementazioni personalizzate

`loadingIndicatorComponent`

* **Tipo**: `React.ReactElement | null`

* **Descrizione**: componente indicatore di caricamento pre-renderizzato per le operazioni asincrone

* **Utilizzo**: mostra stati di caricamento durante le operazioni di salvataggio delle note

`handleCartNoteChange`

* **Tipo**: `(newCartNote: string) => void`

* **Descrizione**: funzione per gestire le modifiche al contenuto della nota del carrello

* **Utilizzo**: aggiorna la nota del carrello quando l'utente modifica il testo

`isExpanded`

* **Tipo**: `boolean`

* **Descrizione**: indica se la sezione delle note è attualmente espansa

* **Utilizzo**: controlla la visibilità dell'area di input delle note

`toggleCollapsible`

* **Tipo**: `() => void`

* **Descrizione**: funzione per alternare lo stato espanso/compresso della sezione delle note

* **Utilizzo**: collegala a pulsanti o elementi interattivi per controllare la visibilità della sezione

***

<div id="footer-section">
  ## Sezione Footer
</div>

<div id="add-ons">
  ## Add-ons
</div>

Il modulo Addons ti consente di personalizzare la visualizzazione dei prodotti add-on con il tuo design mantenendo le funzionalità e-commerce essenziali come la visualizzazione delle informazioni sul prodotto, i prezzi, i controlli di attivazione e la formattazione della valuta.

<div id="available-props-full-template-6">
  ### **Prop disponibili - Template completo**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-add-on-product-row-gift-card.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=8a705eec52fbe1e24420467f92978829" alt="Riga del prodotto add-on che mostra una carta regalo con prezzo e interruttore di attivazione" width="400" data-path="images/upcart/custom-template-add-on-product-row-gift-card.png" />

`addonProduct`

* **Tipo**:

  ```
  {  
    product: {  
      id: number;  
      title: string;  
      description: string;  
    };  
    variant: {  
      id: number;  
      price: number;  
      compare_at_price: number | null;  
    };  
    image: {  
      src: string;  
      alt: string;  
    };  
  }
  ```

* **Descrizione**: informazioni complete sul prodotto add-on, inclusi dettagli del prodotto, prezzo della variante e dati dell'immagine

* **Utilizzo**: accedi a tutte le informazioni sul prodotto necessarie per mostrare i prodotti add-on

* **Struttura**: contiene oggetti annidati product, variant e image con dati completi sul prodotto

  * **Proprietà dell'oggetto Product** `addonProduct.product`

    * **id**: identificatore numerico univoco del prodotto
    * **title**: nome visualizzato del prodotto add-on
    * **description**: contenuto HTML della descrizione del prodotto
  * **Proprietà dell'oggetto Variant**

    * **id**: identificatore numerico univoco della variante
    * **price**: prezzo attuale in centesimi
    * **compare\_at\_price**: prezzo originale in centesimi (null se non c'è prezzo di confronto)
  * **Proprietà dell'oggetto Image**

    * **src**: URL dell'immagine del prodotto
    * **alt**: testo alternativo dell'immagine (per l'accessibilità)

`toggle`

* **Tipo**:

  ```
  {  
    state: 'enabled' | 'disabled' | 'loading';  
    handleEnable: () => void;  
    handleDisable: () => void;  
  } | null
  ```

* **Descrizione**: stato del controllo di attivazione e handler per abilitare/disabilitare l'add-on

* **Utilizzo**: implementa la funzionalità interattiva dell'interruttore per la selezione dell'add-on

* **Stati**: tre stati possibili - enabled, disabled e loading

* **Handler**: funzioni separate per le azioni di abilitazione e disabilitazione

`moneyFormat`

* **Tipo**: `string`

* **Descrizione**: la stringa di formato valuta usata per la formattazione dei prezzi

* **Utilizzo**: passala alla funzione formatMoney per una visualizzazione coerente della valuta

`formatMoney`

* **Tipo**:

  ```
  (options: {  
    cents: string | number;  
    format?: string;  
    shouldRemoveHTML?: boolean;  
  }) => string
  ```

* **Descrizione**: funzione di utilità per formattare i valori di valuta

* **Utilizzo**: formatta i prezzi in modo coerente con le impostazioni di valuta del negozio

* **Parametri**: accetta il valore in centesimi, una stringa di formato opzionale e un'opzione per la rimozione dell'HTML

<div id="discount-codes">
  ## Discount Codes
</div>

Il modulo Discount Code ti consente di personalizzare la funzionalità di inserimento dei codici sconto con il tuo design mantenendo le capacità e-commerce essenziali come la validazione del codice, l'invio del modulo e il feedback all'utente.

<div id="available-props-full-template-7">
  ### **Prop disponibili - Template completo**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-discount-code-input-field.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=9e8eb5e08805c18b26a3338707a9909a" alt="Campo di inserimento del codice sconto con un pulsante Apply" width="400" data-path="images/upcart/custom-template-discount-code-input-field.png" />

`indicator`

* **Tipo**: `'validating' | 'invalid' | 'none'`

* **Descrizione**: stato di validazione attuale dell'input del codice sconto

* **Utilizzo**: mostra il feedback UI appropriato in base allo stato di validazione

* **Stati**:

  * `validating`: il codice è in fase di elaborazione/validazione
  * `invalid`: la validazione del codice è fallita
  * `none`: nessuno stato di validazione (predefinito/inattivo)

`discountCodeInput`

* **Tipo**: `string`

* **Descrizione**: valore attuale del campo di input del codice sconto

* **Utilizzo**: mostra e gestisci il testo del codice sconto inserito dall'utente

```
<input  
  type="text"  
  value={props.discountCodeInput}  
  onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
  ...  
/>
```

`discountCodePlaceholder`

* **Tipo**: `string`

* **Descrizione**: testo segnaposto per il campo di input del codice sconto

* **Utilizzo**: fornisci indicazioni agli utenti su cosa inserire nel campo

`discountCodeButtonText`

* **Tipo**: `string`

* **Descrizione**: testo da mostrare sul pulsante di applicazione/invio

* **Utilizzo**: personalizza il testo del pulsante per l'invio del codice sconto

`setDiscountCodeInput`

* **Tipo**: `(value: string | ((prev: string) => string)) => void`

* **Descrizione**: funzione per aggiornare il valore dell'input del codice sconto

* **Utilizzo**: gestisci le modifiche dell'input dell'utente nel campo del codice sconto

`handleSubmit`

* **Tipo**: `(e: React.FormEvent<HTMLFormElement>) => void`

* **Descrizione**: funzione per gestire l'invio del modulo per l'applicazione del codice sconto

* **Utilizzo**: elabora la validazione e l'applicazione del codice sconto

* **Evento**: gestisce gli eventi di invio del modulo

```
<form onSubmit={props.handleSubmit} >  
  <div className="input-group">  
    <input  
      type="text"  
      value={props.discountCodeInput}  
      onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
      placeholder={props.discountCodePlaceholder}  
    />   
    <button   
      type="submit"  
      disabled={props.indicator === 'validating' || !props.discountCodeInput.trim()}  
    >  
      {props.discountCodeButtonText}  
    </button>  
  </div>  
</form>
```

<div id="cart-summary">
  ## Cart Summary
</div>

Il modulo Cart Summary ti consente di personalizzare la visualizzazione del riepilogo del carrello e degli sconti con il tuo design mantenendo le funzionalità e-commerce essenziali come la gestione degli sconti, il calcolo del risparmio e la trasparenza dei prezzi.

<div id="available-props-full-template-8">
  ### **Prop disponibili - Template completo**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-summary-discount-row.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=492e00824117bf0b93bf0c3a1402050f" alt="Riga di sconto del riepilogo del carrello che mostra un codice sconto applicato e l'importo" width="400" data-path="images/upcart/custom-template-cart-summary-discount-row.png" />

`totalSavingsText`

* **Tipo**: `string`

* **Descrizione**: etichetta di testo per la sezione del risparmio totale

* **Utilizzo**: mostra l'etichetta del risparmio nelle implementazioni personalizzate del riepilogo del carrello

`discountApplications`

* **Tipo**:

  ```
  {  
    key: string;  
    title: string;  
    type: 'discount_code' | '';  
  }[]
  ```

* **Descrizione**: array dei codici sconto applicati e degli sconti automatici

* **Utilizzo**: mostra tutti gli sconti attivi con i loro titoli e tipi

* **Struttura**: ogni sconto contiene una chiave univoca, un titolo di visualizzazione e un identificatore di tipo

`cartTotalDiscount`

* **Tipo**: `number`

* **Descrizione**: l'importo totale dello sconto in centesimi

* **Utilizzo**: accedi al valore grezzo dello sconto per calcoli o formattazione personalizzata

`showCartTotalDiscount`

* **Tipo**: `boolean`

* **Descrizione**: indica se lo sconto totale deve essere mostrato. Contrassegnata come deprecata a favore di `showTotalSavings`, ma vedi la nota qui sotto — all'interno di un template personalizzato è ancora questa la prop a tua disposizione.

* **Utilizzo**: renderizza in modo condizionale le informazioni sullo sconto in base alle impostazioni

`formattedCartTotalDiscount`

* **Tipo**: `string`

* **Descrizione**: stringa HTML pre-formattata dell'importo totale dello sconto. Contrassegnata come deprecata a favore di `formattedTotalSavings`, ma vedi la nota qui sotto.

* **Utilizzo**: mostra l'importo dello sconto correttamente formattato con i simboli di valuta

<Warning>
  **`showTotalSavings` e `formattedTotalSavings` non sono disponibili all'interno di un template personalizzato.** Esistono nel contesto interno del modulo, ma al template Cart summary vengono passate solo `showCartTotalDiscount` e `formattedCartTotalDiscount` — leggere la coppia più recente restituisce `undefined`. Usa le due indicate sopra e tieni presente che mostrano solo il totale degli sconti; non seguono l'impostazione **Show compare-at price savings in footer total**.
</Warning>

`isRemovingDiscount`

* **Tipo**: `boolean`

* **Descrizione**: indica se è in corso un'operazione di rimozione di uno sconto

* **Utilizzo**: mostra stati di caricamento durante la rimozione degli sconti

`handleRemoveDiscount`

* **Tipo**: `() => Promise<void>`

* **Descrizione**: funzione per gestire la rimozione del codice sconto

* **Utilizzo**: rimuovi i codici sconto applicati dal carrello

`totalCompareAtPrice`

* **Tipo**: `number`

* **Descrizione**: somma dei prezzi confrontati totali (tutti gli articoli nel carrello)

* **Utilizzo**: calcola e mostra il risparmio o le informazioni sui prezzi originali

`totalAfterAllDiscounts`

* **Tipo**: `number`

* **Descrizione**: totale finale del carrello in centesimi dopo l'applicazione di tutti gli sconti

* **Utilizzo**: mostra il prezzo finale che i clienti pagheranno

`originalTotalPrice`

* **Tipo**: `number`

* **Descrizione**: totale originale del carrello in centesimi prima di qualsiasi sconto

* **Utilizzo**: mostra il prezzo originale per trasparenza e per il calcolo del risparmio

`cartItemCount`

* **Tipo**: `number`

* **Descrizione**: numero totale di articoli nel carrello

* **Utilizzo**: mostra le informazioni sul conteggio degli articoli nei riepiloghi del carrello

<div id="trust-badges">
  ## Trust Badges
</div>

Il modulo Trust Badges ti consente di personalizzare la visualizzazione dei badge di fiducia con il tuo design mantenendo le funzionalità essenziali per costruire fiducia, come la visibilità condizionale dei badge e la corretta gestione delle immagini.

<div id="available-props-full-template-9">
  ### **Prop disponibili - Template completo**
</div>

`showBadge`

* **Tipo**: `boolean`

* **Descrizione**: indica se il badge di fiducia deve essere mostrato

* **Utilizzo**: controlla la visibilità dei badge di fiducia in base alle impostazioni del modulo

`badgeUrl`

* **Tipo**: `string`

* **Descrizione**: l'URL dell'immagine del badge di fiducia da mostrare

* **Utilizzo**: URL sorgente per l'immagine del badge di fiducia nelle implementazioni personalizzate