Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Enviar orden con detalles del carrito
Veamos cómo concretar un pedido, enviando los detalles del carrito de compras, a través de un mensaje de WhatsApp. Veamos cómo personalizar el mensaje con saltos de línea y emojis.
Integración de la API de WhatsApp en el proyecto
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”.
Nuevos getters en el 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.
Vamos a agregar un getter más que se va a llamar whatsAppMessage.
Aquí vamos a usar el state, o sea nuestros detalles, para generar un mensaje codificado.
Lo que vamos a estar devolviendo es el resultado de encodedURI de nuestro mensaje.
Definición del mensaje
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, doble salto de línea.
Vamos a concatenar sobre nuestro mensaje una cadena que dirá “producto”.
Vamos a poner el producto que sería d.product.name.
Concatenamos la cantidad: d.quantity.
Luego el subtotal: d.quantity * d.product.price.
Ponemos aquí el símbolo de dólar al inicio.
Estamos usando comillas angulares para usar interpolación, es decir, insertar dentro de una cadena expresiones.
De esta manera, esta parte es reemplazada por su valor correspondiente.
No olvides poner un \n para agregar un salto de línea entre estos elementos.
Como vamos a pasar al siguiente producto, agregamos algunos guiones.
Esto se repite por cada producto que tenemos.
Agregando el total a pagar
Finalmente agregamos un mensaje final con el total a pagar.
No es necesario calcularlo porque ya lo tenemos calculado.
Simplemente imprimimos el getter totalAmount usando this.
Podemos usar this. seguido del getter que nos interesa.
Importante sobre el uso de this
Para que this funcione, debemos definir el getter con sintaxis tradicional de funciones.
No uses arrow functions, ya que this en ese contexto refiere a otra cosa.
Vamos a cambiar la sintaxis a funciones tradicionales.
Los otros getters usan arrow function, este nuevo debe usar la sintaxis tradicional.
Esta es la recomendada cuando accedes a this, por ejemplo, para acceder a otro getter.
Agregando emojis y verificaciones
Vamos a intentar agregar emojis a nuestro mensaje.
Guardamos y verificamos que esto funcione.
¿Cómo probamos esto?
Debemos hacer uso de este getter desde el botón “Realizar pedido”.
Este botón está en el componente llamado “Resumen”.
Tenemos un componente llamado Summary cart, que es una tarjeta resumen.
La idea es que este botón abra un enlace.
El componente V-btn de Vuetify permite definir una propiedad href como un enlace.
Vamos a definir este href.
Vamos a acceder a una computed property llamada whatsAppLink.
Generando la URL completa
Tenemos que definir otro getter porque whatsAppMessage solo genera el mensaje.
Nos interesa generar una URL completa.
Vamos a crear un getter más llamado whatsAppLink.
Vamos a devolver la URL wa.me seguido del número telefónico.
Por ejemplo: ?text-
El texto lo obtenemos desde el getter whatsAppMessage.
Usamos whatsAppMessage para generar whatsAppLink.
El componente usará el getter whatsAppLink.
Solo mapeamos este state en la sección computed para tener acceso.
Pruebas y solución de errores
Volvemos al navegador y hacemos clic en “Realizar pedido”.
Aquí vemos que nos redirige a una ruta WhatsApp Link.
Esto sucede porque se interpreta como un valor literal.
No se accede a la computed property.
Para usar el valor de una variable, debemos poner los dos puntos.
Guardamos, actualizamos y usamos el botón.
Esto nos lleva a WhatsApp Web con el mensaje.
Ejemplo de 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”
Ajustes finales
El emoji no apareció.
Faltan algunos saltos de línea luego de los guiones.
Vamos a corregir eso: agregamos salto de línea luego de los guiones.
También agregamos guiones al inicio antes de empezar la interacción.
Alternativas de URL para WhatsApp
El dominio wa.me redirige a la API de WhatsApp.
Podemos usar otro formato de URL:
- Usamos
api.whatsapp.com/send - El teléfono va como parámetro
phone - El texto como parámetro
text - Usamos
¶ unir los parámetros
Vamos a probar esto para ver si funciona el emoji.
Último cambio
Agregamos target="_blank" para abrir el enlace en otra página.
Actualizamos, clic en “Realizar pedido” y WhatsApp se abrirá en otra pestaña.
Podemos volver a la página anterior si queremos modificar el pedido.
El enlace se genera correctamente.
Clic en “continue to chat”, “use WhatsApp Web” y este es el resultado final:
- “Hola, quiero realizar la siguiente compra.”
- Salto de línea
- Guiones
- Producto, cantidad, subtotal
- Otro producto, cantidad, subtotal
- Total a pagar (falta poner el símbolo de dólar)
Mensaje final con el emoji.
Esto indica que la otra URL es más corta.
Recomendación
- Si no vas a usar emojis, es recomendable la URL corta.
- Si vas a usar emojis, usa
api.whatsapp.com/sendporque los interpreta mejor.
Agregamos el símbolo de dólar al total y el proyecto funciona correctamente.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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.
Preguntas en esta lección
Limpiar el state details
Publicado por Yaneth Ramirez · hace 1 añoHola Profesor, muchas gracias por este gran curso. Tengo dudas con respecto a la limpieza del state de los detalles de carrito de compras una vez que hemos enviado el mensa...
3
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript