4 criterios de orden

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.

Crea una cuenta y continúa aprendiendo 🚀

4 criterios de orden

Filtro por categoría y opciones de orden

Nueva necesidad del usuario

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

Opción 2: Tener cuatro botones

Nuevo componente `OrderOptions`

Estado `order`

Agregar acciones

Actualizar lógica en el getter

Orden inicial

Nombres visibles

Combinación de condiciones

Crea una cuenta y continúa aprendiendo 🚀

4 criterios de orden

Filtro por categoría y opciones de orden

Nueva necesidad del usuario

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

Opción 2: Tener cuatro botones

Nuevo componente OrderOptions

Estado order

Agregar acciones

Actualizar lógica en el getter

Orden inicial

Nombres visibles

Combinación de condiciones

Nuevo componente `OrderOptions`

Estado `order`