Histórico da Página

     
<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;
 =============================== */

* {
  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;  

}

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,
.collapsible-header,
.collapsible-body.collapsible-header,
.collapsible-body {
  box-shadow: none !important;
}

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

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

.custom-list {
  boxpadding-shadowleft: none !important 0;
  margin-left: 1.5em;
}

.faqcustom-questionlist li {
  font-weightposition: boldrelative;
  marginpadding-bottomleft: 5px1em;
}

ul.faqcustom-answerlist {
  marginpadding-bottomleft: 20px10px;
}

ul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 030px;
  margin-leftbottom: 1.5em10px;
}

.custom-list li {item {
  display: flex;
  align-items: center;
  positionpadding: relative10px;
  paddingborder-leftbottom: 1px solid 1em#eee;
}

ul.customitem:last-listchild {
  paddingborder-leftbottom: 10pxnone;
}

ul.custom-list liitem .label {
  positionflex: relative1;
  listfont-style-typeweight: discbold;
}

.item .value {
  padding-leftflex: 30px1;
  margintext-bottomalign: 10pxright;
}

.item {
  border-bottom: 1px solid #e0e0e0;
  displaypadding: 10px flex0;
  align-itemsdisplay: centerflex;
  paddingjustify-content: 10pxspace-between;
  borderalign-bottomitems: 1px solid #eeecenter;
}

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

.item /* Estilos para o label */
.label {
  flexfont-weight: bold;
  display: 1flex;
  fontalign-weightitems: boldcenter;
}

.item .valuelabel i {
  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 */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 IMAGENSVÍDEO           =
      =============================== */

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

.video-container {
    max-width: 100%800px;
    heightmargin: 0 auto;
  }

.custom-header-bg img {ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto100%;
  displayposition: blockabsolute;
}

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

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

.video-container.custom-content {
    maxbackground-widthcolor: 800px#f5f5f5;
    marginpadding: 0 auto20px;
  }

.ytp-cued-thumbnail-overlay-image {border-radius: 8px;
  background-sizemargin: cover0 10px;
  backgroundmax-positionwidth: center100%;
  widthoverflow: 100%hidden;
}

.custom-heading {
  heightfont-size: 100%16px;
  positioncolor: absolute#42526e;
}

/* ==============================
      =    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;  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: 2px solid #e0e0e0;none;
}

#indice li:hover {
  paddingbackground-bottomcolor: 5px#6B48FF;
  font-weightcolor: boldwhite;  
}

#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/* ==============================
  =      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: #1094b8#dfdfdf;
  color: white;
}

/* ==============================
  =      ESTILOS DE TABELAS        =
  
/* ===================== FIM DO ESTILO ========= */

.custom-grey {  </style>
  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>
  

   


   





  <!-- 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>
     <!-- PrimeiroTab CardContent -->
 
 <div class="card">
    <div id="tab1" class="itemcol s12">
       <span <div class="labeltab-content">
        <table border="1">
          <tr> <div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
            <section  <td><i class="fas fa-tags"></i> Produto:</td>
id="section1" style="margin-top: 40px;">
               <td>Automação da Força de Vendas</td><!-- Tab 70 conteúdo -->
  <!-- Segundo Card -->

     </tr>
   <!-- Primeiro Card -->
       <tr>
   <!-- Primeiro Card -->
    <div class="card">
      <td><i<div class="fas fa-link"></i> Linha de Produto:</td>item">
        <span class="label">
     <td>TOTVS CRM</td>
    <table border="1">
     </tr>
        <tr>
  <tr>
              <td><i class="fas fa-chart-pietags"></i> SegmentoProduto:</td>
              <td>Cross Segmentos<  <td>Automação da Força de Vendas</td>
            </tr>
            <tr>
                <td><i class="fas fa-desktoplink"></i> MóduloLinha de Produto:</td>
               <td>Venda< <td>TOTVS CRM</td>
            </tr>

            <tr>
                <td><i class="fas fa-globechart-pie"></i> AplicaçãoSegmento:</td>
               <td>Web/app móvel< <td>Cross Segmentos</td>
            </tr>
            <tr>
                <td><i class="fas fa-hashtagdesktop"></i> IdentificadorMódulo:</td>
              <td>  <td>Venda</td>
            </tr>
    
        <tr>
        15720588</td>
        <td><i class="fas fa-globe"></i> Aplicação:</tr>td>
       </table>
      </span>
   <td>Web/app <móvel</div>td>
    </div>

 <!-- Tabs e conteúdo das guias -->
  <div class="card">
        </tr>
       <ul class="tabs">
    <tr>
  <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
      <li class="tab col s4"><a<td><i hrefclass="#tab2">DETALHES TÉCNICOS</a></li>
fas fa-hashtag"></i> Identificador:</td>
        <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul><td>
     <!-- Tab Content -->
 
      <div id="tab1" class="col s12">
           <div class="tab-content">
      15720588</td>
    <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;"> </tr>
        </table>
     <section id="section1" style="margin-top: 40px;">
 </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 a recente atualização do sistema de pedidos de venda, introduzimos o recurso
"Fator de Embalagem". Isso permite visualizar, de maneira clara, quantos itens individuais estão contidos em uma embalagem selecionada
para um produto específico.

        
      </p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado">
      Poder fazer escolhas mais informadas, evitando surpresas relacionadas à
quantidade de produto e otimizando o processo de decisão de compra.
    </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>
            <p>O recurso "<b>Fator de Embalagem</b>" mostra a quantidade de itens por embalagem e ajusta o preço correspondente automaticamente no pedido de venda.</p>

            <h3>4. Listagem de funções:</h3>
            <ul class="browser-default">
              <li><b>Visualização do Fator de Embalagem:</b></li>
              <ul class="browser-default">
                <li>Mostra quantos itens estão em uma embalagem.</li>
              </ul>
            
              <li><b>Ajuste Automático de Preço:</b></li>
              <ul class="browser-default">
                <li>Atualiza o preço com base na embalagem escolhida.</li>
              </ul>
            
              <li><b>Integração ao Pedido:</b></li>
              <ul class="browser-default">
                <li>As informações são exibidas diretamente na página de pedidos para facilidade do usuário.</li>
              </ul>
            </ul>
            
            
            
            
            
            
            
            
            
          </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><b>Acesse o Pedido de Venda:</b></li>
              <p>No painel principal, clique na opção "Pedidos" e, em seguida, "Novo Pedido".</p>
            
              <li><b>Seleção de Produto:</b></li>
              <p>Na seção de produtos, escolha o produto desejado.</p>
            
              <li><b>Visualize a Embalagem:</b></li>
              <p>Embaixo do nome do produto, você verá um campo denominado "Embalagem".
                Aqui, é exibida a quantidade de itens contidos na embalagem selecionada.
                </p>
            
              <li><b>Alteração de Embalagem (se necessário):</b></li>
              <p>Se desejar alterar a embalagem, selecione uma diferente no menu suspenso de embalagens. Note que o "Fator de Embalagem" e o preço serão ajustados automaticamente de acordo com sua seleção.</p>
            
              <li><b>Finalize o Pedido:</b></li>
              <p>Uma vez que tenha selecionado todos os produtos desejados e esteja satisfeito com a embalagem e o preço exibidos, prossiga para finalizar o pedido.</p>
            </ol>

            <br />
            <img
         src="https://totvscrm.com/wp-content/uploads/2023/08/mp4gi.gif"
         style="width: 50%"
       /> <br>
          
      

          </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>
                Carlos é um vendedor em uma grande distribuidora de alimentos não perecíveis.
                Uma parte significativa dos produtos vendidos são pacotes de grãos, como
                feijão, arroz e lentilhas, que são oferecidos em diferentes tamanhos de
                embalagem.
              </p> <br> <br>
              
              <b>Desafio Antigo:</b>
              <p>
                Os clientes, ao fazerem pedidos, frequentemente ficavam confusos com os
                diferentes tamanhos de embalagem. Muitos acreditavam estar pedindo uma
                quantidade, mas, por desconhecimento do fator de embalagem, acabavam recebendo
                outra. Isso levava a erros no pedido e à insatisfação do cliente, que tinha
                que lidar com devoluções e ajustes de pedido.
              </p><br><br>
              
              <b>Solução Atualizada:</b>
              <p>
                Com a nova funcionalidade "Fator de Embalagem" implementada no sistema, agora,
                embaixo de cada produto no pedido, o cliente pode ver claramente quantas
                unidades estão contidas em uma embalagem selecionada. Isso trouxe
                transparência ao processo de pedido, reduziu o número de erros e aumentou a
                confiança dos clientes na distribuidora. Os clientes, agora, podem fazer
                pedidos com maior precisão, sabendo exatamente quantas unidades estão
                solicitando.
              </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>Criar Registros na Entidade</h3>
<p>
  Na entidade <b>wsconfigpedidoproduto</b>, adicione os novos registros conforme
  as especificações: <br>
</p>

<p>
    <b>1.Registro:</b> WEB_GRID_PRECO_TABELA_EMBALAGEM <br />
    <b>Label:</b> standard.pedidoconfig.item.preco.tabela.embalagem (Preço
    tabela embalagem) <br />
    (Defina linha, coluna, idnVisivel, idnEditavel, idnExibeRelatorio,
    idnObrigatorio como 0)</p>
  


<h3>1. Configuração de Campos</h3>
<p>
  O novo campo, assim como o campo "Preço de tabela", não será editável e
  servirá apenas para visualização. Os campos <b>idneditavel</b> e
  <b>idnobrigatorio</b> não serão implementados no pedido de venda e devem
  mostrar "-" na configuração dos campos do produto.
</p>

<h3>3. Formação do Campo</h3>
<p>
  Este campo será determinado pela seguinte fórmula:
  <b>produtoembalagem.fatorembalagem * preco_tabela</b>. Ele refletirá o "Preço
  de tabela" para uma unidade da segunda unidade de medida (2ª Und Medida), sem
  considerar descontos ou acréscimos.
</p>

<h3>4. Atualização do Campo</h3>
<p>
  Quando o campo "Embalagem" do produto for alterado, este campo também deve ser
  atualizado. O novo "Fator de embalagem" deve ser levado em consideração no
  "Preço tabela embalagem".
</p>

<h3>5. Exemplo de Funcionamento:</h3>
<p>
  Considere: <b>Fator embalagem</b> = 2 e <b>Preço de tabela</b> = 1,50. O
  <b>Preço tabela embalagem</b> será: 2 (Fator embalagem) * 1,50 (Preço de
  tabela) = 3.
</p>

<!-- 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>O "Preço tabela embalagem" considera descontos ou acréscimos?</div>
                    <div class="collapsible-body"><span>Não, o "Preço tabela embalagem" reflete o preço base para uma embalagem, sem considerar descontos ou acréscimos aplicados ao pedido.
                      </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>