Bloco Banner

O bloco Banner é uma faixa de mensagem exibida dentro do carrinho, útil para promoções, mensagens de frete ou apelos de urgência, como um aviso de frete grátis, um anúncio de promoção ou uma mensagem de “carrinho reservado”. Ele pode incluir um cronômetro regressivo ao vivo.

• A contagem regressiva só roda quando as três condições são atendidas: o cronômetro está ativado, o texto contém o token {{timer}} e a duração é maior que zero. Caso contrário, o banner é exibido como texto estático.
• O cronômetro faz a contagem regressiva em MM:SS e é lembrado para a aba do comprador (ele sobrevive à navegação dentro da sua loja durante a sessão), então não reinicia a cada página.
• Quando o cronômetro chega a 00:00, o banner inteiro desaparece, para que os compradores nunca vejam um relógio zerado.
• Na pré-visualização do editor, o cronômetro fica em loop e o banner nunca se esconde, para que você possa continuar estilizando-o.

• Região: qualquer uma (topo, corpo ou parte inferior).
• Máximo: 3 por estado do carrinho — o carrinho cheio e o carrinho vazio têm, cada um, sua própria cota.
• Estado: tanto carrinho cheio quanto vazio.
• Adicionado a novos carrinhos por padrão. Não é bloqueado, então você pode removê-lo ou ocultá-lo.

function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}