Relación: Product & Category

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.

Crea una cuenta y continúa aprendiendo 🚀

Relación: Product & Category