Casilla de Aceptación de Condiciones de Uso en los formularios de Prestashop 1.7

Siguiendo con la serie de artículos dedicados a crear casillas de Aceptación de Tratamiento de Datos en los formularios de contacto de las páginas web, algo obligatorio por la ley, hoy os dejamos una manera de hacerlo en Prestashop 1.7.

Cómo crear la casilla.

Os recomendamos ver el artículo sobre cómo crearlo en html, porque es una versión sencilla de este. En este caso vamos a usar casi el mismo código pero con JQuery.

  • Para crear la casilla lo primero es editar por FTP la plantilla de contacto del tema. Está en:

themes/tutema/modules/contactform/views/templates/widget/contactform.tpl

  • A esta plantilla vamos a realizarla los siguientes cambios que explicamos en el vídeo:- Añadimos una casilla desmarcada con html. La damos un ID (el que queramos).
    – Añadimos una frase explicativa. Nosotros además hemos hecho que se pueda traducir desde el backend.
    – Añadimos un enlace a esa frase o a otra (nosotros hemos puesto otra en el ejemplo y también hemos habilitado su traducción). Este enlace apunta a una página cuya url cogemos desde Desing>Pages en el backend.
    – Damos un id al botón para poder referenciarlo desde el script, y le añadimos la característica disabled para que, si no está marcada la casilla, no se pueda enviar.
    – Añadimos el scritp (aquí o en la página de js de la plantilla) para comprobar si está activada o no la casilla y cambiar el estado disabled.

Este es el código que añadimos en el footer:


<footer class="form-footer text-sm-right">
<input id="botoncont" class="btn btn-primary" type="submit" name="submitMessage" disabled value="{l s='Send' d='Shop.Theme.Actions'}">
<input type="checkbox" name="terms" id="terms1" value="No"> {l s='Acepto las condiciones de uso' d='Shop.Theme.Actions'}<a href="{$base_dir}/laosshop/{$language.language_code}/content/3-terminos-y-condiciones-de-uso" onclick="window.open(this.href); return false;">{l s=' : CONDICIONES DE USO' d='Shop.Theme.Actions'}</a>

</footer>


</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$("#terms1").change(function()
{
$("#botoncont").prop('disabled', !this.checked)
});
});
</script>;

En el vídeo podéis ver la explicación y demostración, y debajo tenéis el código.

9 comentarios en «Casilla de Aceptación de Condiciones de Uso en los formularios de Prestashop 1.7»

  1. He seguido todos las pasos pero no se refleja los cambios, aunque borre la cache tanto del servidor como del navegador. ¿A que puede deberse?

    Responder
  2. Gran Aporte, a mi me funciona fantástico pero una duda.

    ¿hay alguna manera para que el botón de envío se active solo si hay 2 checkbox marcados?

    Responder
    • Si, hay que modificar la condición con con otra similar. Necesitas obviamente personalizar el código, pero entendiendo cómo funciona no es muy difícil.

      Responder