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

# Evita compras de solo upsells en el carrito

> Exige que los clientes agreguen al menos un producto regular antes de pagar.

<div id="overview">
  # **Descripción general**
</div>

Esta personalización usa HTML, CSS y JavaScript para bloquear el pago cuando el carrito solo contiene artículos de upsell. Ayuda a garantizar que los upsells se traten como ofertas secundarias, no como compras independientes, lo que respalda una estrategia de upsell más controlada e intencional.

Esto asegura que los productos de upsell funcionen dentro de límites específicos, enfatizando su papel como artículos complementarios de los productos principales.

Cuando se implementa, el **botón de pago quedará deshabilitado** hasta que se agregue al carrito al menos un producto que no sea upsell.

<div id="how-it-works">
  ## Cómo funciona
</div>

* Si el carrito contiene solo artículos de upsell, el botón de pago se muestra atenuado
* Aparece un mensaje de advertencia debajo del botón
* Una vez que se agrega un producto regular, el botón se activa y la advertencia desaparece. Proporciona una validación clara para escenarios que garantizan que los productos de upsell solo se compren con sus productos activadores asociados, como mostrar mensajes de advertencia específicos.

Esta configuración es ideal para dueños de tiendas o desarrolladores con conocimientos básicos de JavaScript y CSS.

<div id="step-1-add-custom-html">
  ## Paso 1: Agrega HTML personalizado
</div>

Ve a:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## En la sección **Above announcements/rewards**, pega:
</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 sobre la API antigua:** Los callbacks `window.upcartOnCartLoaded` siguen funcionando, pero están obsoletos y registran advertencias en la consola. Usa `upcartSubscribeCartLoaded` para todos los scripts nuevos.
</Note>

<div id="in-the-below-checkout-button-section-paste">
  ## En la sección **Below checkout button**, pega:
</div>

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

Siéntete libre de ajustar el texto del mensaje de advertencia para que se adapte al tono de tu marca.

<div id="step-2-add-custom-css">
  ## Paso 2: Agrega CSS personalizado
</div>

Ve a:\
**Upcart > Cart Editor > Settings > Custom CSS**

Pega el siguiente código:

```
.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;  
}
```

Esto da estilo al mensaje de advertencia y deshabilita el botón de pago visual y funcionalmente.

<div id="final-result">
  ## Resultado final
</div>

Una vez configurado:

* El pago queda bloqueado a menos que haya al menos un producto que no sea upsell en el carrito
* Un mensaje informa a los clientes por qué el pago está deshabilitado
* La experiencia se siente fluida y alineada con la marca

Esto es especialmente útil para: combinar estrategias de upsell efectivas con estas técnicas también mejora la experiencia de compra general del cliente al eliminar conflictos innecesarios en el proceso de compra.

* Evitar compras accidentales de un solo artículo de upsell
* Mantener los upsells como productos exclusivamente complementarios
* Garantizar un mejor control sobre el AOV y los paquetes de productos

<div id="still-need-help">
  ## ¿Aún necesitas ayuda?
</div>

Si necesitas ayuda con las personalizaciones, te recomendamos consultar con un Shopify Expert sobre cómo agregar HTML, CSS e incluso JavaScript a tu carrito deslizante.

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