Una forma distinta para añadir el campo de cumpleaños en Mailchimp con plugins gratuitos, y sin casi código, usando Elementor.
Los plugins utilizados son:
- Mailchimp for Woocommerce (https://woocommerce.com/es-es/products/mailchimp-for-woocommerce/)
- Checkout Field Manager (https://es.wordpress.org/plugins/woocommerce-checkout-manager/)
- JetFormBuilder (https://wordpress.org/plugins/jetformbuilder/)
¿Cómo añadir fecha de cumpleaños en Mailchimp con Woocommerce?
- Crear campo ‘fecha de nacimiento’ con el plugin Checkout Field Manager
- Instalar y configurar el plugin de Mailchimp for Woocommerce y vincularlo a Mailchimp.
- Crear Formulario para actualizar la fecha de formulario (un formulario oculto que se ejecutará cuando se haga una compra y actualizará la fecha de cumpleaños en Mailchimp)
- Añadir el formulario en la página de finalizar compra y pegar un código que proporcionaré para que se ejecute solo y actualice la fecha de cumpleaños en Mailchimp.
1. Crear campo ‘fecha de nacimiento’ con Checkout Field Manager
Una vez instalado el plugin, accede a Woocommerce > Ajustes y accede a Finalizar compra, en el submenú accede a Facturación y pulsa en el botón Añadir nuevo campo, configuralo para que sea tipo date y comprueba el nombre ID que se ha asignado a tu nuevo campo, lo vas a necesitar más adelante. Para profundizar en las opciones avanzadas de campos personalizados, consulta la documentación oficial de Mailchimp donde encontrarás todas las especificaciones técnicas de sincronización.
¿Cómo instalar Mailchimp for Woocommerce?
Una vez instalado, pincha en conectar tienda, te pedirá loguearte, una vez lo haces, rellenas tus datos y ya lo tendrías listo, es muy intuitivo.
¿Cómo crear un formulario de sincronización de fecha de cumpleaños?
Instalamos el plugin y vamos a sus ajustes, en Mailchimp API añadimos la API Key (si no sabes como sacarla hay un enlace y te lo explica)
Una vez añadido el API Key creamos un nuevo formulario, el formulario deberá tener 3 campos:
- Correo
- Fecha nacimiento
- Actualizado
- Botón con una clase específica
Correo (campo de email – hidden) para enlazarlo a Mailchimp:
Rellenamos el campo (DEFAULT VALUE) de este campo de forma dinámica, que lo coja del usuario actual:
Fecha de nacimiento (tipo date):
Rellena el campo DEFAULT VALUE de forma dinámica. Debe coger datos del usuario actual. Usa User Meta. Añade el ID de fecha generado por Checkout Field Manager. En este caso fue 'billing_wooccm12'.
Actualizado (campo de texto -hidden)
Un campo con un texto por defecto con valor en ‘si’ para que cuando se envíe el formulario se envíe por el parametro actualizado=si y no vuelva a enviarse el formulario.
Botón enviar
Simplemente le añadimos la clase ‘syc-cumple’ para que luego podamos enviar el formulario con javascript.
¿Cómo configurar el formulario?
El formulario tiene que tener 2 acciones (Post Submit Actions)
- Mailchimp
- Redirect
Mailchimp enlazamos con la cuenta de API y seleccionamos los campos que vamos a enviar (correo y cumpleaños)
En redirect enlaza a la página actual. Añade por GET el parámetro 'actualizado' con valor 'si'. Así, al enviar el formulario, irá a la misma URL. Al final agregará 'actualizado=si'.
¿Cómo añadir el formulario en la página Finalizar compra?
Editamos la plantilla de elementor de Finalizar compra, y añadimos debajo del todo un contenedor que contenga:
- Formulario creado de fecha nacimiento
- Shortcode con código que envía el formulario
Activamos la visibilidad condicional, y solo mostramos si han clicado en el check de mailchimp para recibir notificaciones comerciales (mailchimp_woocommerce_is_subscribed)
Siendo el macro:
- Macro: Current User Meta
- Meta Field: mailchimp_woocommerce_is_subscribed
El código del Shortcode:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($) {
// Obtener el valor del parámetro 'actualizado' de la URL
var urlParams = new URLSearchParams(window.location.search);
var actualizado = urlParams.get('actualizado');
// Verificar si el botón de enviar tiene la clase .syc-cumple y el parámetro 'actualizado' es diferente de 'si'
if ($('.syc-cumple').length > 0 && actualizado !== 'si' && !$('#customer_details').length) {
// Enviar el formulario automáticamente
$('.syc-cumple').closest('form').submit();
}
});
</script>
El código comprueba tres cosas, que existe una clase ‘syc-cumple’, que no existe id ‘customer_details’ y que en la url no hay ningún parametro llamado actualizado=si, si se cumplen las dos cosas envía el formulario. Si por el contrario el formulario ya fue enviado, como tiene un parametro get actualizado= si, no se cumple la condición y no vuelve a enviarse.
Resumen del funcionamiento
El usuario añade productos al carrito, llega a la página de carrito y al final llega a la página de finalizar compra, como existe el id customer_details del formulario del pedido, el código jquery del shortcode no se ejecuta, por lo que el cliente rellena todos los datos y finaliza la compra, una vez pagado el pedido, regresa de nuevo a la página de finalizar compra, modificada la url para que aparezca solo los detalles del pedido que ha comprado, como en este caso ya no existe el id ‘customer_details’, si el cliente hizo click en acepto las notificaciones comerciales, aparecería el bloque del formulario en la parte inferior, el formulario detectaría ya el usuario registrado y pondría su correo en el campo oculto del correo, y la fecha de nacimiento en la fecha del formulario, se enviaría el correo que lo que hace es actualizar los datos de maichimp de ese correo, añadienido su fecha de cumpleaños, y haría un redirect a la misma pagina en la que está simplemente añadiendo al final de la url &actualizado=si por lo que el cliente apenas notaría ese salto.
