Modal mayoría de edad | Centro de Ayuda Publica.la

Es posible en ocasiones que debido al material que pones a disposición en tu tienda sea necesario confirmar la edad de los usuarios para permitirles el acceso a tu tienda. En esos casos puedes seguir los pasos de este artículo para configurar un modal con un mensaje para la información que deben de confirmar y los botones de confirmación.

Inicia sesión en la tienda con tu usuario administrador.
Accede al Panel de control > Ajustes > Avanzados.

Deberás copiar el siguiente código y pegarlo en la sección Custom before </body> 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>

Da click a Guardar. Se verá así

Modifica la apariencia y el texto de tu modal.

Notarás que el código tiene notas como por ejemplo /* Cambia el color del texto */. Utiliza las notas para guiarte dentro del código y modificar la apariencia del modal. Podrás cambiar los colores y fuente de los botones, el texto del modal y la imagen que se muestra en el mismo.

Encuentra el siguiente extracto de código para cambiar el logo o imagen que se muestra en el modal. Puedes alojar tu imagen en páginas como https://imgbb.com/. Deberás reemplazar la URL de la imagen, en este caso https://i.ibb.co/NxnV2xC/Captura-de-pantalla-2024-11-06-a-la-s-6-49-42-p-m.png . No borres las comillas ni ningún otro caracter.
```
<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"/>
```
En esta sección del código podrás cambiar el texto de tu modal.

Este sitio contiene contenido para adultos. ¿Eres mayor de edad? <div class="buttons" style="text-align: center; display: flow-root;">

El texto que se encuentra entre las etiquetas  está en negrita en la imagen.
```
Este sitio contiene contenido para adultos. ¿Eres mayor de edad?
<div class="buttons" style="text-align: center; display: flow-root;">
```
Encontrarás una sección para cambiar el botón de SI y otra para cambiar el botón de NO.
```
/* 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 */
}
```
En la siguiente página podrás encontrar los códigos de los colores: https://htmlcolorcodes.com/es/ . Debes buscar el color que quieres utilizar y copiar su identificador para luego pegarlo dentro del código.

Por último, podremos ajustar también el color y fuente del texto dentro del modal en la siguiente sección:

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

Ingresando en la siguiente página podrás encontrar un listado de fuentes y podrás probarlas antes de seleccionar una para tu modal: https://fonts.google.com/

Tips:

Ten siempre un respaldo de tu código para poder volver atrás cualquier cambio que hayas realizado y de error.
Complementa este modal activando la Pantalla de inicio. La misma sirve también para bloquear el contenido de la tienda antes de permitirle al usuario acceder.

Esperamos que este instructivo te haya resultado de ayuda. Sin embargo, en caso de que tengas cualquier consulta al respecto, no dudes en escribirnos a [email protected]. ¡Con gusto te ayudaremos!