Añadir fecha cumpleaños en Mailchimp desde Woocommerce

Tabla de contenidos

Una forma distinta para añadir el campo de cumpleaños en Mailchimp con plugins gratuitos, y sin casi código, usando Elementor.

Captura de pantalla 2023 05 22 a las 12.02.48

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

  1. Crear campo ‘fecha de nacimiento’ con el plugin Checkout Field Manager
  2. Instalar y configurar el plugin de Mailchimp for Woocommerce y vincularlo a Mailchimp.
  3. 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)
  4. 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.

Captura de pantalla 2023 05 22 a las 12.04.28

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:

Captura de pantalla 2023 05 22 a las 12.13.53

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’

Captura de pantalla 2023 05 22 a las 12.08.38

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.

Captura de pantalla 2023 05 22 a las 12.16.05

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)

Captura de pantalla 2023 05 22 a las 12.08.07

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

Captura de pantalla 2023 05 22 a las 12.23.26

 

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)

Captura de pantalla 2023 05 22 a las 12.43.34

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.

 

 

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Relacionados: