Cartazes Promocionais e Modelos HTML de Produto

No RuB, cartazes promocionais, cartazetes de gôndola e splashes de preço em folhas de dimensões gráficas (como A4 ou A5) são gerenciados e emitidos diretamente como Modelos de Etiqueta (ModeloEtiqueta).

Essa arquitetura unificada permite que a loja utilize a mesma esteira de precificação, atalhos de coletores móveis, regras de negócio e permissões de usuários tanto para pequenas etiquetas térmicas adesivas de gôndola (ZPL) quanto para grandes cartazes visuais de oferta em PDF/HTML.

1. Como Funciona o Cartaz como Modelo de Etiqueta

O RuB trata os arquivos .html ou .htm como modelos gráficos de etiqueta de produto. O ciclo de execução é transparente:

graph LR
    A[Template HTML em path.Etiqueta] --> B[Cadastro em ModeloEtiqueta]
    C[Operador seleciona Modelo no Coletor/Web] --> D[IntfEtiquetaPrintWriter]
    D --> E[Injeção de Variáveis do Produto]
    E --> F[RuBHtmlReport / JasperReports]
    F --> G[PDF Gerado / Impressora Gráfica]

Passo a Passo de Configuração:

  1. Criação do Template: Desenvolve-se o modelo em HTML5/CSS (com extensões Thymeleaf th:if, th:text) definindo as dimensões via @page (ex: size: A4 portrait; ou size: A5 portrait;).
  2. Armazenamento no Diretório: O arquivo (ex: cartaz_oferta_a4.html) é copiado para a pasta configurada em path.Etiqueta (PluginEtiqueta.DIRETORIO_DE_ETIQUETAS).
  3. Cadastro do Modelo no RuB: No cadastro de Modelos de Etiqueta (ModeloEtiqueta), cadastra-se um novo registro apontando o campo PATH_ETQ para o nome do arquivo HTML (ex: cartaz_oferta_a4.html).
  4. Emissão pelo Operador: Ao solicitar a impressão de etiquetas de produto pelo RuB Web ou pelo coletor móvel, o operador escolhe o modelo de cartaz desejado na lista suspensa de modelos.
  5. Renderização Vetorial: O RuB detecta a extensão .html, carrega os dados cadastrais, promocionais e de embalagem do produto no mapa Jasper/Thymeleaf (toJasperMap) e aciona o motor RuBHtmlReport para gerar o PDF vetorial.

2. Catálogo de Variáveis de Produto para Cartazes

Todas as variáveis de dados de produto e filiais são injetadas no contexto do template HTML via interpolação ${VARIAVEL}:

VariávelDescriçãoExemplo de Saída
${DESCPRODUTO}Descrição comercial ou cadeia do produto.SABÃO EM PÓ BRILHO TOTAL 1KG
${SKU} ou ${CODIGO}Código interno / SKU do produto no ERP.102030
${COD_PRECO}Código da tabela de preço aplicada.1
${PRECO}Preço de venda atual formatado com separador monetário.24,90
${PRECO_DE}Preço regular anterior (preenchido se o item estiver em promoção).29,90
${PRECO_PROMOCIONAL}Preço promocional vigente.24,90
${EMB_1O_VALUE}Preço unitário da 1ª menor embalagem de venda.24,90
${EMB_1O_DESC}Descrição da unidade da 1ª embalagem (ex: UN, KG, CX).UN
${EMB_1O_CODIGO_1}Código de barras principal (EAN-13 / DUN-14).7891000123456
${EMB_2O_VALUE}Preço por unidade na 2ª embalagem (atacado/volume).21,90
${EMB_2O_QTD}Quantidade de unidades que compõem a 2ª embalagem.6
${EMB_2O_TOTAL}Preço total da 2ª embalagem fechada.131,40
${EMB_2O_DESC}Descrição da 2ª embalagem (ex: CX, FARDO).CX
${FORNECEDOR_NOME}Razão social ou nome fantasia do fornecedor cadastrado.INDÚSTRIA QUÍMICA NACIONAL S.A.
${PROP_MARCA}Propriedade dinâmica extra (ex: Marca do produto).BRILHO TOTAL
${LOJA}Nome fantasia da filial emissora.HIPERMERCADO CENTRAL
${ID_LOJA}Identificador numérico da loja convertido para ERP.101
${DT_ATUAL}Data corrente da emissão no formato dd/MM/yyyy.24/08/2026
${DTH_ATUAL}Data e hora completas da emissão.24/08/2026 18:30:00

3. Exemplos de Modelos de Cartazes

Exemplo 1: Cartaz Promocional A4 Splash de Oferta (DE / POR)

Template ideal para ilhas promocionais, pontas de gôndola e vitrines:

Código HTML (cartaz_oferta_a4.html):

<!DOCTYPE html>
<html lang="pt-BR" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <style>
        @page {
            size: A4 portrait;
            margin: 15mm;
        }
        * {
            box-sizing: border-box;
            font-family: 'Arial Black', Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ffffff;
            color: #111111;
            text-align: center;
        }
        .container {
            border: 6px solid #cc0000;
            border-radius: 12px;
            padding: 20px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .badge-oferta {
            background-color: #cc0000;
            color: #ffffff;
            font-size: 28pt;
            font-weight: 900;
            padding: 10px 20px;
            border-radius: 8px;
            display: inline-block;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        .descricao-produto {
            font-size: 26pt;
            font-weight: bold;
            color: #222222;
            margin-top: 25px;
            line-height: 1.2;
            min-height: 70px;
        }
        .meta-produto {
            font-family: Arial, sans-serif;
            font-size: 13pt;
            color: #555555;
            margin-top: 10px;
        }
        .bloco-preco {
            margin-top: 30px;
            background: #fff8e7;
            border: 3px dashed #e6a100;
            border-radius: 10px;
            padding: 25px 15px;
        }
        .preco-de {
            font-size: 18pt;
            color: #777777;
            text-decoration: line-through;
            font-family: Arial, sans-serif;
        }
        .preco-por-container {
            display: flex;
            justify-content: center;
            align-items: baseline;
            margin-top: 10px;
            color: #cc0000;
        }
        .simbolo-cifrao {
            font-size: 40pt;
            margin-right: 5px;
        }
        .preco-principal {
            font-size: 90pt;
            font-weight: 900;
            line-height: 0.9;
        }
        .unidade-venda {
            font-size: 20pt;
            color: #333333;
            margin-left: 8px;
            font-family: Arial, sans-serif;
        }
        .rodape-cartaz {
            border-top: 2px solid #dddddd;
            padding-top: 15px;
            display: flex;
            justify-content: space-between;
            font-family: Arial, sans-serif;
            font-size: 11pt;
            color: #666666;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <div class="badge-oferta">OFERTA ESPECIAL</div>
            <div class="descricao-produto">${DESCPRODUTO}</div>
            <div class="meta-produto">Cód: ${SKU} | Cód. Barras: ${EMB_1O_CODIGO_1}</div>
        </div>

        <div class="bloco-preco">
            <div class="preco-de" th:if="${PRECO_DE != null and PRECO_DE != ''}">DE: R$ ${PRECO_DE}</div>
            <div class="preco-por-container">
                <span class="simbolo-cifrao">R$</span>
                <span class="preco-principal">${PRECO}</span>
                <span class="unidade-venda">/${EMB_1O_DESC}</span>
            </div>
        </div>

        <div class="rodape-cartaz">
            <div>Loja: ${LOJA} (ID: ${ID_LOJA})</div>
            <div>Oferta válida enquanto durarem os estoques | Emitido em: ${DT_ATUAL}</div>
        </div>
    </div>
</body>
</html>

Protótipo Visual ASCII (A4):

+-------------------------------------------------------------+
|                                                             |
|                   [ OFERTA ESPECIAL ]                       |
|                                                             |
|                SABÃO EM PÓ BRILHO TOTAL 1KG                 |
|            Cód: 102030  |  Cód. Barras: 7891000123456       |
|                                                             |
|    + - - - - - - - - - - - - - - - - - - - - - - - - - -+   |
|    |                                                    |   |
|    |                   DE: R$ 29,90                     |   |
|    |                                                    |   |
|    |                 POR: R$ 24,90 / UN                 |   |
|    |                                                    |   |
|    + - - - - - - - - - - - - - - - - - - - - - - - - - -+   |
|                                                             |
|  Loja: HIPERMERCADO CENTRAL (ID: 101)  |  Emitido: 24/08/2026|
+-------------------------------------------------------------+

Exemplo 2: Cartazete de Gôndola A5 com Preço de Atacarejo

Modelo A5 para sinalização de desconto progressivo por quantidade de compra (atacarejo):

Código HTML (cartaz_gondola_a5.html):

<!DOCTYPE html>
<html lang="pt-BR" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <style>
        @page {
            size: A5 portrait;
            margin: 10mm;
        }
        * {
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ffffff;
            color: #222222;
        }
        .header {
            background-color: #003366;
            color: #ffffff;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            font-size: 16pt;
            border-radius: 6px 6px 0 0;
        }
        .card {
            border: 2px solid #003366;
            border-radius: 6px;
            padding: 15px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .titulo {
            font-size: 18pt;
            font-weight: 900;
            text-align: center;
            margin-top: 10px;
        }
        .box-varejo {
            margin-top: 15px;
            text-align: center;
            border-bottom: 2px dashed #cccccc;
            padding-bottom: 15px;
        }
        .label-varejo {
            font-size: 12pt;
            color: #666666;
        }
        .preco-varejo {
            font-size: 36pt;
            font-weight: bold;
            color: #003366;
        }
        .box-atacado {
            margin-top: 15px;
            background-color: #e6f0fa;
            border: 2px solid #0055aa;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        .label-atacado {
            font-size: 13pt;
            font-weight: bold;
            color: #0055aa;
        }
        .preco-atacado {
            font-size: 42pt;
            font-weight: 900;
            color: #cc0000;
        }
        .detalhe-atacado {
            font-size: 11pt;
            color: #444444;
            margin-top: 4px;
        }
        .footer {
            font-size: 9pt;
            color: #777777;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="card">
        <div>
            <div class="header">PREÇO ESPECIAL DE GÔNDOLA</div>
            <div class="titulo">${DESCPRODUTO}</div>
        </div>

        <div class="box-varejo">
            <div class="label-varejo">PREÇO VAREJO (1 A ${EMB_2O_QTD} UNIDADES)</div>
            <div class="preco-varejo">R$ ${PRECO}</div>
        </div>

        <div class="box-atacado" th:if="${EMB_2O_VALUE != null and EMB_2O_VALUE != ''}">
            <div class="label-atacado">A PARTIR DE ${EMB_2O_QTD} UNIDADES (ATACADO)</div>
            <div class="preco-atacado">R$ ${EMB_2O_VALUE} <span style="font-size: 16pt;">/UN</span></div>
            <div class="detalhe-atacado">Caixa fechada com ${EMB_2O_QTD} unidades por R$ ${EMB_2O_TOTAL}</div>
        </div>

        <div class="footer">
            SKU: ${SKU} | EAN: ${EMB_1O_CODIGO_1} | ${LOJA} | ${DT_ATUAL}
        </div>
    </div>
</body>
</html>

Protótipo Visual ASCII (A5):

+-----------------------------------------------------+
|             PREÇO ESPECIAL DE GÔNDOLA               |
|                                                     |
|            BEBIDA ENERGÉTICA LATA 250ML             |
|                                                     |
|             PREÇO VAREJO (1 A 5 UNIDADES)           |
|                      R$ 8,99                        |
| - - - - - - - - - - - - - - - - - - - - - - - - - - |
|       A PARTIR DE 6 UNIDADES (ATACADO)              |
|                   R$ 6,99 /UN                       |
|        Caixa com 6 unidades por R$ 41,94            |
|                                                     |
| SKU: 554433 | EAN: 7890001112223 | LOJA 101 | 24/08 |
+-----------------------------------------------------+