Carrito vacío: Mensaje y RouterLink

Actualmente cuando el carrito de compra se encuentra vacío, el título dice productos agregados al carrito pero no hay nada más. Si un usuario visita directamente esta página probablemente no entienda qué es lo que está pasando. Lo que vamos a hacer entonces es agregar aquí un mensaje, pero lo vamos a mostrar solo cuando no hay productos. Para ello nos dirigimos al componente cart y nos dirigimos específicamente a la sección template. Esta sección template contiene un v-cart text. Este v-cart text es el contenido de nuestro cart y contiene un view list. La idea es que sigamos mostrando el v-list. Sin embargo, no queremos mostrarlo siempre. Vamos a mostrarlo solo si es que hay items en el carrito. ¿Cómo podemos saber ello? Este componente tiene acceso a una computed property llamada details. Entonces basta con preguntar "details.length". Si "details.length" es mayor que cero, mostraremos esta lista. De caso contrario, vamos a mostrar un párrafo. Para ello le ponemos un v-else y lo que vamos a mostrar aquí es un mensaje que dirá lo siguiente: "Aún has agregado productos a tu carrito de compras. Haz clic aquí para ver los productos disponibles." Aún has agregado items a tu carrito de compras, haz clic aquí para ver los productos disponibles. Este clic aquí lo vamos a poner dentro de un "a href", para que represente un enlace. Guardamos y aquí tenemos el mensaje. Aún no has agregado items a tu carrito de compras, haz clic aquí para ver los productos disponibles. Si alguien agrega un elemento, este texto ya nos mostrará y en cambio tendremos la lista de productos. ¿De qué manera podemos, sin embargo, hacer funcionar este enlace? Este enlace actualmente solo está haciendo un recargo de página. Esto se debe a que no tiene nada definido. Cuando un "a href" no tiene ningún valor se genera un enlace hacia la misma página. Nosotros queremos que este enlace lleve al usuario hacia la página de home. ¿Cómo podemos generar un enlace usando nuestras rutas de Vue? Eso es algo que ya hemos visto anteriormente. Podemos recordarlo visitando nuestro top bar component. Como se ve, nosotros estamos haciendo uso de un router link. La etiqueta router link nos permite generar enlaces hacia rutas. La propiedad "to" indica hacia qué ruta queremos enviar a un usuario. Para este caso en especial nosotros habíamos usado la propiedad custom y un v slot para que este router link no genere una etiqueta "a". Porque dicha etiqueta "a" estaba modificando los estilos de nuestros botones. Sin embargo, en este caso sí queremos usar un enlace. Por lo tanto, ¿cómo usamos el router link? Es tan sencillo como simplemente agregar esto de aquí, ¿sí? Allí está, router link. Para que esto funcione tenemos que agregar un import a nuestro componente Cart, ¿sí? Agregamos el import en la parte superior, y en este caso el "to", nos debe llevar a la ruta de inicio, que en este caso sería un slash. Guardamos y le damos clic a este enlace. Como vemos, eso nos lleva la ruta de inicio. Podemos volver a Cart y usar este enlace para regresar aquí, ¿sí? Si quieres puedes escribir este Router Link también de esta otra manera, como habíamos comentado en un inicio, ¿sí? Y de igual manera seguirá funcionando. Vue nos permite escribir los componentes con ambos formatos. Vue nos permite escribir los componentes ya sea con una mayúscula al inicio de cada palabra, o bien todo en minúsculas, y separando con un guión.

Crea una cuenta y continúa aprendiendo 🚀

Carrito vacío: Mensaje y RouterLink

Problema del carrito vacío

Modificación en el componente Cart

Verificación de productos en el carrito

Implementación del enlace

Uso de Router Link en Vue

Implementación del Router Link

Ajustes en el código

Alternativa de escritura