Modal de maioridade

Configure um modal para que seus usuários confirmem a maioridade antes de entrar na sua loja.

Em alguns casos, devido ao material que você disponibiliza na sua loja, pode ser necessário confirmar a idade dos usuários para permitir o acesso à sua loja. Nesses casos, você pode seguir os passos deste artigo para configurar um modal com uma mensagem sobre a informação que eles devem confirmar e os botões de confirmação.

1. Faça login na loja com o seu usuário administrador.
2. Acesse o Painel de controle > Configurações > Avançado.
3. Você deverá copiar o código a seguir e colá-lo na seção Custom before code

   <script type="text/javascript">

   $(window).on("load", function () {
     if (!localStorage.getItem("modalShown")) {
       $("#exampleModal").modal("show");
       $(".Landing").css("filter", "blur(4px)");
       $("#App").css("pointer-events", "none");
     }

     $(".btn-cerrar").click(function () {
       $("#exampleModal").modal("hide");
       localStorage.setItem("modalShown", 'true');
       $("#App").css("filter", "none");
       $("#App").css("pointer-events", "auto");
     });

     $("#btn-no").click(function () {
      let prevUrl = history.go(-1);
      if(typeof prevUrl === 'undefinded'){
      }

     });


   });

   </script>

   <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-body">
   <div class="d-flex">
   <img style="margin: auto auto" src="https://i.ibb.co/NxnV2xC/Captura-de-pantalla-2024-11-06-a-la-s-6-49-42-p-m.png"/>
   </div>
           <p style="margin-top: 1.5rem; text-align: center; margin-bottom: 2rem;">Este sitio contiene <strong>contenido para adultos</strong>. <br /> ¿Eres mayor de edad?<p>
   <div class="buttons" style="text-align: center; display: flow-root;">
           <button type="button" id="btn-yes" class="btn btn-success btn-cerrar btn-modal-style" data-bs-dismiss="modal">SÍ</button>
    <button type="button" id="btn-no" class="btn btn-danger btn-modal-style" data-bs-dismiss="modal">NO</button>
   </div>
         </div>
       </div>
     </div>
   </div>
   <style>
   .btn-modal-style{
       width: 125px;
       border-radius: 20px;
   }

   .btn-danger:focus, #btn-no:focus{
   box-shadow: 0 0 0 3px rgb(239 184 17 / 50%) !important;
   }


   /* Ajustar el tamaño de la imagen */

   #exampleModal .modal-body img {
     width: 100px !important;         /* Ajusta el ancho de la imagen */
     display: block;                         /* Asegura que se centre */
     margin: 0 auto;              /* Centra la imagen horizontalmente */
   }

   /* Ajustar color del boton SI*/

   #btn-yes {
     background-color: #4CAF50; /* Cambia el color de fondo */
     border-color: #4CAF50;     /* Cambia el color del borde */
     color: white;              /* Cambia el color del texto */
   }


   /* Ajustar color del boton NO*/

   #btn-no {
     background-color: #f44336; /* Cambia el color de fondo */
     border-color: #f44336;     /* Cambia el color del borde */
     color: white;              /* Cambia el color del texto */
   }

   /* Ajustar color y fuente del texto del modal*/

   #exampleModal .modal-body {
     color: #333333;                     /* Cambia el color del texto */
     font-family: 'Arial', sans-serif;            /* Cambia la fuente */
     font-size: 16px;                /* Ajusta el tamaño de la fuente */
   }

   #exampleModal .modal-body p {
     color: #555555;            /* Color específico para los párrafos */
   }


   </style>

4. Clique em Salvar. Ficará assim

   

Modifique a aparência e o texto do seu modal.

Você notará que o código tem notas como, por exemplo, _/ Muda a cor do texto _/**. Use as notas para se orientar dentro do código e modificar a aparência do modal. Você poderá alterar as cores e a fonte dos botões, o texto do modal e a imagem exibida nele.

• Encontre o seguinte trecho de código para alterar o logotipo ou a imagem exibida no modal. Você pode hospedar sua imagem em sites como https://imgbb.com/. Você deverá substituir a URL da imagem, neste caso https://i.ibb.co/NxnV2xC/Captura-de-pantalla-2024-11-06-a-la-s-6-49-42-p-m.png . Não apague as aspas nem nenhum outro caractere.

  <img style="margin: auto auto" src="https://i.ibb.co/NxnV2xC/Captura-de-pantalla-2024-11-06-a-la-s-6-49-42-p-m.png"/>

• Nesta seção do código, você poderá alterar o texto do seu modal.

  <p style="margin-top: 1.5rem; text-align: center; margin-bottom: 2rem;">Este sitio contiene <strong>contenido para adultos</strong>. <br /> ¿Eres mayor de edad?<p><div class="buttons" style="text-align: center; display: flow-root;">

  O texto que está entre as tags aparece em negrito na imagem.

  <p style="margin-top: 1.5rem; text-align: center; margin-bottom: 2rem;">Este sitio contiene <strong>contenido para adultos</strong>. <br /> ¿Eres mayor de edad?<p>
  <div class="buttons" style="text-align: center; display: flow-root;">

  /* Ajustar color del boton SI*/

  #btn-yes {
    background-color: #4CAF50; /* Cambia el color de fondo */
    border-color: #4CAF50;     /* Cambia el color del borde */
    color: white;              /* Cambia el color del texto */
  }

  /* Ajustar color y fuente del texto del modal*/

  #exampleModal .modal-body {
    color: #333333;                     /* Cambia el color del texto */
    font-family: 'Arial', sans-serif;            /* Cambia la fuente */
    font-size: 16px;                /* Ajusta el tamaño de la fuente */