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

# Impedire acquisti di soli upsell nel carrello

> Richiedi ai clienti di aggiungere almeno un prodotto normale prima di procedere al checkout.

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

Questa personalizzazione usa HTML, CSS e JavaScript per bloccare il checkout quando il carrello contiene solo articoli upsell. Aiuta a garantire che gli upsell siano trattati come offerte secondarie, non come acquisti autonomi, supportando una strategia di upsell più controllata e intenzionale.

Questo garantisce che i prodotti upsell funzionino entro confini specifici, sottolineando il loro ruolo di articoli complementari ai prodotti principali.

Una volta implementata, il **pulsante di checkout sarà disabilitato** finché almeno un prodotto non-upsell non viene aggiunto al carrello.

<div id="how-it-works">
  ## Come funziona
</div>

* Se il carrello contiene solo articoli upsell, il pulsante di checkout appare in grigio
* Un messaggio di avviso appare sotto il pulsante
* Una volta aggiunto un prodotto normale, il pulsante diventa attivo e l'avviso scompare - Fornisce una validazione chiara per gli scenari in cui i prodotti upsell devono essere acquistati solo con i prodotti trigger associati, come la visualizzazione di messaggi di avviso mirati.

Questa configurazione è ideale per proprietari di negozi o sviluppatori con conoscenze di base di JavaScript e CSS.

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

Vai su:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## Nella sezione **Above announcements/rewards**, incolla:
</div>

```
<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</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="in-the-below-checkout-button-section-paste">
  ## Nella sezione **Below checkout button**, incolla:
</div>

```
<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>
```

Sentiti libero di modificare il testo del messaggio di avviso per adattarlo al tono del tuo brand.

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

Vai su:\
**Upcart > Cart Editor > Settings > Custom CSS**

Incolla il codice seguente:

```
.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}
```

Questo applica uno stile al messaggio di avviso e disabilita il pulsante di checkout sia visivamente sia funzionalmente.

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

Una volta configurato:

* Il checkout è bloccato a meno che nel carrello ci sia almeno un prodotto non-upsell
* Un messaggio informa i clienti del perché il checkout è disabilitato
* L'esperienza risulta fluida e in linea con il brand

Questo è particolarmente utile per: abbinare strategie di upsell efficaci a queste tecniche migliora anche l'esperienza di acquisto complessiva del cliente eliminando conflitti inutili nel processo di acquisto.

* Prevenire acquisti accidentali di un singolo articolo upsell
* Mantenere gli upsell come prodotti solo aggiuntivi
* Garantire un migliore controllo sull'AOV e sul bundling dei prodotti

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

Se ti serve assistenza con le personalizzazioni, ti consigliamo di consultare uno Shopify Expert per aggiungere HTML, CSS e persino JavaScript al tuo cart drawer.

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