Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

4 criterios de orden

Veamos cómo ordenar en base al precio y al nombre, tanto de manera ascendente como descendente, sin afectar el filtro por categorías.

Filtro por categoría y opciones de orden

Ya tenemos un filtro por categoría.

También opciones para ordenar productos por precio o por nombre.

Nueva necesidad del usuario

¿Qué pasa si un usuario quiere ver productos de la categoría oficina ordenados por precio, pero de mayor a menor?

Actualmente no es posible.

Vamos a implementarlo.

Opción 1: Usar el mismo botón para múltiples propósitos

El botón de “por precio” puede servir como:

  • Primer clic: menor a mayor.
  • Segundo clic: mayor a menor.
  • Tercer clic: elimina el orden aplicado.

Lo mismo para el nombre:

  • Primer clic: A a Z.
  • Segundo clic: Z a A.

Este botón invocará una action.

En esa acción se pondrá la lógica deseada.

Opción 2: Tener cuatro botones

Para no complicar al usuario:

  • Cuatro botones, uno por criterio.

Así se selecciona directamente sin múltiples clics.

Nuevo componente OrderOptions

Agregar dos funciones más:

  • por precio menor a mayor.
  • por precio mayor a menor.

Respecto a nombre:

  • De la A a la Z.
  • De la Z a la A.

Cuatro acciones en total:

  • orderByPrice
  • orderByPriceDesc
  • orderByName
  • orderByNameDesc

Estado order

Cuatro valores posibles:

  • price
  • price desc
  • name
  • name desc

Agregar acciones

Agregar en el store:

  • orderByPriceDesc
  • orderByNameDesc

Están en rojo porque aún no están definidas.

Actualizar lógica en el getter

Si order es price, mantener tal cual.

Si es price desc, usar B - A para invertir.

Si es name desc, comparar B con A.

Orden inicial

Al cargar la página:

  • Suponer que el usuario quiere ordenar por precio, de menor a mayor.
  • Usar valor inicial price.

Nombres visibles

Texto no se muestra completamente.

Cambiar nombres:

  • “Ordenar por”
  • “Nombre”
  • “Precio”

Aún así puede no mostrarse bien.

Usar nombres más cortos:

  • “Más económico”
  • “Más costoso”

Si está en “más económico” y se quiere cambiar, se invierte.

De A a Z, o de Z a A.

Combinación de condiciones

Se pueden combinar:

  • Categoría
  • Nombre

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Ya tenemos nosotros un filtro por categoría y además opciones que nos permiten ordenar los productos por precio o por nombre. ¿Qué ocurre, sin embargo, si un usuario quiere consultar los productos de la categoría “oficina”, quiere ordenarlos por precio, pero no de menor a mayor, sino de mayor a menor? Actualmente no hay forma de lograr ello. Entonces vamos a implementarlo. Una opción sería que este botón de “por precio” sirva como un todo, o sea que cuando se haga click sea de menor a mayor. Si se le hace otro click, sea de mayor a menor. Podemos usar el mismo botón para ambos propósitos, de tal manera que si se hace un tercer click se desaparezca este "orden" que se estaba aplicando. Si siendo la misma idea, podríamos tener este botón como múltiples propósitos. Se le da un primer click, ordena de la A a la Z, se le da otro click. Ordena de la Z a la. Esa sería una forma de implementarlo. Y no hay problema porque este botón simplemente va a invocar un "action" y en nuestro "action" podemos poner la lógica que queramos para el orden de los productos. Esa es una forma de implementarlo. Otra forma seria tener cuatro opciones: dos con relación al precio y dos con relación a nombre. Uno diciendo “de menor a mayor” y otro diciendo “de mayor a menor”. En este caso, para no complicar al usuario, vamos a tener cuatro botones para que a un solo click en el que le interesa. Y no estoy haciendo varios clicks. Entonces aquí en nuestro nuevo componente llamado "OrderOptions", vamos a agregar dos funciones más que podemos llamar a esto “por precio” menor a mayor. Luego vamos a tener otro “por precio” de mayor a menor. Y respecto a “por nombre”, vamos a tener de la A a la Z y de la Z la A. Vamos a tener cuatro acciones: “orderByPrice”, “orderByPriceDesc”. O sea, para ordenar de manera descendente, vamos a tener “orderByName” y “orderByNameDesc” para invertir el orden. Esto significa que vamos a tener cuatro valores posibles para nuestro estado “order”. Entonces aquí vamos a poner “price”. El siguiente se llamará “price desc”, vamos a tener “name” no aceptar “name desc”. Para que esto funcione, tenemos que aceptar dos acciones más. Por lo tanto, vamos a agregar "orderByPriceDesc" y vamos a agregar “orderByNameDesc”. Aparece resaltado de color rojo porque estas acciones nuevas todavía no se han definido. Nos dirigimos entonces a nuestro "store" y vamos a agregar dos acciones nuevas. Vamos a agregar “orderByPriceDesc” y “orderByNameDesc”. La única diferencia hemos dicho es que ambos terminan en “desc” para indicar que queremos un orden descendente. Entonces luego en nuestro "getter" tenemos que actualizar nuestra lógica. Si el valor de “order” simplemente “price” lo dejamos tal cual. Pero si es “PriceDesc”, vamos a restar “B-A”. De esta manera invertimos el orden y si queremos de manera alfabética, pero con orden inverso, entonces aquí pondremos B comparado con A, y hasta aquí guardamos. Ya que estamos aquí, vamos a definir un orden inicial para cuando un usuario entre por primera vez en la página. Vamos a suponer que los usuarios están interesados en ordenar por precio, empezando por el menor. Entonces aquí escribiremos "price". Si hacemos esto, al ingresar a la página por defecto, ya vendrá marcada esta opción que dice “por precio de menor a mayor”. Pero se puede cambiar de mayor a menor. Se puede ver por orden alfabético o por nombre también, pero yendo desde la Z a la A. Si tenemos ahora cuatro criterios, en realidad sólo dos atributos. Pero como tenemos un orden inverso, en total tenemos cuatro criterios para ordenar. Como vemos aquí, este texto no alcanza a mostrarse. Podemos usar otros nombres. Aquí vamos a poner, por ejemplo, “ordenar por”. Y aquí vamos a escribir “nombre”. Y aquí vamos a escribir “precio”. Como de igual forma no se alcanza a mostrar. Vamos a poner nombres más cortos. Por ejemplo, “más económico” y aquí “más costoso”. Ahora, si está ordenado actualmente por el más económico, si queremos ver el más costoso, es simplemente lo inverso. Si queremos ver de la A a la Z, tenemos esta opción o el orden inverso también está aquí. Y como vemos estamos mezclando ambas condiciones. Uno es con relación a la categoría y el otro es con relación al nombre.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos






































































































102

4 criterios de orden






















Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.