Enviar orden con detalles del carrito

En la lección anterior ya hemos descrito cómo funciona la API de WhatsApp a través de esta URL que nos permite generar un link para enviar un mensaje. Ahora vamos a integrar ello sobre nuestro proyecto para que el mensaje se genere cuando se haga clic en “Realizar Pedido”. Para esto, nosotros vamos a definir un nuevo “getter” asociado a nuestro carrito de compras. Actualmente tenemos dos getters. Uno determina la cantidad de unidades en total de todos los productos agregados. Otro determina el total a pagar. Y vamos a agregar un getter más que se va a llamar “whatsAppMessage”. Aquí nosotros vamos a usar el “state”, o sea nuestros detalles para generar un mensaje codificado. O sea que lo que vamos a estar devolviendo es el resultado de “encodedURI” de nuestro mensaje. Para esto tenemos que definir nuestro mensaje. Aquí puedes escribir lo que desees. Vamos a poner por ejemplo “Hola, quiero realizar la siguiente compra”. Aquí vamos a iterar sobre “state.Details” usando “forEach” por cada detalle, vamos a agregar una línea más a nuestra variable “message”. Aquí vamos a poner un salto de línea, de hecho, vamos a poner aquí doble salto de línea. Vamos a concatenar sobre nuestro mensaje una cadena que dirá “producto”. Vamos a poner aquí el producto que sería “d.product.name”, vamos a concatenar la cantidad que queremos comprar, que sería “d.quantity”. Vamos a poner por aquí el subtotal que sería “d.quantity*d.product.price”, y ponemos aquí el símbolo de dólar al inicio. Nótese que en este caso estamos usando estas comillas angulares para que podamos usar interpolación, es decir, insertar dentro de una cadena expresiones. De esta manera, cuando se resuelve todo esto, esta parte es reemplazada por su valor que corresponde. No olvidemos siempre poner un “\n” para agregar un salto de línea entre estos elementos y como vamos a pasar aquí al siguiente producto, vamos a poner aquí algunos guiones. Esto se va a repetir por cada producto que tenemos. Finalmente vamos a agregar un mensaje final con el total a pagar. ¿Cómo podemos calcular el total a pagar? No es necesario hacerlo porque ya lo tenemos calculado. Simplemente que imprimir aquí nuestro getter de “totalAmount”. Usando “this”. Nosotros podemos usar “this.” seguido del getter que nos interesa para acceder a esta información desde otro getter. Sin embargo, hay que tener cuidado para que este “this” funcione, tenemos que definir nuestro getter con la sintaxis tradicional de las funciones, no con “arrow functions”, porque cuando se usa arrow functions esta variable “this” hace referencia a otro contexto. Entonces vamos a cambiar la sintaxis para que se defina la función. De esta manera. Estos dos getter de arriba están definidos con una notación de arrow function, este otro getter también funciona, solo que estamos usando la sintaxis tradicional con que se definen funciones y esta es la recomendada cuando vamos a acceder a “this”. Por ejemplo, en este caso para tener acceso a otro getter. En este caso vamos a hacer el intento de agregar incluso emojis a nuestro mensaje. Hasta aquí vamos a guardar y la idea es verificar que esto funcione. ¿De qué manera podemos probar esto? Pues tenemos que hacer uso de este getter desde el botón “Realizar pedido”. Este botón se encuentra dentro de nuestro componente llamado “Resumen”. Tenemos un componente llamado “Summary cart”, que es una tarjeta resumen La idea es que este botón abra un enlace, en este caso el componente V-btn de Vuetify Nos permite definir una propiedad llamada “href” como si se tratase de un enlace. Entonces vamos a definir este “href”. Vamos a poner por aquí “href=” Específicamente vamos a acceder a una computer property que se va a llamar WhatsApp Link. Tenemos que definir otro “getter” porque este getter se encarga de definir el mensaje. Pero nos interesa generar una URL completa. Por lo tanto, vamos a crear un getter más. Vamos a llamar “whatsAppLink”. En este caso, vamos a devolver la URL que antes hemos revisado “wa.me” seguido del número telefónico que va a tener los pedidos. Por ejemplo, digamos que es este “?text-”. El texto lo vamos a obtener desde otro getter. El otro getter es “whatsAppMessage”. Usamos WhatsApp Menssaje para generar WhatsApp link. Al final lo que nuestro componente va a usar es el getter “whatsAppLink”. Simplemente tenemos que mapear este “state” aquí en nuestra sección de computed para tener acceso. Bien, volvemos al navegador y le damos clic a “realizar pedido”. Aquí pasó algo bastante curioso, vemos que nos está redirigiendo a una ruta WhatsApp Link. Esto es porque se está entendiendo que “whatsAppLink” es un valor literal, no se está interpretando la variable, no se está accediendo a la computed property. Siempre que queramos usar el valor de una variable, tenemos que poner los dos puntos. Guardamos, volvemos al navegador, actualizamos y vamos a usar el botón “Realizar pedido”. Bien, esto nos lleva a esta página de tal manera que, si nosotros continuamos y vamos a WhatsApp web, terminamos con este contenido: “Hola, quiero realizar la siguiente compra”, “producto” tal, “cantidad: 1”, “subtotal: 20”. Otro producto: “producto silla”, “cantidad: 1”, “subtotal 56 ”, “Total a pagar 76”. Lamentablemente nuestro emoji no ha aparecido y nos estamos dando cuenta que nos faltan algunos saltos de línea, aquí, específicamente luego de los guiones. Entonces vamos a corregir ello aquí. Luego de estos guiones vamos a poner un salto de línea y de hecho vamos a agregar también unos guiones al inicio antes de empezar la interacción. Tal como ya comentamos, este “wa.me” termina haciendo una redirección a otra URL que es la API de WhatsApp. Específicamente hablamos de esta URL. Nosotros podemos usar este otro formato también. Funciona de manera muy similar, solo que aquí el teléfono va como un core parameter llamado “phone” y el texto sigue como un core parameter llamado “text”. Solo que como ahora tenemos dos core paramenter en necesario usar un ampersand. Vamos a probar con esto para ver si de esta manera nos funciona el emoji. El último cambio que nos interesa probar también es poner aquí un “target_blank” para que el enlace se abra en otra página, no en la misma Entonces vamos a actualizar. Estamos aquí, le damos clic a “Realizar pedido” y WhatsApp se abrirá en otra página. Podemos aún volver a la página anterior en caso que queramos modificar nuestro pedido, pero ya se generó este enlace. Le daremos clic a “continue to chat”, “use WhatsApp Web” y este es el resultado final. ¿Sí? “Hola, quiero realizar la siguiente compra.” Tenemos aquí un salto de línea, otro salto de línea, guiones el producto que nos interesa en la cantidad que nos interesa, el subtotal, otro producto, otra cantidad, otro subtotal y el total a pagar. Al total a pagar nos falta ponerle un dólar y luego tenemos el mensaje final con el emoji. Esto quiere decir que la otra URL es más corta. Si no vas a usar emojis es recomendable la URL de más corta, pero si vas a usar emojis parece que de alguna manera la redirección terminaba afectándole mucho, porque si pasamos el mismo texto codificado de la misma manera a este “api.whatsapp.com/send” sí que lo reconoce apropiadamente. Vamos a agregar por aquí el dólar que nos faltaba y con esto ya teníamos nuestro proyecto funcionando correctamente.

Crea una cuenta y continúa aprendiendo 🚀

Enviar orden con detalles del carrito

Preguntas en esta lección

Limpiar el state details