Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
<style>
  /* Início estilo banner */

  .compositiondani-banner {
    position: relative;
    min-height: 320px220px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
  }

  .compositiondani-banner-image {
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/bannertcapa-com-fundo-e-sem-icone-TDN21.png");
    background-size: cover;
    min-height: inherit;
    width: 100%;
  }

  .compositiondani-banner-overlay {
    min-height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    pointer-events: none;
  }

  .compositiondani-banner-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
  }

  .compositiondani-banner-logo {
    width: 400px350px;
    height: 150px180px;
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/logoslogo.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .compositiondani-banner-title {
    margin-bottom: 10px !important;
    padding: 10px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 14px12px !important;
    line-height: 1.3 !important;
    max-height: 133px !important;
    font-family: "Roboto", sans-serif !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    position: relative !important;
    margin-top: 190px130px !important;
    border-radius: 10px !important;
  }

  .compositiondani-banner-content {
    position: absolute;
    padding: 30px;
    max-width: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: white;
    text-align: center;
  }

  .custom-header h1 {
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
    margin: 0;
  }

  .negrito-materialize {
    font-weight: bold;
  }

  .custom-margin-justified {
    margin: 0 20px;
    text-align: justify;
  }
    /* Final estilo banner */

</style>

<header>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>

  <div class="compositiondani-banner">
    <div class="compositiondani-banner-image"></div>
 /* Final estilo banner */

      <div class="compositiondani-banner-overlay"></div>
    <div #content.page.view {
    padding-right: 0 !important;
}   /* impedir vermelho no nav */

#breadcrumb-section > nav {
    background-color: initial !important;
    box-shadow: none !important;
}

@media only screen and (min-width: 601px) {
    nav, 
    nav .nav-wrapper i, 
    nav a.sidenav-trigger, 
    nav a.sidenav-trigger i {
        height: auto !important;
        line-height: normal !important;
    }
}
/* final vermelho no nav */   </style>

<header>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>

  <div class="compositiondani-banner">
    <div class="compositiondani-banner-image"></div>
    <div class="compositiondani-banner-overlay"></div>
    <div class="compositiondani-banner-logo-container">
      <div class="compositiondani-banner-logo"></div>
    </div>
    <div class="compositiondani-banner-content">
      <h1 class="compositiondani-banner-title"> 
        CAMPANHA DE PRODUTOS<PRODUTOS
</h1>
    </div>header>
  </div>
</header>div>
HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Inclua o estilo do tema Monokai -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/>
  

  <style>
  /* ==============================
    =       CONFIGURAÇÕES GERAIS      =
    =============================== */

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

a {
  color: #42526e;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: white;
}

li {  font-size: 14px !important;
}

h3 {  font-size: 14px !important;
  font-weight: bold; bold;  

}

h1 {  font-size: 13px !important;
  

}

h2 {  font-size: 15px !important;
  font-weight: bold;  

}

td, th {
    padding: 9px4px;
}


/* ==============================
      =        ESTILOS DE TÍTULOS       =
      =============================== */

#title-text {
  display: none !important;
}

.wiki-content h1,
.wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
  font-size: 13px!important;
 
}

.wiki-content h1 {
  font-size: 16px13px !important;
}

.wiki-content h2 {
  font-size: 14px !important;
  color: #42526e !important;
  border-bottom: 2px solid #dfe1e5;
   padding-bottom: 5px;
  font-weight: bold;  
}

.custom-heading,
h3.custom-h3 {
  font-size: 16px;
  color: #42526e;
  margin-bottom: 20px;
}

.custom-h1 {
  color: #feac0e;
}

.explanation h2 {
  font-weight: bold;
}

/* ==============================
      =        ESTILOS DE TEXTO         =
      =============================== */

.wiki-content p {
  font-size: 14px !important;
}

.justificado,
.custom-justified {
  text-align: justify;
  margin: 10px 0;
}

/* ==============================
      =       ESTILOS DE LINKS         =
      =============================== */

.wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;
  color: #42526e;
  font-size: 14px;


}

.wiki-content a:hover {
  color: white;
}

/* ==============================
      =       ESTILOS DE CONTAINER     =
      =============================== */



.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* ==============================
      =       ESTILOS DE CARDS         =
      =============================== */

.card {
  border: 2px solid #9aa1ad;
  padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f4f5f7;
  color: #42526e;
  overflow-x: hidden;
   top: 0;
  
}



/* ==============================
      =       ESTILOS DE TABS          =
      =============================== */

.tabs {
  background-color: #dfe1e5;
}

.tabs .tab a {
  color: rgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #1094b8#6B48FF;
  background-color: transparent;
}

.tabs .tab a:focus {
  background-color: rgba(82, 20097, 232, 0.25);
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #1094b8#6B48FF;
}

.tab-content {
   gap: 0;
  padding: 10px;
}

.tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==============================
      =        ESTILOS DE ÍCONES        =
      =============================== */

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: none;
}

.icon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

.item .label i {
  margin-right: 10px;
}

/* ==============================
      =    ESTILOS DE COMPONENTES      =
      =============================== */

.collapsible,
.collapsible-header,
.collapsible-body {
  box-shadow: none !important;
}

.faq-question {
  font-weight: bold;
  margin-bottom: 5px;
}

.faq-answer {
  margin-bottom: 20px;
}

.custom-list {
  padding-left: 0;
  margin-left: 1.5em;
}

.custom-list li {
  position: relative;
  padding-left: 1em;
}

ul.custom-list {
  padding-left: 10px;
}

ul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

.item .label {
  flex: 1;
  font-weight: bold;
}

.item .value {
  flex: 1;
  text-align: right;
}
.item {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item:last-child {
  border-bottom: none;
}

/* Estilos para o label */
.label {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.item .label i {
  margin-right: 10px; /* Adiciona espaço depois dos ícones */
}

/* ==============================
      =     ESTILOS DE IMAGENS         =
      =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
      =     ESTILOS DE VÍDEO           =
      =============================== */

#youtube-video-container iframe {
  width: 100%;
  height: auto;
  display: block;
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
  }

.ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.custom-heading {
  font-size: 16px;
  color: #42526e;
  margin: 10px 0;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  font-weight: bold;  
}

#indice {
  border-radius: 5px;
  padding: 20px;
  max-width: 100%;
  overflow: hidden;
}

#indice h2 {
  text-align: center;
  margin-bottom: 16px;
}

#indice ul {
  list-style-type: none;
  padding-left: 0;
}

#indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#indice li:last-child {
  border-bottom: none;
}

#indice li:hover {
  background-color: #1094b8#6B48FF;
  color: white;
}

/* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
.custom-grey {
  background-color: #ffffff;
}

.custom-grey th,
.custom-grey td {
  border: 1px solid #42526e;
  padding: 10px;
}

.custom-grey th {
  color: #fff;
  background-color: #42526e;
}



.custom-grey td {
  font-size: 13px;
}

.custom-grey tr:nth-child(odd) {
  background-color: #e4e4e6;
}

.custom-grey tr:nth-child(even) {
  background-color: #dfdfdf;
}

/* ========== FIM DO ESTILO ========= */

  </style>
  

   
  <!-- Primeiro Card -->
  <div class="card">
    <div class="item">
      <span class="label">
 == FIM DO ESTILO ========= */

  </style>
  

   





  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
      <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
      <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
      <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>
     <!-- Tab Content -->
 
      <div <table borderid="tab1" class="1col s12">
          <tr><div class="tab-content">
          <div style="background-color: #f4f5f7; padding: <td><i class="fas fa-tags"></i> Produto:</td>
   10px; margin-left: 50px; margin-right: 50px;">
           <td>Automação da Força de Vendas</td><section id="section1" style="margin-top: 40px;">
          </tr>
     <!-- Tab 70 conteúdo  <tr>-->
  <!-- Segundo Card -->

    <!-- Primeiro Card -->
  <td><i class="fas fa-link"></i> Linha de Produto:</td><!-- Primeiro Card -->
  <div class="card">
    <div class="item">
      <td>TOTVS CRM</td><span class="label">
          </tr><table border="1">
          <tr>
              <td><i class="fas fa-chart-pietags"></i> SegmentoProduto:</td>
              <td>Automação da Força <td>Crossde Segmentos<Vendas</td>
          </tr>
          <tr>
              <td><i class="fas fa-desktoplink"></i> MóduloLinha de Produto:</td>
              <td>TOTVS <td>Venda<CRM</td>
          </tr>
          <tr>
              <td><i class="fas fa-chart-globepie"></i> AplicaçãoSegmento:</td>
              <td>Web/app<td>Cross móvel<Segmentos</td>
          </tr>
          <tr>
              <td><i class="fas fa-hashtagdesktop"></i> IdentificadorMódulo:</td>
              <td><td>Venda</td>
                </tr>
          <tr>
      15110592 / 15217638</td>
      <td><i    </tr>
      </table>class="fas fa-globe"></i> Aplicação:</td>
      </span>
    </div>
    </div>
HTML
 <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs"><td>Web/app móvel</td>
          </tr>
      <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li> <tr>
      <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
      <li<td><i class="tab col s4"><a href="#tab3">FAQ</a></li>
fas fa-hashtag"></i> Identificador:</td>
     </ul>
     <!-- Tab Content -->
 <td>
      <div id="tab1" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;"> 15110592 / 15217638</td>
          </tr>
   <section id="section1" style="margin-top: 40px;">
 </table>
      </span>
    </div>
    </div>
 

  <!-- Tab 70 conteúdo -->
<br>

       <!-- Segundo Card -->

       <h2 class="custom-heading">
        <i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL
      </h2>
      <p class="justificado">
        Com o recurso "Campanha de Produtos", também denominado "Mix de Produtos", o
        TOTVS CRM introduz uma estratégia comercial focada em resultados. O objetivo é
        promover a venda de um conjunto de produtos por um preço atrativo, incentivando
        os clientes a diversificarem e ampliarem suas compras em uma única transação.
        Esta ferramenta não só eleva o potencial de receita por venda, mas também
        proporciona uma experiência de compra mais enriquecedora e atrativa para o
        cliente.
        

        
      </p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado">
      Melhorar a eficácia das promoções, estimular compras estratégicas, aumentar o
      valor médio do pedido e fornecer aos clientes uma experiência mais personalizada
      e valiosa.
    </p>
    <br>

  <!-- ... (seu conteúdo existente) ... -->

               <h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMEÇAR
            </h2>
            <h3>Requisitos</h3>
            <p>Para utilizar o recurso, certifique-se de estar usando a versão padrão da solução.</p>
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES FUNCIONAIS</h2>
            <h3>Funções </h3>
        
            <ol>
                <li>Criação de campanhas de desconto ou combos de vendas.</li>
                <li>Definição de critérios específicos por produto para descontos.</li>
                <li>Configuração detalhada de cada campanha, incluindo datas de vigência e situação (ativa/inativa).</li>
                <li>Vinculação de campanhas a variados elementos: usuários, grupos de usuários, segmentos de mercado, filiais, parceiros e outros.</li>
                <li>Flexibilidade na aplicação das campanhas, direcionando-as para públicos distintos.</li>
            </ol>
            
          </section>
         
      
          <section id="section3" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>
            <h3> Passo a Passo</h3>

            <ol>
              <li>Acesse <b>Módulo de Cadastro</b> no painel principal.</li>
              <li>Selecione a opção <b>Venda</b>.</li>
              <li>Clique em <b>Campanha de Desconto</b>.</li>
              <li>Para criar uma nova campanha, clique em <b>+ Adicionar</b></li>
          </ol> <br>

        <img src="https://totvscrm.com/wp-content/uploads/2023/08/GIF001-1.gif" alt="Minha Imagem" class="imagem-responsiva">

          <h3>  Adicionando uma Campanha de Desconto</h3>
          <ol>
           <li>Uma nova linha de registro será habilitada. No campo <b>"Descrição"</b>, insira um nome ou título descritivo para sua campanha. Esta descrição ajudará a identificar a campanha no futuro.</li>
            <li>Após preencher o campo de descrição, clique no botão <b>'Gravar'</b> ou o equivalente para registrar essa entrada.</li>
            <li>Ao lado da linha da campanha recém-adicionada, clique no ícone de <b>lápis</b> para editar.</li>
            
                    </ol>
                    <br>
                  <img src="https://totvscrm.com/wp-content/uploads/2023/08/CAMPA002.gif" alt="Minha Imagem" class="imagem-responsiva">
                    
                  
                    <h3>  Aba Configuração</h3>

                    <ol>
                      <li><b>Descrição:</b> Reajuste a descrição da campanha se necessário.</li>
                      <li><b>Consome Flex? (idnconsomeflex):</b> Selecione o botão de opção correspondente à sua opção, seja 'Sim' ou 'Não.</li>
                      <li><b>Credita Flex? (idnacrescimoflex):</b> Similar ao campo anterior, selecione 'Sim' ou 'Não'.</li>
                      <li><b>Data de início da vigência:</b> Use o seletor de data ou insira a data de início manualmente.</li>
                      <li><b>Data de fim da vigência:</b> De forma semelhante, estipule a data de encerramento da vigência da campanha.</li>
                      <li><b>Situação:</b> No campo "Situação", defina o estado da campanha - pode ser 'Ativa', 'Inativa'.</li>
                  </ol>
                  <br>
                  <div><img src="https://totvscrm.com/wp-content/uploads/2023/08/GIF003.gif" alt="Minha Imagem" class="imagem-responsiva">

                  <h3> Aba Produto</h3>     
                  <p>Na aba <b>Produto</b>, você poderá definir quais itens farão parte de sua campanha de desconto ou combo de vendas. Cada produto pode ter critérios específicos que influenciarão no desconto aplicado. Siga o guia abaixo:</p>
                  <ol>
                      <li>Clique em <b>pesquisar</b> para visualizar a lista de produtos disponíveis.</li>
                      <li>Selecione os produtos que deseja integrar à campanha.</li>
                      <li>Utilize a seta direcional para adicionar os produtos selecionados à lista da campanha.</li>
                      <li>Para cada produto adicionado, defina os critérios de desconto:</li>
                          <ul class="browser-default">
                              <li><b>Quantidade mínima:</b> Especifique a quantidade mínima para a aplicação do desconto.</li>
                              <li><b>Faixa de quantidade mínima e máxima:</b> Defina uma faixa de quantidade dentro da qual o desconto será aplicado.</li>
                              <li><b>Desconto editável? (IdndescontoEditavel):</b> Determine se, após a aplicação da campanha no pedido, o desconto no item poderá ser modificado ou não.</li>
                              <li><b>Embalagem:</b> Se estiver utilizando vendas por embalagem, marque esta opção. Somente campanhas que utilizam embalagem serão exibidas.</li>
                              <li><b>Percentual de desconto:</b> Informe o percentual de desconto que será aplicado ao item.</li>
                          </ul>
                      <li>Após inserir todas as informações necessárias, clique em <b>gravar</b> para salvar os detalhes da campanha.</li>
                  </ol> <br>
                  <img src="https://totvscrm.com/wp-content/uploads/2023/08/CAMPA002.gif" alt="Minha Imagem" class="imagem-responsiva">
                
                  
                  <h3> Aba Vínculo</h3> 
        <ol>
            <li>Na tela de vínculos, você encontrará campos para vincular a campanha com diferentes categorias:</li>
                <ul class="browser-default">
                    <li><b>Usuário:</b> Especifique os usuários que podem acessar a campanha.</li>
                    <li><b>Grupo de usuário:</b> Delimite grupos de usuários que terão permissão para a campanha.</li>
                    <li><b>Segmento:</b> Determine os segmentos de mercado relacionados à campanha.</li>
                    <li><b>Filial:</b> Selecione quais filiais da empresa estão autorizadas a usar a campanha.</li>
                    <li><b>Parceiro (cliente):</b> Liste parceiros ou clientes específicos que se beneficiarão da campanha.</li>
                    <li><b>Usuário superior:</b> Defina se usuários hierarquicamente superiores têm acesso à campanha.</li>
                    <li><b>Condição de pagamento:</b> Relacione a campanha a determinadas condições de pagamento.</li>
                    <li><b>Tabela Preço:</b> Associe a campanha a tabelas de preço específicas.</li>
                </ul>
            <li>Cada categoria possui um <b>botão de exclusão</b>, permitindo a remoção do vínculo quando desejado.</li>
            <li>Utilizando esses filtros, você garante a flexibilidade e precisão na aplicação da campanha. Por exemplo, se você quiser criar uma campanha exclusiva para determinados usuários, segmentos ou parceiros, pode definir isso facilmente. Veja a imagem 3 para um exemplo visual.</li>
        </ol> <br>
        <img src="https://totvscrm.com/wp-content/uploads/2023/08/GIF008.gif" alt="Minha Imagem" class="imagem-responsiva">
        <h3> Listando e Ativando a Campanha</h3> 

        <ol>
          <li>Acesse <b>Configuração</b> e depois vá para <b>Configuração de Pedido</b>.</li>
          <li>Selecione <b>Busca Produto</b> e localize o item denominado <b>"CAMPANHADESCONTO"</b>.</li>
          <li>Clique no ícone de filtro e, em seguida, no botão <b>Adicionar</b>.</li>
          <li>Uma nova linha será habilitada. Grave a entrada e clique no ícone de lápis para editar.</li>
          <li>Clique novamente em <b>Adicionar</b>. Selecione a entidade correspondente e, no campo descrição, insira o nome ou critério do filtro. Após preencher, clique em <b>Gravar</b>.</li>
          <li>Edite a descrição, se necessário, e grave novamente.</li>
          <li>Clique no ícone de chave de manutenção, selecione <b>Adicionar</b> e escolha o vínculo previamente cadastrado que deseja associar.</li>
          <li>Clique em <b>Confirmar</b> e depois em <b>Gravar</b> para finalizar.</li>
          <li>Agora, a campanha estará disponível no pedido, especificamente na aba <b>Campanha</b>, pronta para ser selecionada de acordo com os critérios estabelecidos anteriormente.</li>
      </ol>
             
      <h3> Inclusão do Combo no Pedido de Venda</h3> 
           
      <ol>
        <li>
            Após ativar a campanha através do filtro de produto, a campanha estará disponível na aba “Campanha”. Esta aba apresentará os combos de desconto conforme os critérios do filtro estabelecido.
        </li>
        <li>
            Cada combo de desconto é exibido em um card separado com as seguintes seções e informações:
            <ul class="browser-default">
                <li><b>Cabeçalho do card:</b>
                    <ul>
                        <li>Descrição da campanha.</li>
                        <li>Quantidade de produtos.</li>
                        <li>Quantidade de itens.</li>
                    </ul>
                </li>
                <li><b>Informações dos produtos da campanha:</b>
                    <ul>
                        <li>Código e descrição do produto.</li>
                        <li>Quantidade mínima na campanha.</li>
                        <li>Preço unitário: preço de tabela do item.</li>
                        <li>Percentual de desconto aplicado.</li>
                        <li>Preço de venda (já com o desconto).</li>
                        <li>Estoque: quantidade disponível do produto.</li>
                        <li>Campo para o usuário inserir a quantidade de kits que deseja adicionar ao carrinho.</li>
                    </ul>
                </li>
                <li><b>Rodapé do card:</b> Valor total do combo de vendas.</li>
            </ul>
        </li>
            </ol>

            <p>Após ativar a campanha através do filtro de produto, ela estará disponível em uma aba intitulada “Campanha”. Esta aba mostrará os combos de desconto dentro do pedido, sempre respeitando os filtros aplicados.</p>

            <p>As campanhas de desconto aparecerão individualmente em cards na tela. Cada card apresentará:</p>

            <ol>
                <li><b>Cabeçalho do Card:</b>
                  <ul class="browser-default">
                        <li>Descrição da campanha.</li>
                        <li>Quantidade de produtos.</li>
                        <li>Quantidade de itens.</li>
                    </ul>
                </li>
                
                <li><b>Produtos da Campanha:</b>
                  <ul class="browser-default">
                        <li>Código e descrição do produto.</li>
                        <li>Quantidade mínima na campanha.</li>
                        <li>Preço unitário (preço de tabela do item).</li>
                        <li>Percentual de desconto.</li>
                        <li>Preço de venda (já com o desconto aplicado).</li>
                        <li>Estoque (quantidade disponível do produto no estoque).</li>
                        <li>Campo quantidade: aqui, o usuário define quantos kits deseja adicionar ao carrinho.</li>
                    </ul>
                </li>
                
                <li><b>Rodapé do Card:</b>
                  <ul class="browser-default">
                        <li>Valor total da campanha (refere-se ao valor total do combo de vendas).</li>
                    </ul>
                </li>
            </ul>

            <p>A campanha pode ser adicionada ao carrinho clicando no ícone de "check" no card da campanha. É possível adicionar múltiplas campanhas ao carrinho, com todos os produtos da campanha sendo adicionados automaticamente.</p>
            
            <p>Protótipos de listagem das campanhas (combos de venda) estão disponíveis para visualização em versões web e mobile.</p>
       

          </section>

          <section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2>
            <h3>Caso de uso</h3>
            

            <p>
              <b>Cenário:</b>
              <p>A "Empresa A" é uma produtora e distribuidora de insumos para o preparo de
                pizzas. Com o objetivo de aumentar suas vendas e também o reconhecimento da sua
                linha completa de produtos, ela decidiu criar uma estratégia de vendas inovadora
                voltada para as distribuidoras.
                
                </p>
              
              <br>
              
              <b>Desafio Antigo:</b>
              <p>As distribuidoras frequentemente compravam produtos individualmente com base na
                demanda de seus clientes. Isso resultava em vendas inconsistentes para a
                "Empresa A", com alguns produtos vendendo rapidamente, enquanto outros
                permaneciam estagnados no estoque. Ademais, a "Empresa A" percebeu que muitos
                clientes desconheciam a extensão de sua linha de produtos.
                
                </p>
              
              <br>
              
              <b>Solução Atualizada:</b>
              <p>A "Empresa A" decidiu criar um combo especial contendo 9 de seus produtos
                distintos, desde molhos até ingredientes específicos para cobertura. Para tornar
                o combo atrativo para as distribuidoras, a empresa estabeleceu um desconto
                significativo para aquelas que comprassem o combo em uma quantidade mínima
                determinada.
                </p>
              
              <br>
              
              
              </p>
          </section>
      
         
          </div>
          
            <!-- Tab 30 fim -->
          
            <!-- Tab 30 fim -->
          
          </div>
        </div>
    


      <div id="tab2" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
            <section id="section5" style="margin-top: 40px;">
            <!-- Primeira coluna do conteúdo da guia 2 -->
            <h2 class="custom-heading"><i class="fa-solid fa-gear"></i>&nbsp DETALHES TÉCNICOS</h2>

            <br />              <h3> Atualização no Módulo Winthor:</h3> 
            <ol>
              <li>
                Execute a integração de todos os requisitos da campanha existentes na versão Winthor.
              </li>
              <h3>Parametrização da Aba de Campanha:</h3>
              <li>
                
                <section id="section6" style="margin-top: 40px;">
                  <p>Torne a aba de campanha parametrizável no PedidoEngine, assim como as abas de lançamento oferta e sugestão. Adicione os seguintes registros à tabela wsconfigpedidogeral:</p>
                  <br>
                  <pre><code class="language-sql">INSERT INTO public.wsconfigpedidogeral(idwsconfigpedidogeral, chave, "label", idnativo)
            VALUES(nextval('seqpkwsconfigpedidogeral'), 'HABILITAR_SUGESTAO_CAMPANHA_WEB', 'standard.pedidoconfig.sugestao.lbl.campanha', 0);
            INSERT INTO public.wsconfigpedidogeral(idwsconfigpedidogeral, chave, "label", idnativo)
            VALUES(nextval('seqpkwsconfigpedidogeral'), 'HABILITAR_SUGESTAO_CAMPANHA_AND', 'standard.pedidoconfig.sugestao.lbl.campanha', 0);</code></pre>
            <br>

            <li>As abas só devem ser exibidas nas plataformas web e Android se os registros acima estiverem ativos (idnativo = 1). Ajuste os registros em Configuração → Configuração Pedido → Geral.</p>
            </section>
            
              </li>
              <h3>Adicionando novo Menu de Busca:</h3>
              <li>
                
                <p>No menu "busca produto" em Configuração → Configuração Pedido - Busca produto, crie um submenu chamado "CAMPANHA DE DESCONTO" com as informações:</p>
                <br>

                <pre><code class="language-sql">INSERT INTO public.wsconfigpedidocampo(idwsconfigpedidocampo, nomeentidade, "label", idnativo, idnvisivel, idneditavel, idnobrigatorio, idnunion, ordem, codigoerp, idneditavelcomitens, contexto, idnexiberelatorio)
            VALUES(nextval('seqpkwsconfigpedidocampo'), 'CAMPANHA DE DESCONTO', 'CAMPANHADESCONTO', 0, 0, 0, 0, 0, 0, NULL, 0, 'CAMPANHADESCONTO', 0);</code></pre>
              </li>
              <h3>Detalhes da Busca por CAMPANHA DE DESCONTO:</h3>
              
                
                  <li>A busca substituirá a atual no Winthor e permitirá níveis de busca por entidades, tais como: idfilial, idtabelapreco, idsegmento, idusuario, idparceiro, idgrupousuario, idcondicaopagamento e idusuariosuperior.</li>
                  <li>Filtros adicionais podem ser aplicados nos campos:</li>
                  <ul class="browser-default">
                    <li><b>IDNATIVO:</b> filtra registros ativos.</li>
                    <li><b>VIGÊNCIA:</b> filtra campanhas com vigência.</li>
                    <li><b>VIGENCIAOUSEMVIGÊNCIA:</b> filtra campanhas vigentes ou não, independente das datas cadastradas.</li>
                  </ul>
                </ul>
              </li>
              <h3>Regras ao Adicionar Campanha ao Carrinho:</h3>
                                            <ul class="browser-default">
                  <li>Após adicionar uma campanha ao carrinho, o vínculo do produto com a campanha original deve ser mantido (pedidoproduto.idcampanhadesconto).</li>
                  <li>Se o parâmetro <b>HABILITAR_INCLUSAO_PRODUTO_DUPLICADO</b> estiver INATIVO:</li>
                  <li>Adicionando a campanha ao carrinho e se produtos da mesma campanha já estiverem presentes, o sistema deve retornar uma mensagem de erro. Essa função é semelhante à existente no código-fonte do Winthor.</li>
                  <li>Se o parâmetro <b>HABILITAR_INCLUSAO_PRODUTO_DUPLICADO</b> estiver ATIVO:</li>
                  <li>Adicionando a campanha ao carrinho com produtos da mesma campanha já presentes, o sistema deve criar uma nova linha do produto. Assim, existirão produtos vinculados e não vinculados à campanha de desconto.</li>
                </ul>
              </li>
            </ol> 
<!-- Second Card -->

           


              </div>

        </div>
    </div> 

    <div id="tab3" class="col s12">
      <div class="tab-content">
        <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
              <!-- Primeira coluna do conteúdo da guia 2 -->
              <div class="container">
                <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS FREQUENTES</h2>
                <ul class="collapsible">
                  <li>
                    <div class="collapsible-header"><i class="material-icons">question_answer</i>É possível remover apenas um item específico de uma campanha de produtos?</div>
                    <div class="collapsible-body"><span>Não, o objetivo principal de uma campanha de produtos é 
                      promover a venda do combo ou conjunto específico de produtos oferecido. 
                      </span></div>
                </li> 
                   
                    <!-- Adicione mais perguntas e respostas aqui conforme necessário -->
                </ul>
            </div>

            
                            <!-- Primeira coluna do conteúdo da guia 2 -->

            
            </div>
             
      </div>
  </div>

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // Inicialização das tabs
  document.addEventListener("DOMContentLoaded", function () {
    var tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
  });
</script>

<script>
  const items = document.querySelectorAll("#indice li");

  items.forEach(item => {
      item.addEventListener('click', (e) => {
          const targetId = e.target.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
          window.scrollTo({
              top: targetElement.offsetTop - 10,
              behavior: "smooth"
          });
      });
  });
</script>

<script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 


<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> 

<script>hljs.highlightAll();</script>
  


<script src="scripts.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.collapsible');
      var instances = M.Collapsible.init(elems);
  });
</script>

 <!-- ... (conteudo video) ... -->
 <script src="https://www.youtube.com/iframe_api"></script>

 <script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '315',
      width: '560',
      videoId: 'FvsuBOvyyro',
      playerVars: {
        start: 1238, // 20:38 em segundos
        end: 1356   // 22:36 em segundos
      }
    });
  }
</script>