Notificaciones de envío en WordPress WooCommerce Powered by Nexmo SMS

Introducción

La experiencia del cliente tras una compra desempeña un papel muy importante en la retención de usuarios para cualquier empresa. En el comercio electrónico, la experiencia posterior a la compra incluye notificaciones puntuales cuando cambia el estado del pedido del usuario. Estas notificaciones puntuales del estado del pedido mantienen contentos a los clientes y reducen la carga de conversaciones con el servicio de atención al cliente.

En este tutorial, vamos a configurar una sencilla integración entre WordPress WooCommerce y Nexmo SMS para notificar al cliente (a través de SMS) cuando cambia el estado de envío de su pedido.

Al final de este tutorial, usted tendrá una buena comprensión de cómo crear un plugin de WordPress, cómo funcionan las Acciones de WordPress, y cómo integrar la API de Nexmo para enviar SMS en WordPress utilizando el SDK PHP de Nexmo.

Empecemos.

Lo que necesitas para empezar:

• Sitio web WordPress autoalojado

• WooCommerce plugin instalado

Esquema

Vamos a dividir este proyecto en pasos prácticos y a ponerlos en práctica de arriba abajo:

• Cree su plugin de WordPress

• Añadir el Nexmo PHP SDK al plugin

• Escucha los cambios de estado de los pedidos en WooCommerce

• Enviar un SMS cuando cambie el estado del pedido

Creación del plugin de WordPress

Aunque puedes crear un plugin de WordPress simplemente añadiendo una nueva carpeta en la carpeta de plugins de WordPress, una forma más eficiente es empezar con un boilerplate ligero. Boilerplates son útiles para configurar todos los archivos y Clases de una manera estándar. En este tutorial, usaremos el Generador de plantillas para plugins de WordPress (wppb) simplemente rellene los detalles en el sitio web, y haga clic en el botón Build Plugin para descargar su plugin boilerplate.

boilerplate generator

Cuando lo tengas, extrae el archivo zip y colócalo en la carpeta de plugins de WordPress. A continuación, vaya a su panel de administración de WordPress, navegue hasta la página de plugins instalados y haga clic en el botón Activar para activar el plugin:

WordPress installed plugins page

Añadir la librería PHP de Nexmo

Nexmo recomienda instalar su Biblioteca PHP a través de Composer, por lo tanto, necesitarás tener Composer instalado en tu servidor/sistema local. Si usted no tiene Composer configurado, aquí hay dos guías recomendadas por Nexmo para ayudar: https://getcomposer.org/doc/00-intro.md o https://scotch.io/tutorials/a-beginners-guide-to-composer

Con Composer instalado, abre tu terminal, navega hasta la carpeta de tu plugin (normalmente está en la ruta: /your-wordpress-server-folder/wp-content/plugins/you-plugin-folder-name/ ) y ejecute:

Creará una nueva carpeta llamada vendor que contiene un número de otras librerías - la librería PHP de Nexmo incluida. Para incluir la Biblioteca en su plugin, simplemente añada esta línea al archivo PHP raíz de su plugin:

require_once plugin_dir_path( __FILE__ ) . 'vendor/autoload.php';

Inicialización de la clase Nexmo

Antes de poder realizar cualquier llamada con la librería PHP de Nexmo, necesitas inicializar la Clase Nexmo y utilizar el objeto cliente para realizar tus peticiones posteriores:

$basic  = new \Nexmo\Client\Credentials\Basic(NEXMO_API_KEY, NEXMO_API_SECRET);
$client = new \Nexmo\Client(new \Nexmo\Client\Credentials\Container($basic));

Puede encontrar su Clave y Secreto API en la página 'Primeros pasosen el panel de control de Nexmo.

Si está utilizando la plantilla, puede realizar las siguientes modificaciones en el archivo archivo de clase pública en la carpeta /public de tu plugin. Inicializaremos la librería Nexmo en la construcción y estableceremos el objeto cliente como una propiedad protegida para que otros métodos de nuestra clase pública puedan acceder a él:

class Nexmo_Wc_Sms_Order_Status_Notification_Public {
 
   protected $nexmo_client;
   public function __construct( $plugin_name, $version ) {
 
       $this->plugin_name = $plugin_name;
       $this->version = $version;
 
       $this->nexmo_client = new Nexmo\Client(new Nexmo\Client\Credentials\Basic(WC_SMS_ORDER_NEXMO_KEY, WC_SMS_ORDER_NEXMO_SECRET));
      
   }

Con esta configuración, hemos añadido Nexmo's Library a nuestro plugin de WordPress, y podemos acceder a todas las funciones relacionadas con la biblioteca con la propiedad class $this->nexmo_client. A continuación, vamos a escuchar los cambios de estado de pedidos WooCommerce, y vamos a enviar la notificación por SMS.

Introducción a las acciones de WordPress

La mayoría de las modificaciones que realizará en WordPress tienen que ver con la conexión de sus funciones a acciones existentes de WordPress. Acciones son funciones que se ejecutan cuando ocurre un determinado evento en WordPress. Si desea que su función se ejecute cuando se produce un evento específico, por ejemplo, cuando cambia el estado de un pedido, enganchará su función a la acción de cambio de estado del pedido.

Engancha tu función a una acción existente de esta manera:

add_action( 'action_name', 'name_of_your_function' );

Enganchar el cambio de estado de pedido de WooCommerce

Ahora que entendemos las acciones de WordPress, vamos a enganchar nuestra función que envía el SMS al evento de cambio de estado del pedido de WooCommerce, woocommerce_order_status_$STATUS_TRANSITION[to]. $STATUS_TRANSITION[to] es cualquier cambio de estado que desees escuchar. Por ejemplo, 'woocommerce_order_status_pending' activa nuestra función cuando el estado del pedido cambia a pendiente.

Aquí hay un ejemplo de código para hacer esto más claro-los estados por defecto en WooCommerce son pendiente, fallido, en espera, procesando, completado, reembolsado y cancelado, y si quisiéramos enganchar una función a cada uno de estos estados, se vería así:

add_action( 'woocommerce_order_status_pending', 'send_customer_sms_notification');
       add_action( 'woocommerce_order_status_failed', 'send_customer_sms_notification');
       add_action( 'woocommerce_order_status_on-hold', 'send_customer_sms_notification');
       add_action( 'woocommerce_order_status_processing', 'send_customer_sms_notification');
       add_action( 'woocommerce_order_status_completed', 'send_customer_sms_notification');
       add_action( 'woocommerce_order_status_refunded', 'send_customer_sms_notification');
       add_action( 'woocommerce_order_status_cancelled', 'send_customer_sms_notification');

Para limpiar el código anterior, vamos a refactorizar a sólo 3 líneas de código:

class Nexmo_Wc_Sms_Order_Status_Notification_Public {
 
   protected $nexmo_client;
 
  
   public function __construct( $plugin_name, $version ) {
 
       $this->plugin_name = $plugin_name;
       $this->version = $version;
 
       foreach ( array( 'pending', 'failed', 'on-hold', 'processing', 'completed', 'refunded', 'cancelled' ) as $status ) {
           add_action( 'woocommerce_order_status_'. $status, array( $this, 'send_customer_sms_notification' ) );
       }
       $this->nexmo_client = new Nexmo\Client(new Nexmo\Client\Credentials\Basic(WC_SMS_ORDER_NEXMO_KEY, WC_SMS_ORDER_NEXMO_SECRET));
      
   }

A continuación, crearemos nuestra función send_customer_sms_notification que enviará el SMS a través de Nexmo SMS.

Envío del SMS

Esta parte es bastante sencilla: enganchando nuestra función a la acción de estado del pedido de WooCommerce, obtenemos el ID del pedido, que podemos utilizar para obtener los detalles del pedido y enviar el SMS.

   public function send_customer_sms_notification( $order_id ) {
       $order = wc_get_order( $order_id );
       $order_status = $order->get_status();
       $phone_number   = method_exists( $order, 'get_billing_phone' ) ? $order->get_billing_phone() : $order->billing_phone;
   }

De lo anterior, usamos el ID del Pedido para obtener el objeto Pedido llamando a la función de WooCommerce wc_get_order()y con el objeto Pedido, obtenemos el estado (este es el nuevo estado que se acaba de actualizar) y el número de móvil del cliente. Con toda esa información, estamos listos para enviar el SMS.

Utilizaremos el fragmento de la documentación de Nexmo para enviar un SMS. Sin embargo, en nuestro caso, la variable $client será la propiedad $nexmo_client que establecimos anteriormente en nuestro constructor:

public function send_customer_sms_notification( $order_id ) {
       $order = wc_get_order( $order_id );
       $order_status = $order->get_status();
       $phone_number   = method_exists( $order, 'get_billing_phone' ) ? $order->get_billing_phone() : $order->billing_phone;
       $message =  "Your order #".$order_id." status has been updated to ".$order_status;
      
       try {
           $message = $this->nexmo_client->message()->send([
               'to' => $phone_number,
               'from' => WC_SMS_ORDER_NEXMO_SENDER_NAME,
               'text' => $message
           ]);
           $response = $message->getResponseData();
      
           if($response['messages'][0]['status'] == 0) {
               $order_note = "Customer notified on order status change to ".$order_status." via SMS (".$phone_number.")";
           } else {
               $order_note = "Unable to notify customer on order status change via SMS. Error:". $response['messages'][0]['status'];
           }
       } catch (Exception $e) {
           $order_note = "Unable to notify customer on order status change via SMS. Error:". $e->getMessage();
       }
       $order->add_order_note( $order_note );
   }

Para dar visibilidad a los mensajes enviados, también añadiremos una nota al pedido con la función de WooCommerce add_order_note(). Estas notas se pueden ver a través de la administración:

notes in admin

Para probarlo todo, simplemente haz un pedido en tu tienda WooCommerce, navega al admin y cambia el estado del pedido a cualquier otro, y deberías recibir el SMS con el nuevo estado.

sms demo

Aquí hay un enlace al archivo público completo de la clase.

Conclusión

En este tutorial, hemos aprendido los conceptos básicos de la construcción de un plugin de WordPress, cómo integrar la Biblioteca PHP Nexmo, y cómo utilizar el SMS API de Nexmo para enviar un SMS cuando cambia el estado de un pedido WooCommerce.

Espero que esto te haya sido de gran ayuda; puedes consultar el código completo en GitHub a través de este enlace.

Gracias por leerme.