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/)
Pasos para 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.
2. 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.
3. Crear el 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):
Rellenamos el campo (DEFAULT VALUE) de este campo de forma dinámica, que lo coja del usuario actual, usar User Meta y añadir ahí el ID de la fecha generado con el plugin Checkout Field Manager, en mi 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.
Configuración del 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)
Y en redirect enlazamos a la pagina actual añadiendo por get el parametro actualizado que le dimos el valor por defecto si, esto hará que cuando se envie el formulario, irá a la misma url añadiendo al final actualizado=si
4. Añadir formulario en 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.
