Ocultar e renomear linhas do carrinho

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.

Ocultar uma linha

// Hide free lines from the drawer. The cart total is unchanged.
window.aftersell.cart.hooks.registerLineTransform((line) => {
  if (line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});

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.

Coisas comuns que valem a pena ocultar:

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);
  }
});

Renomear uma linha

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 ler. Nunca persistidas na Shopify.

Controlar a ordem

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

// Subscriptions first, then everything else.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineB.sellingPlan ? 1 : 0) - (lineA.sellingPlan ? 1 : 0);
});

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

Ocultar um bloco inteiro, não uma linha

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. 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 por uma classe pública cart-external-*:

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' : '';
});

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.

Coisas para acertar

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 para mudanças reais.
Um transform que lança um erro é ignorado silenciosamente. Os demais ainda executam. Verifique aftersellCartDebugEvents durante o desenvolvimento.
registerLineTransform retorna uma função de desregistro, caso você precise desfazê-lo depois.

Para onde ir a seguir

Hooks: a referência completa de hooks.
Cart object: todo campo pelo qual você pode ramificar.
Custom CSS: a convenção de classes cart-external-*.

Primeiros passos

Página inicial

Melhores práticas

Upsells pós-compra

Carrinho Aftersell

Upsells no checkout (Shopify Plus)

Página de agradecimento

Upsells na página de produto

Rokt Thanks

Estratégias

Análises e rastreamento

Integrações

Aftersell MCP

Faturamento e conta

Solução de problemas

Ocultar uma linha

Renomear uma linha

Controlar a ordem

Ocultar um bloco inteiro, não uma linha

Coisas para acertar

Para onde ir a seguir

​Ocultar uma linha

​Renomear uma linha

​Controlar a ordem

​Ocultar um bloco inteiro, não uma linha

​Coisas para acertar

​Para onde ir a seguir

Ocultar uma linha

Renomear uma linha

Controlar a ordem

Ocultar um bloco inteiro, não uma linha

Coisas para acertar

Para onde ir a seguir