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
Relación: Product & Category
En esta lección clasificamos a nuestros productos por categorías, agregamos imágenes a todos los productos que faltaban, y agregamos una descripción a cada categoría.
Agregar Categorías a Nuestro Proyecto
En este módulo, vamos a agregar categorías a nuestro proyecto para que los productos pertenezcan a una categoría y puedan filtrarse por ella.
Agregar Imagen a Cada Producto
Lo primero que haremos será agregar una imagen a cada producto. Actualmente, tenemos seis productos.
De manera local, en la carpeta public, debes crear una carpeta products y situar una imagen para cada uno de los productos.
Para facilitar el proceso, se adjuntan estos recursos en esta lección. Si estás desarrollando un sistema para un restaurante o vendiendo productos o servicios, puedes adaptar este método agregando imágenes de lo que estás vendiendo y referenciándolas en el proyecto.
Definir las Categorías
Actualmente, tenemos las categorías definidas en el componente CategoryList y los productos en ProductList.
Para cada objeto product, indicaremos cuál es la imagen local correspondiente.
Ejemplo:
- La silla se encuentra dentro de
productsy se llamasilla.webp. - El monitor tiene extensión JPG y sigue el mismo patrón.
Como todas las imágenes están en la carpeta products, tendrán este prefijo en su ruta.
Al actualizar el valor del atributo image, nuestro proyecto cargará la imagen correcta para cada producto.
Asignar una Categoría a Cada Producto
Aprovechando que modificamos la información de los productos, agregaremos una categoría a cada uno de ellos.
Por ahora, trabajaremos con dos categorías:
- Primera categoría:
Id:1 - Segunda categoría:
Id:2
Cambiaremos los nombres de las categorías:
-
Categoría 1:
oficina -
Categoría 2:
computadora
También agregaremos una descripción:
- Oficina: "productos para tu oficina"
- Computadora: "accesorios para computadora"
El sistema resalta un error porque category es un type que no tiene description, por lo que debemos agregarlo.
Ahora, category tendrá id, name y description.
Modificar el Tipo product
Agregaremos categoryId a product, que debe ser un número indicando a qué categoría pertenece cada producto.
Asignación de Categorías
- Oficina (Id:1): silla, monitor y parlantes.
- Computadora (Id:2): micrófono, audífonos y mouse gamer.
Guardamos los cambios y aseguramos que, al hacer clic en la categoría "oficina", solo se muestren productos de esa categoría.
URL Dinámica para Filtrar por Categoría
Queremos que la URL refleje la categoría seleccionada.
Si alguien desea compartir una categoría con otra persona para recomendarle un producto, la URL debe representar solo los productos de esa categoría.
Cuando se elija una categoría, la URL se actualizará dinámicamente y el listado mostrará solo los productos correspondientes.
Esta lección cuenta con 1 recursos adicionales:
En este módulo vamos a agregar categorías a nuestro proyecto, de tal manera que los productos pertenezcan a una categoría y pueden filtrarse por categoría. Entonces, lo primero que vamos a hacer es agregar una imagen a cada producto. Tenemos de momento seis productos y aquí de manera local, en la carpeta "public", debes crear una carpeta "products" y situar una imagen para cada uno de tus productos. De todas formas, yo voy a adjuntar a esta lección estos recursos para que los puedas descargar, para que puedas avanzar más rápido si estás aprendiendo. Pero si estás vendiendo productos o algún servicio, o tal vez estás desarrollando algún sistema para un restaurante, esto se adapta bastante bien. Basta con que agregues aquí imágenes de lo que estás vendiendo y que luego hagas referencia de estas imágenes desde el proyecto. Por ahora nosotros tenemos las categorías definidas en el componente "CategoryList" y tenemos los productos definidos en el componente "ProductList". Lo que vamos a hacer es simplemente indicar para cada objeto “product” cuál es la imagen local que se corresponde. Por ejemplo, la silla se encuentra dentro de "products" y se llama “silla.webp”. En el caso del monitor, el monitor tiene extensión JPG y la misma idea. Repetimos entonces para todos los productos, como todos están dentro de una carpeta "products", tendrán este prefijo. Luego de utilizar los valores para el atributo "image", actualizamos y nuestro proyecto cargará la imagen correspondiente a cada producto. Aprovechando que estamos modificando la información de los productos, vamos a agregarle una categoría a cada uno de ellos. Por ahora vamos a trabajar sólo con dos categorías. Tú puedes crear más a la primera categoría, le pondré “Id:1” y a la segunda le pondré “Id:2”. Pero voy a cambiar el nombre de las categorías. Voy a tener una categoría "oficina" y voy a tener una categoría "computadora". De hecho, vamos a agregar una descripción a cada categoría “productos para tu oficina". Y aquí vamos a poner “accesorios para computadora". Aquí nos resalta esto porque "category" es un “type” que no tiene description, así que vamos a agregarle si tenemos “id”, “name” y “description” para el tipo "category". Bien, lo siguiente es modificar nuestro tipo “product” para que tenga un "categoryId". Este "categoryId" debe ser un número indicando a qué categoría pertenece cada producto y entonces vamos a agregarle una categoría a cada producto. Bien, en la categoría de "oficina" vamos a poner los productos más grandes. Por ejemplo, una silla es de "oficina", un monitor es de "oficina" y los parlantes también son de "oficina". En cambio, la categoría dos, que son accesorios para "computadora", incluirá micrófono, audífonos y mouse gamer. Guardamos y la idea es que cuando se haga clic sobre la categoría "oficina", veamos sólo productos de dicha categoría. También queremos que la URL refleje eso, de tal manera que, si alguien quiere compartir una categoría con otra persona, un familiar o un amigo para recomendarle que compre algo, pueda hacerlo. Cuando se escoja una categoría, vamos a poner aquí una URL que va a representar sólo a productos de dicha categoría y el listado se actualizará conforme a ello.
¿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