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

# Nascondere elementi specifici del carrello usando gli ID prodotto

> Usa gli ID prodotto per nascondere in modo condizionale la barra dei premi o altri elementi del carrello in base a ciò che c'è nel carrello.

⚠️ **Avviso importante**

Questa personalizzazione funziona solo con la Versione 1 dei moduli del carrello di Upcart. Se hai aggiornato di recente il tuo carrello alla Versione 2, queste personalizzazioni potrebbero non funzionare. Dovrai usare i nuovi selettori forniti per la Versione 2 nella [guida alla migrazione.](/it/upcart/upcart_v20_migration_guide)

Se le tue personalizzazioni non funzionano come previsto, puoi riportare tu stesso il carrello alla Versione 1: nel Cart Editor, usa il menu a tendina **Cart version** in cima al menu di sinistra e scegli **V1.0 (Legacy)**. Il menu a tendina appare quando tutti i moduli del carrello sono sulla V2.

Attualmente stiamo lavorando a nuovi template di personalizzazione per la Versione 2 dei moduli, che saranno disponibili a breve.

<div id="overview">
  # Panoramica
</div>

Questa personalizzazione ti permette di nascondere parti specifiche del carrello, come la barra dei premi, se sono presenti determinati prodotti. È utile quando vuoi semplificare l'esperienza del carrello per certi SKU o impedire che promozioni specifiche appaiano insieme a determinati articoli.

Questa configurazione usa gli ID prodotto per rilevare quali prodotti sono nel carrello e nasconde un elemento scelto se viene trovata una corrispondenza. Applicherai la logica usando HTML e CSS personalizzati nell'editor di Upcart.

***

<div id="when-to-use-this">
  ## Quando usarla
</div>

* Nascondere la barra dei premi quando nel carrello ci sono articoli promozionali
* Nascondere blocchi di contenuto personalizzato, badge di fiducia o sezioni di upsell in base al tipo di prodotto
* Mantenere un flusso di checkout più pulito o più su misura per articoli specifici

Questo approccio richiede conoscenze di base di HTML e JavaScript.

***

<div id="step-1-find-the-product-ids">
  ## Passaggio 1: Trova gli ID prodotto
</div>

1. Vai su **Shopify Admin > Products**
2. Clicca sul prodotto che vuoi targettizzare
3. Copia l'ID prodotto numerico dall'URL dopo `/products/`

**Esempio:**

```
/products/1234567890 → 1234567890
```

Userai questi ID nell'array JavaScript che controlla la visibilità.

***

<div id="step-2-add-custom-html">
  ## Passaggio 2: Aggiungi HTML personalizzato
</div>

1. Vai su **Upcart > Cart Editor > Settings > Custom HTML**
2. Incolla il codice seguente in **entrambe** le posizioni HTML **Above announcements/rewards** e **On empty cart screen**
3. Sostituisci i valori in `productIDsToExclude` con i tuoi ID prodotto
4. Aggiorna `.YOUR-CLASS-HERE` per targettizzare l'elemento del carrello che vuoi nascondere (per esempio: `.upcart-rewards`, `.custom-message`, `.trust-badge`)

```
<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>
```

<Note>
  **Nota legacy:** i callback `window.upcartOnCartLoaded` funzionano ancora ma sono deprecati e generano avvisi nella console. Usa `upcartSubscribeCartLoaded` per tutti i nuovi script.
</Note>

***

<div id="step-3-optional-fallback-css">
  ## Passaggio 3: CSS di fallback opzionale
</div>

Se vuoi assicurarti che l'elemento sia nascosto prima che il carrello si carichi completamente, aggiungi questo nella sezione **Custom CSS**:

```
.YOUR-CLASS-HERE {   display: none; }
```

**Nota:** questo potrebbe nascondere temporaneamente l'elemento per tutti gli utenti finché il JavaScript non viene eseguito, causando possibili sfarfallii. Nella maggior parte dei casi, è meglio affidarsi al metodo JavaScript.

***

<div id="final-result">
  ## Risultato finale
</div>

Una volta configurato:

* L'elemento del carrello targettizzato (come la barra dei premi) verrà nascosto se il carrello contiene uno dei prodotti specificati
* L'elemento resta visibile negli altri casi
* Puoi riutilizzare questa logica per nascondere o mostrare elementi diversi in base a regole specifiche per prodotto

***

<div id="still-need-help">
  ## Hai ancora bisogno di aiuto?
</div>

Per personalizzazioni più complesse, ti consigliamo di lavorare con un **Shopify Expert**. Può aiutarti con HTML, CSS e JavaScript all'interno del tuo cart drawer.

[Vedi gli Shopify Experts](https://www.shopify.com/partners/directory)