Blocos Custom code

O bloco Custom code adiciona seu próprio HTML ou React ao carrinho. Coloque-o em qualquer seção do drawer, ou aninhe-o dentro de Cart items como um sub-bloco para que ele se repita em cada linha. Diferente de outros blocos, ele não tem configurações de Content nem seção de Design: o bloco é o código, então você trabalha inteiramente na aba Code dele.

1. Adicione um bloco Custom code a qualquer seção, ou como sub-bloco sob Cart items.
2. Selecione-o e abra a aba Code.
3. Escolha HTML ou React component. Blocos novos vêm por padrão em HTML.
4. Escreva seu código.
5. Se você escolheu React, clique em Compile.
6. Ative “Use custom template”. Para este bloco, esse botão significa “mostrar meu código personalizado”, e ele vem desativado por padrão, então nada é renderizado até que você o ative.
7. Mantenha o botão de olho da barra lateral ativado para que o bloco permaneça visível aos compradores.

• O bloco não renderiza nada até o carrinho ter carregado.
• Ele também não renderiza nada quando o olho da barra lateral está desativado, “Use custom template” está desativado, o código está vazio, ou o React falha ao compilar ou renderizar. Como uma falha é silenciosa, verifique seu bloco na pré-visualização antes de publicar.

• Tags <script> inline não executam, e o modo HTML não tem acesso ao SDK nem a window.
• Para lógica, use o modo React ou Scripts personalizados com o Cart SDK.

<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>

• O editor trava o wrapper em function CustomCode(props: CustomCodeProps) { … }, e você edita apenas o corpo entre essas linhas.
• Você precisa clicar em Compile e depois ativar “Use custom template”, antes que o bloco apareça.
• Seu componente pode usar useState, useEffect, useMemo, useRef e useCallback.
• Diferente do modo HTML, o React roda no contexto da página, então pode chamar window e o Cart SDK quando estão disponíveis.
• Se o seu componente lançar erros em tempo de execução, o bloco não renderiza nada e o resto do carrinho continua funcionando.

• line só é definida em um sub-bloco de Cart items, onde seu componente é renderizado uma vez por linha. Colocado como seção, line é null e você lê cart.items em vez disso.
• Filhos de bundle não estão em cart.items. Quando as linhas são agrupadas em um bundle, apenas a linha âncora aparece; seus filhos ficam em line.bundle.children.
• Linhas ocultadas por um line transform também não estão lá, embora ainda contem para cart.totalPrice.

function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}

function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}

function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}

function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

• Região: qualquer uma (topo, corpo ou parte inferior). Também disponível como sub-bloco de Cart items.
• Máximo: ilimitado.
• Estado: carrinho cheio e vazio (como bloco de seção). Como sub-bloco de Cart items, só é renderizado quando o carrinho tem linhas, uma instância por linha.
• Não é bloqueado, então você pode removê-lo ou ocultá-lo.
• Não há seção de Design por bloco. Estilize por meio da sua própria marcação, do CSS personalizado e das suas Configurações de design globais.