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
  3. Hola David, muy buen post, he seguido los pasos y al poner el código en el footer todo bien, sale el chekbox y todo, pero al poner el script me sale este error
    La página xxxxx no puede procesar esta solicitud ahora.
    HTTP ERROR 500
    Estoy de momento en una url temporal, a espera de migrar mi web a el dominio oficial. Sabes a que se puede deber. Saludos , gracias de antemano

    Responder
  4. Hola David, gracias por el post, el código que va en el footer lo lee sin problemas y sale el chekbox y el link a las condiciones de uso, pero cuando ingreso el script en el codigo me sale el sgte error
    Esta página no funciona
    La página xxxxxxxxx no puede procesar esta solicitud ahora.
    HTTP ERROR 500 y se queda colgado. Sabes a que se puede deber, he probado quitando la primera linea del codigo del script, pero ocurre lo mismo. Saludos y gracias de antemano.

    Responder
    • No sabría decirte Cristian. Nosotros lo tenemos funcionando en un PS 1.7 así que el código funciona. El error 500 suele darse al añadir código cuando hemos puesto algo mal: no hemos cerrado una etiqueta o la hemos cerrado de más.
      El script tiene dos partes, en una carga jquery de Google y en otra el programa que hemos creado. Prueba a añadir sólo la primera parte (de la primera etiqueta script a su cierre) ver si da error. Luego añade la segunda. Así sabes dónde está el error. Y asegúrate que has abierto y cerrado todos los paréntesis, llaves etc.

      Responder
  5. Hola David, gracias por responder, he seguido tus instrucciones y algo he avanzado, he ido linea por linea y he detectado que el error 500 me da cuando coloco en el código el {/if}, de hecho sin él coge bien jquery porque activa y desactiva el botón como en el ejemplo, pero da el error al enviar el mensaje ¨Se produjo un error al enviar el mensaje, intente de nuevo.¨. No entiendo mucho de jquery la verdad, ¿esa etiqueta {/if} es de cierre ? ¿necesito abrir una etiqueta antes para poner este If? Saludos, gracias de antemano

    Responder
    • El if no se de dónde ha salido, lo he quitado porque no es necesario. Perdona.
      Si te funciona sin el if perfecto.
      Parece ser que ahora da error al enviar el mensaje. ESTO NO es culpa del código. El código lo único que hace es deshabilitar el botón y habilitarlo cuando se pincha en la casilla, pero no entra en el envío.
      ¿Has probado a enviar sin el código? Como te digo, ese Jquery sólo mira si está marcada la casilla y activa y desactiva el botón. El envío depende del formulario, la cuenta de destino, el sistema del servidor, el PS etc.

      Responder

Deja un comentario

Resumen de nuestra Política de Privacidad

  • Responsable: SmythSys IT Consulting SLNE.
  • Finalidad: Gestionar y moderar los comentarios.
  • Legitimación: Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios: Tus datos se alojan en los servidores de OVH.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la dirección del responsable (en nuestra política de privacidad).

Time limit is exhausted. Please reload CAPTCHA.