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:
SEBBE Tablet 10 Pulgadas Android 13 Tablet PC 12GB RAM + 128GB ROM TF 1TB Octa-Core 2.0 GHz, Google GMS | Bluetooth 5.0 | 5G WiFi | 1280 * 800 | 6000mAh | 5MP+8MP, Tablet con Teclado y Raton Azul
(a partir de 26 abril, 2024 02:17 GMT +02:00 - Más informaciónProduct 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 Mi Portable Photo Printer, Impresora Láser Portátil, Papel fotográfico brillante, Impresión térmica, Conexión Bluetooth / USB / WLAN, Blanco, Versión Italiana
69,95 € (a partir de 26 abril, 2024 02:17 GMT +02:00 - Más informaciónProduct 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.)
Tablet Xiaomi Redmi Pad SE 11'/ 8GB/ 256GB/ Octacore/ Verde Menta
199,00 € (a partir de 26 abril, 2024 02:16 GMT +02:00 - Más informaciónProduct 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.)
JUMPER Tabletas Android 12 Octa-Core T616, 8GB RAM 256GB ROM Tablet, Dual SIM, 1920x1200 IPS FHD, 4G LTE, 5G/2.4G WiFi, 4 Altavoces, Cámara 13MP, Tipo C, 7000mAh, 2023
149,99 € (a partir de 26 abril, 2024 02:16 GMT +02:00 - Más informaciónProduct 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.)
Samsung 980 1 TB PCIe 3.0 (up to 3.500 MB/s) NVMe M.2 Internal Solid State Drive (SSD) (MZ-V8V1T0BW)
69,00 € (a partir de 26 abril, 2024 02:17 GMT +02:00 - Más informaciónProduct 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.)
Adaptador USB a HDMI, USB 3.0/2.0 Full HD 1080P Video Audio Gráficos Multi Monitor Mirroring/Expansión Convertidor Cable para PC/HDTV/Proyector, Compatible con Windows XP/7/8/8.1/10/11/Android
16,99 € (a partir de 26 abril, 2024 02:16 GMT +02:00 - Más informaciónProduct 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.)
Logitech M90 Ratón con Cable USB, Seguimiento Óptico 1000 DPI, Ambidiestro, PC, Mac, Portátil, Negro
5,79 € (a partir de 25 abril, 2024 11:18 GMT +02:00 - Más informaciónProduct 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 Pad 6 (sin Funda) + Auriculares – Tablet de 11” (WiFi, Pantalla WQHD+ de 144Hz, 6GB de RAM, 128GB de ROM, batería de 8840 mAh), Gris (Versión ES + 3 años de garantía)
308,97 € (a partir de 26 abril, 2024 02:17 GMT +02:00 - Más informaciónProduct 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.)
Lápiz para Pantalla Táctil, Lápiz para iPad 2018 a 2023, Lápiz Stylus de Rechazo de Palma Lápiz, Lápiz iPad con 3 Puntas, Lapiz Táctil con Función Detección de Inclinación
21,89 € (a partir de 26 abril, 2024 02:16 GMT +02:00 - Más informaciónProduct 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.