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}/{$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.
Os recomendamos los siguientes productos relacionados con la informática:
HP 15-fd1004ns- Ordenador portátil de 15.6" Full HD (Intel Ultra 5-125H, 16GB RAM, 512GB SSD, Intel Iris Xe Graphics, Windows 11) Silver - Teclado QWERTY Español
469,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
HP 305 6ZD17AE, Negro y Tricolor, Cartuchos de Tinta Originales, Pack de 2, compatible con impresoras de inyección de tinta HP Deskjet, HP Deskjet Plus y HP Envy
22,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
EasyAcc Funda Compatible con Samsung Galaxy Tab A9+/ A9 Plus 11 Pulgadas 2023 SM-X210/ X216/ X218– Ultra Slim PU Protectora Carcasa con Función de Soporte función Atril, Negro
11,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Auriculares USB C,In-Ear Auriculares Tipo C con Micrófono Control de Volumen de Llamadas Compatible con iPhone 15/15 Pro,Samsung S20/S21/S22,Huawei P50/Mate 30,iPad Pro,OnePlus,Pixel Dispositivo USB C
9,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Xiaomi TEJ4018GL - Impresora fotográfica portátil 300 PPP Pocket Mini AR con DIY Share 500 mAh, Blanco
56,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
INIU Cable USB C, 100W 2m Cable de Carga Rápida QC de USB C a USB C, Cable Tipo C Trenzado Nylon de Datos Cargador de Teléfono USB-C para Samsung S22 iPad Pro MacBook Tabletas LG Google etc
7,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
INIU Cable USB C, 100W 0.3m Cable de Carga Rápida QC de USB C a USB C, Cable Tipo C Trenzado Nylon de Datos Cargador de Teléfono USB-C para iPhone 16 15 Pro Samsung S24 S23 iPad Pro MacBook etc
7,48 € (as of 21 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Repetidor WiFi, expandedor WiFi de Doble frecuencia de 1200mps 5ghz y 2,4ghz, Modo repetidor/Router/Ap, Amplificador de señal WiFi con 6 Antenas potentes, Adecuado para Uso doméstico/de Oficina
25,85 € (as of 21 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
HP 305 3YM61AE - Cartucho de Tinta, Negro
12,66 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
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?
Muchas cosas….es difícil de saber. Si quieres mándame tu página de contacto e intento ver algo.
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?
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.
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
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.
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.
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
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.