> ## 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 e renomear linhas do carrinho

> Um caso de uso do Cart SDK usando line transforms e comparators para ocultar linhas injetadas por apps, renomeá-las e controlar a ordem em que renderizam.

Oculte linhas que o comprador não deveria ver, renomeie linhas que soam mal e controle a ordem em que tudo renderiza, tudo sem tocar no que realmente está no carrinho.

Isso substitui o padrão antigo de ocultar elementos do carrinho com CSS ou `style.display = 'none'`. Um line transform é aplicado toda vez que o carrinho renderiza, então ele sobrevive a atualizações, re-renderizações e reaberturas do drawer.

<div id="hide-a-line">
  ## Ocultar uma linha
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Hide free lines from the drawer. The cart total is unchanged.
window.aftersell.cart.hooks.registerLineTransform((line) => {
  if (line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});
```

<Warning>
  **Ocultar não é remover.** Uma linha oculta permanece no carrinho do comprador, permanece no total e vai até o checkout; ela só não é desenhada no drawer. Ela some de `getCart().items` e de `itemCount`, então seu próprio código também deixa de vê-la. Se você quer que ela suma de verdade, use [`removeItem`](/pt/aftersell/cart/sdk-actions#removeitemkey).
</Warning>

Coisas comuns que valem a pena ocultar:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerLineTransform((line) => {
  // An app-injected line, tagged with a private property.
  if (line.properties?._bundle_child) {
    line.setHidden(true);
  }

  // A specific SKU that shouldn't be shopper-managed.
  if (line.variantId === HIDDEN_VARIANT_ID) {
    line.setHidden(true);
  }

  // Gift cards issued by a loyalty app.
  if (line.isGiftCard && line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});
```

<div id="relabel-a-line">
  ## Renomear uma linha
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerLineTransform((line) => {
  // Flag discounted lines.
  if (line.finalLinePrice < line.originalLinePrice) {
    line.setTitle(`${line.title} (On sale)`);
  }

  // Make the subscription cadence read naturally.
  if (line.sellingPlan) {
    line.setVariantTitle(`Delivered ${line.sellingPlan.name.toLowerCase()}`);
  }

  // Drop a meaningless variant label.
  if (line.variantTitle === 'Default Title') {
    line.setVariantTitle(null);
  }
});
```

Os quatro setters disponíveis em uma linha:

| Setter                            | Efeito                                                                                                                                        |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `setHidden(bool)`                 | Oculta a linha do drawer.                                                                                                                     |
| `setTitle(string)`                | Muda o título exibido.                                                                                                                        |
| `setVariantTitle(string \| null)` | Muda o rótulo de variante exibido. `null` o remove.                                                                                           |
| `setInternalProperties(obj)`      | Mescla propriedades só de renderização, para um [bloco Custom code](/pt/aftersell/cart/custom-code-blocks) ler. Nunca persistidas na Shopify. |

<div id="control-the-order">
  ## Controlar a ordem
</div>

Um comparator tem o mesmo formato que `Array.prototype.sort` espera e executa depois de ocultar e renomear:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Subscriptions first, then everything else.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineB.sellingPlan ? 1 : 0) - (lineA.sellingPlan ? 1 : 0);
});
```

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Push free gifts and add-ons to the bottom.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineA.finalLinePrice === 0 ? 1 : 0) - (lineB.finalLinePrice === 0 ? 1 : 0);
});
```

Retorne `0` para pares que não interessam. Os comparators se compõem como critérios de desempate, então o primeiro que retornar um valor diferente de zero decide aquele par, e retornar `0` passa a decisão para o próximo em vez de forçar uma ordem.

<div id="hide-a-whole-block-not-a-line">
  ## Ocultar um bloco inteiro, não uma linha
</div>

Um line transform atua sobre linhas do carrinho. Para mostrar configurações de **bloco** diferentes por país, mercado ou moeda (por exemplo, níveis de Rewards diferentes), use as [condições no editor do carrinho](/pt/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency). Nenhum código necessário, e sobrevive a redesigns do carrinho. Total do carrinho e conteúdo do carrinho **não** são tipos de condição do editor.

Recorra ao SDK quando sua regra é algo que as condições não conseguem expressar (IDs de produto no carrinho, um total personalizado, e assim por diante). Nesse caso, consulte o [shadow root](/pt/aftersell/cart/sdk-overview#shadowroot) por uma classe pública `cart-external-*`:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('cart_updated', (state) => {
  const root = window.aftersell.cart.shadowRoot;
  if (!root) return;

  const rewards = root.querySelector('.cart-external-rewards');
  if (!rewards) return;

  const hasExcluded = state.items.some((line) => EXCLUDED_PRODUCT_IDS.includes(line.productId));
  rewards.style.display = hasExcluded ? 'none' : '';
});
```

<Warning>
  Isso executa após cada renderização, então o bloco pode piscar na tela antes de seu código ocultá-lo. A renderização condicional não tem esse problema, então prefira-a sempre que couber.
</Warning>

<div id="things-to-get-right">
  ## Coisas para acertar
</div>

* **Transforms são chamadas de configuração.** Registre-os no topo do seu script de Initialization; sem necessidade de `ready()`.
* **Os transforms de todos executam.** O seu se compõe com quaisquer registrados por outros apps. Você não pode substituir os deles, e eles não podem descartar o seu.
* **Um transform não pode mudar preço, quantidade ou identidade.** Ele só muda o que renderiza. Use as [ações](/pt/aftersell/cart/sdk-actions) para mudanças reais.
* **Um transform que lança um erro é ignorado silenciosamente.** Os demais ainda executam. Verifique [`aftersellCartDebugEvents`](/pt/aftersell/cart/sdk-overview#debugging) durante o desenvolvimento.
* **`registerLineTransform` retorna uma função de desregistro**, caso você precise desfazê-lo depois.

<div id="where-to-go-next">
  ## Para onde ir a seguir
</div>

* **[Hooks](/pt/aftersell/cart/sdk-hooks)**: a referência completa de hooks.
* **[Cart object](/pt/aftersell/cart/sdk-cart-object)**: todo campo pelo qual você pode ramificar.
* **[Custom CSS](/pt/aftersell/cart/custom-css)**: a convenção de classes `cart-external-*`.