Cómo compartir una wishlist a través de email y redes sociales

¿Te imaginas poder compartir con tus amigos la lista de productos que más te gustan de tu marca favorita? Olvídate de hacer capturas de pantalla de tus artículos preferidos y de compartir los enlaces por whatsapp… Ahora puedes hacerlo enviando un email con tu lista de favoritos. Mucho más sencillo, ¿verdad? 

Para las tiendas esta funcionalidad es de mucha utilidad porque ayuda a viralizar los productos más deseados por los clientes y a que ellos sean los mejores prescriptores de la marca. Por esta razón, diseñamos un proyecto a medida para darle esta solución a uno de nuestros clientes. ¡Te contamos cómo lo hicimos!

Brief del cliente

El proyecto de nuestro cliente lo realizamos totalmente ad hoc utilizando WordPress y WooCommerce. Como te contaba, nos solicitan que el listado de productos añadidos a la Wishlist se pueda compartir en las redes sociales más utilizadas y, además, que se pueda enviar en un email totalmente personalizado en el que se incluyen diferentes CTA’s (Calls to Action).

Estrategia de Iniciativatec

En nuestro proceso de análisis previo tomamos la decisión de que como no se requieren funcionalidades especiales, vamos a optar por el uso de un plugin estándar. Es entonces cuando estudiamos los más utilizados, YITH Wishlist y TI-Wishlist, y elegimos este último ya que dispone de un contador de “veces añadido” que es uno de los requisitos de nuestro cliente.

Cómo implementar un plugin para compartir Wishlist’s 

Paso 1.  Instalación del plugin

En primer lugar, instalamos y configuramos el plugin para adaptarnos al diseño realizado.

Paso 2.  Adaptar los archivos

Una vez implementado, localizamos los archivos del plugin que contienen la información de productos de la Wishlist (ti-wishlist.php) y el archivo que contiene la parte de iconos con el envío de la Wishlist por email (ti-wishlist-social.php).

La funcionalidad nativa del plugin realiza un mailto con la URL de la Wishlist en la Web (https://midominio.com/wishlist/32007C/) y hay que cambiarlo por el envío de un formulario por AJAX.

Para integrar el formulario vamos a modificar el archivo ti-wishlist-social.php siguiendo los siguientes pasos:

  1.  Al final del bucle que muestra los diferentes iconos sociales, localizamos el <li> correspondiente al icono de mail y lo modificamos para que podamos aplicar las acciones javascript correspondientes:
<li><span class="social social-email-w" title="Enviar por email"><i class="ftinvwl ftinvwl-email"></i></span></li>

 

  •  Añadimos un elemento <h4> para mostrar las alertas y/o mensajes sobre el envío:

 

<h4 id="resultmsg" style="width:100%, margin:10px auto; text-align:center;"> </h4>

 

  • Añadimos el formulario dentro de un <div> oculto que se mostrará cuando hagamos click en el icono del mail:

 

<div class="form-popup" id="emailer" style="display:none;">
    <form action="<?php echo esc_url( $form_url ); ?>" class="form-container" id="emailsender" name="emailsender" method="post">
        <h4><?php echo _e('Enviar tu Lista de deseos por email','janeworld-child'); ?></h4>

        <label for="emailr"><b><?php echo _e('Tu Nombre','janeworld-child'); ?></b></label>
        <input type="text" placeholder="Introduce tu nombre" name="nombre" required><br>
        <label for="emailr"><b><?php echo _e('Tu Email','janeworld-child'); ?></b></label>
        <input type="text" placeholder="Introduce tu email" name="emailr" required><br>
        <label for="emaild"><b><?php echo _e('Email destinatario','janeworld-child'); ?></b></label>
        <input type="text" placeholder="Introduce el email del destinatario" name="emaild" required><br>
        <!-- <input type="hidden" name="emailbody" value="< ?php echo $emailbody;?>"> -->

        <div style="margin:0 0 20px;">
            <button type="submit" class="btn_enviar_email btn btn-lg btn-blue" name="btn_enviar_email" value="wishlist"><?php echo _e('Enviar','janeworld-child'); ?></button>
            <button type="button" class="btn_cancel btn btn-lg btn-blue"><?php echo _e('Cerrar','janeworld-child'); ?></button><br>
        </div>
    </form>
</div>

Paso 3.  Verificar los datos introducidos en el formulario

El siguiente paso es integrar la lógi

ca javascript que verifica los datos introducidos en el formulario y realiza el envío al remitente especificado.

<pstyle=»font-weight: 400;»>Para ello, vamos a modificar el archivo ti-wishlist.php siguiendo los siguientes pasos:

    1.  Convertimos el array de productos añadidos a la Wishlist en un array json:
<?php $product_list = json_encode($products); ?>
  • Recogemos el clic en el icono de email para abrir el formulario:
jQuery('.social-email-w').on('click',function(e){
e.preventDefault();
jQuery("#emailer").css("display","block");
return false;
});
  • Recogemos el clic del botón “Cancelar” para cerrar el formulario:

 

jQuery('.btn_cancel').on('click',function(){
jQuery("#emailer").css("display","none");
});
  • Cuando el usuario rellena el formulario y hace click a “Enviar”, se recoge el evento:

 

jQuery('.btn_enviar_email').on('click',function(e){});

Entonces,  se ejecuta la función desencadenando diferentes procesos:

    1. Anula cualquier proceso para prevenir el envío del email con errores:
e.preventDefault();
  • Comprueba que todos los campos están rellenos:

 

if(jQuery("input[name=nombre]").val() != ''){
var nombre = jQuery("input[name=nombre]").val();
}else{
                            //alert('Escribe tu nombre');
                            jQuery("input[name=nombre]").focus().css('border-color','#f00');
                            return false;
}

if(jQuery("input[name=emailr]").val() != ''){
                            var email_r = jQuery("input[name=emailr]").val();
}else{
                            //alert('Escribe tu email');
                            jQuery("input[name=emailr]").focus().css('border-color','#f00');
                            return false;
}

if(jQuery("input[name=emaild]").val() != ''){
                            var email_d = jQuery("input[name=emaild]").val();
}else{
                            //alert('Escribe el email del destinatario');
                            jQuery("input[name=emaild]").focus().css('border-color','#f00');
                            return false;
}
  • Se recogen las variables de idioma y la url de destino para la llamada AJAX:

 

var lang = '<?php echo ICL_LANGUAGE_CODE;?>';
var wishl = '<?php echo $form_url;?>';
  • Si todo es correcto, se pasan las variables por AJAX:
                        if(nombre && email_r && email_d){

                            jQuery("input[name=nombre], input[name=emaild], input[name=emailr]").css('border-color','#0f0');
                            jQuery.ajax({
                                type: 'POST',
                                url: '<?php echo admin_url("admin-ajax.php"); ?>',
                                
                                data: {
                                    action:"send_wishlist",
                                    'listproduct':product_list,
                                    'nombre':nombre,
                                    'email_r':email_r,
                                    'email_d':email_d,
                                    'body_msg':body_msg,
                                    'lang' : lang,
                                    'wishl' : wishl
                                },
                                dataType: 'json', // add data type
                                
                                success: function(response) {
                                    //jQuery("#resultmsg").html(response);
                                    //var obja = JSON.parse(JSON.stringify(response));
                                    //console.log(obja);
                                    console.log(response);
                                    jQuery("input[name=nombre], input[name=emaild], input[name=emailr]").val('');
                                    jQuery("#emailsender").hide("slow");
                                    jQuery("#resultmsg").html("<?php _e("¡Wishlist compartida correctamente!", "janeworld-child");?>");
                                    jQuery("#resultmsg").css('margin-top','20px');
                                },
                                error: function(response) {
                                    //var obja = JSON.parse(JSON.stringify(response));
                                    //console.log(obja);
                                    console.log(response);
                                    console.log("Se ha producirdo un error en la consulta. Por favor, vuelva a intentarlo en un momento: "+response+"");
                                    //alert('Fallo en el envio');
                                }
                            });
                        }else{
                            alert('Debes de rellenar todos los campos');
                        }


/* Envio de Wishlist por email  */
                    jQuery('.btn_enviar_email').on('click',function(e){
                        e.preventDefault();
                        //alert('Enviando email........');

                        
                        var body_msg = '<p></p>';
                        var lang = '<?php echo ICL_LANGUAGE_CODE;?>';
                        var wishl = '<?php echo $form_url;?>';

                        if(nombre && email_r && email_d){
                            jQuery("input[name=nombre], input[name=emaild], input[name=emailr]").css('border-color','#0f0');
                            jQuery.ajax({
                                type: 'POST',
                                url: '<?php echo admin_url("admin-ajax.php"); ?>',
                                
                                data: {
                                    action:"send_wishlist",
                                    'listproduct':product_list,
                                    'nombre':nombre,
                                    'email_r':email_r,
                                    'email_d':email_d,
                                    'body_msg':body_msg,
                                    'lang' : lang,
                                    'wishl' : wishl
                                },
                                dataType: 'json', // add data type
                                
                                success: function(response) {
                                    //jQuery("#resultmsg").html(response);
                                    //var obja = JSON.parse(JSON.stringify(response));
                                    //console.log(obja);
                                    console.log(response);
                                    jQuery("input[name=nombre], input[name=emaild], input[name=emailr]").val('');
                                    jQuery("#emailsender").hide("slow");
                                    jQuery("#resultmsg").html("<?php _e("¡Wishlist compartida correctamente!", "janeworld-child");?>");
                                    jQuery("#resultmsg").css('margin-top','20px');
                                },
                                error: function(response) {
                                    //var obja = JSON.parse(JSON.stringify(response));
                                    //console.log(obja);
                                    console.log(response);
                                    console.log("Se ha producirdo un error en la consulta. Por favor, vuelva a intentarlo en un momento: "+response+"");
                                    //alert('Fallo en el envio');
                                }
                            });
                        }else{
                            alert('Debes de rellenar todos los campos');
                        }

                    });

 

Paso 4.  Tratar los datos y su envío

Ahora desarrollamos la función que tratará los datos y su envío mediante el cliente de correo nativo de WordPress. Para ello, tenemos que crear una función en functions.php del Theme-child. Esta función debe de tener el mismo nombre que le hemos dado en el action de la función de AJAX:

function send_wishlist(){
     // Proceso de la información
}

Dentro de esta función vamos a realizar varios procesos:

    1. Comprobamos que llegan todos los datos necesarios:
if(isset($_POST) && !empty($_POST) && isset($_POST['nombre']) && $_POST['email_d']  && $_POST['email_r'] ){
    ….
}
  • Recogemos los valores de todas las variables:

 

$nombre = $_POST['nombre'];
$emaild = $_POST['email_d'];
$emailr = $_POST['email_r'];
$lang = $_POST['lang'];
$product_list = $_POST['listproduct'];
$datos = '';
$datos_b = '';
$wishl_url = $_POST['wishl'];
  • Creamos un bucle foreach con el array de las ID’s de los productos añadidos a la wishlist para obtener todos sus datos mediante las funciones nativas de WooCommerce (nombre, imagen, permalink, valoraciones, etc.):

 

foreach ($product_list as $key => $value) {
  • Dentro del bucle vamos almacenado en variables la información combinada con el código HTML que dará formato al email de acuerdo al diseño:

 

  $variation = wc_get_product( $value['variation_id'] );
  $image_tag = $variation->get_image();
  $image_id = $variation->get_image_id();
  $img_atts = wp_get_attachment_image_src($image_id, 'medium');
  $img_src= $img_atts[0];
  $variation_url = $variation->get_permalink();
  $datos .= '<a href="'.$variation_url.'" title="'.$variation->get_title().'">'.$image_tag.'</a>';
  $datos .= '<br>';
  $datos .= '<h4>'.$value['price'].' €</h4>';
  $product = wc_get_product($value['product_id']);
  if($product->get_average_rating() > 0){
    $datos .= '<p><img src="'.get_stylesheet_directory_uri().'/images/wishlist/'.$product->get_average_rating().'rat.png" alt="'.$product->get_average_rating().' ratings"></p>';
  }

  $datos_b .='
  <div class="mj-column-per-33 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
      <tbody>
         <tr>
          <td style="vertical-align:top;padding: 0;">
            <center>
             <a href="'.$variation_url.'" title="'.$variation->get_title().'"><img height="auto" src="'.$img_atts[0].'" style="border:0;display:block;outline:none;text-decoration:none;height:auto;" width="186" alt="Ver '.$variation->get_title().' en la JanéWorld"></a>
            </center>
          </td>
        </tr>
        <tr>
          <td align="center" style="font-size:0px;padding:20px 25px 3px;word-break:break-word;">
            <div style="font-family: \'Quicksand\', sans-serif;font-size:20px;font-weight:800;line-height:1.1;text-align:center;color:#000000;"><a href="'.$variation_url.'" title="'.$variation->get_title().'">'.$variation->get_title().'</a></div>
          </td>
        </tr>
        <tr>
          <td align="center" style="font-size:0px;padding:0px 25px 0;word-break:break-word;">
            <div style="font-family: Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1.4;text-align:center;color:#1F1F1F;"> 
              <span style="color: inherit; text-decoration: none; font-weight: 600; padding: 0 0px;"><img src="'.get_stylesheet_directory_uri() .'/images/wishlist/star.png" width="14" style="border:0;display:inline-block;outline:none;text-decoration:none;height:auto;width:14px;" height="auto" ></span> 
            </div>
          </td>
        </tr>
        <tr>
          <td align="center" style="font-size:0px;padding:0px 25px 35px;word-break:break-word;">
            <div style="font-family: \'Quicksand\', sans-serif;font-size: 20px;font-weight:300;line-height:1.2;text-align:center;color:#01AEAE;">'.$value['price'].'€</div>
          </td>
        </tr>
        
      </tbody>
    </table>
  </div>
  ';
  if(next($product_list)) {
    // If This is the last $element
   
    $datos_b .='
      <!--[if mso | IE]>
        </td>
        <td class="" style="vertical-align:top;width:340px;">
      <![endif]-->
    ';
  }

}
  • Definimos las cabeceras y parámetros del método wc_mailer nativo de WooCommerce para el envío de emails:
define("HTML_EMAIL_HEADERS", array('Content-Type: text/html; charset=UTF-8'));
// Get woocommerce mailer from instance
$mailer = WC()->mailer();
$wrapped_message = $emailbody;
// Create new WC_Email instance
$wc_email = new WC_Email;
// Style the wrapped message with woocommerce inline styles
$html_message = $wc_email->style_inline($wrapped_message);
$headers = 'From: '. $emailr . "\r\n" .    'Reply-To: ' . $emaild . "\r\n";
$headers  .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html';
add_filter( 'wp_mail_content_type', 'set_html_content_type' );
function set_html_content_type() {
    return 'text/html';
}
  • Realizamos el envío de los datos extraídos con todo su formato HTML mediante la función nativa de WordPress:

 

if(wp_mail( $emaild, $subject, $html_message, $headers )){

Tanto si todo es correcto como si no, mediante un array de json, se devuelve la respuesta a la función AJAX para que muestre su resultado en el <h4> creado para los mensajes de Alerta:

      $result = "Envio OK";
      $resulta = '
        <script>
            jQuery("#emailsender").hide("slow");
            jQuery("#resultmsg").html("<?php _e("¡Wishlist compartida correctamente!", "janeworld-child");?>")
        </script>
        ';
        wp_send_json($result);
    }  else {
      $result = '<h2>Se ha producido un error en el envio</h2>';
      wp_send_json($result);
    }
  }else{
    echo '<h1>Envio erroneo, faltan datos</h1>';
  }
  wp_die();
}
  • Si el envío es correcto, la respuesta será “success” y hará que se esconda el formulario y el mensaje será de “Wishlist enviada correctamente”. Si, por el contrario, se ha producido un error en el envío la respuesta será “error” y el mensaje de este error se mostrará en el <h4> destinado a ello.

 

A continuación os mostramos el email recibido como resultado del correcto envío de la wishlist.

Envío wishlist por email - Iniciativatec

Ahora que conoces el proceso, seguro que estás deseando implementar esta funcionalidad en tu tienda, ya verás cuánto tráfico genera. Te invitamos a ver más casos en nuestro apartado de Proyectos. Y no dudes en contactar con nosotros para realizarnos cualquier consulta desde la pestaña de Contacto.

Deja una respuesta

 

¿Hablamos?

Para contactar directamente, haz click en el icono

o rellena el siguiente formulario y te contactamos a la mayor brevedad posible

    Abrir chat
    💬 ¿Podemos ayudarte?
    Hola 👋
    ¿Cómo puedo ayudarte?