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

# Impedir compras apenas de upsell no carrinho

> Exija que os clientes adicionem pelo menos um produto regular antes de finalizar a compra.

<div id="overview">
  # **Visão geral**
</div>

Esta personalização usa HTML, CSS e JavaScript para bloquear o checkout quando o carrinho contém apenas itens de upsell. Ela ajuda a garantir que os upsells sejam tratados como ofertas secundárias, não como compras isoladas, apoiando uma estratégia de upsell mais controlada e intencional.

Isso garante que os produtos de upsell funcionem dentro de limites específicos, enfatizando seu papel como itens complementares aos produtos principais.

Quando implementado, o **botão de checkout ficará desativado** até que pelo menos um produto que não seja upsell seja adicionado ao carrinho.

<div id="how-it-works">
  ## Como funciona
</div>

* Se o carrinho contém apenas itens de upsell, o botão de checkout fica acinzentado
* Uma mensagem de aviso aparece abaixo do botão
* Quando um produto regular é adicionado, o botão fica ativo e o aviso desaparece- Fornece validação clara para cenários que garantem que produtos de upsell sejam comprados apenas com os produtos acionadores associados, como exibir mensagens de aviso direcionadas.

Esta configuração é ideal para lojistas ou desenvolvedores com conhecimentos básicos de JavaScript e CSS.

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

Vá para:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## Na seção **Above announcements/rewards**, cole:
</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 legado:** os callbacks `window.upcartOnCartLoaded` ainda funcionam, mas estão obsoletos e registram avisos no console. Use `upcartSubscribeCartLoaded` em todos os novos scripts.
</Note>

<div id="in-the-below-checkout-button-section-paste">
  ## Na seção **Below checkout button**, cole:
</div>

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

Fique à vontade para ajustar o texto da mensagem de aviso para se adequar ao tom da sua marca.

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

Vá para:\
**Upcart > Cart Editor > Settings > Custom CSS**

Cole o seguinte 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;  
}
```

Isso estiliza a mensagem de aviso e desativa o botão de checkout visual e funcionalmente.

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

Depois de configurado:

* O checkout fica bloqueado a menos que haja pelo menos um produto que não seja upsell no carrinho
* Uma mensagem informa aos clientes por que o checkout está desativado
* A experiência é fluida e alinhada com a marca

Isso é especialmente útil para: combinar estratégias de upsell eficazes com essas técnicas também melhora a experiência geral de compra do cliente ao eliminar conflitos desnecessários no processo de compra.

* Evitar compras acidentais de itens únicos de upsell
* Manter os upsells como produtos exclusivamente complementares
* Garantir melhor controle sobre o AOV e a montagem de kits de produtos

<div id="still-need-help">
  ## Ainda precisa de ajuda?
</div>

Se você precisar de ajuda com personalizações, recomendamos consultar um Shopify Expert sobre como adicionar HTML, CSS e até JavaScript ao seu cart drawer.

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