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

# Ocultar elementos específicos do carrinho usando IDs de produto

> Use IDs de produto para ocultar condicionalmente a barra de recompensas ou outros elementos do carrinho com base no que está no carrinho.

⚠️ **Aviso importante**

Esta personalização funciona apenas com a Versão 1 dos módulos de carrinho do Upcart. Se você atualizou recentemente seu carrinho para a Versão 2, essas personalizações podem não funcionar. Você precisará usar os novos seletores fornecidos para a Versão 2 no [guia de migração.](/pt/upcart/upcart_v20_migration_guide)

Se suas personalizações não estiverem funcionando como esperado, você mesmo pode reverter o carrinho para a Versão 1: no Cart Editor, use o menu suspenso **Cart version** no topo do menu à esquerda e escolha **V1.0 (Legacy)**. O menu suspenso aparece quando todos os módulos do carrinho estão na V2.

No momento, estamos trabalhando em novos modelos de personalização para a Versão 2 dos módulos, e eles estarão disponíveis em breve.

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

Esta personalização permite ocultar partes específicas do carrinho, como a barra de recompensas, se determinados produtos estiverem presentes. É útil quando você quer simplificar a experiência do carrinho para certos SKUs ou impedir que promoções específicas apareçam junto de determinados itens.

Essa configuração usa IDs de produto para detectar quais produtos estão no carrinho e oculta um elemento escolhido se houver uma correspondência. Você aplicará a lógica usando HTML e CSS personalizados no editor do Upcart.

***

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

* Ocultar a barra de recompensas quando itens promocionais estiverem no carrinho
* Ocultar blocos de conteúdo personalizado, selos de confiança ou seções de upsell com base no tipo de produto
* Manter um fluxo de checkout mais limpo ou mais adaptado para itens específicos

Essa abordagem requer conhecimentos básicos de HTML e JavaScript.

***

<div id="step-1-find-the-product-ids">
  ## Passo 1: Encontre os IDs de produto
</div>

1. Vá para **Shopify Admin > Products**
2. Clique no produto que você quer selecionar
3. Copie o ID numérico do produto na URL após `/products/`

**Exemplo:**

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

Você usará esses IDs no array de JavaScript que controla a visibilidade.

***

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

1. Vá para **Upcart > Cart Editor > Settings > Custom HTML**
2. Cole o código a seguir em **ambos** os locais de HTML: **Above announcements/rewards** e **On empty cart screen**
3. Substitua os valores em `productIDsToExclude` pelos seus IDs de produto
4. Atualize `.YOUR-CLASS-HERE` para selecionar o elemento do carrinho que você quer ocultar (por exemplo: `.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 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="step-3-optional-fallback-css">
  ## Passo 3: CSS de fallback opcional
</div>

Se você quiser garantir que o elemento fique oculto antes de o carrinho carregar totalmente, adicione isto na seção **Custom CSS**:

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

**Nota:** isso pode ocultar temporariamente o elemento para todos os usuários até o JavaScript ser executado, o que pode causar um efeito de piscada. Na maioria dos casos, é melhor confiar no método de JavaScript.

***

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

Depois de configurado:

* O elemento do carrinho selecionado (como a barra de recompensas) ficará oculto se o carrinho contiver um dos produtos especificados
* Caso contrário, o elemento permanece visível
* Você pode reutilizar essa lógica para ocultar ou mostrar diferentes elementos com base em regras específicas por produto

***

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

Para personalizações mais complexas, recomendamos trabalhar com um **Shopify Expert**. Ele pode ajudar com HTML, CSS e JavaScript dentro do seu cart drawer.

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