0

Estoy realizando un filtrado de una lista de productos por medio de un select. Y lo que quiero es ordenarla por medio del precio, de mayor a menor, o viceversa.

Sin embargo, tengo inconvenientes al organizarla, puesto que el método funciona para listar los precios de manera ordenada, pero quiero es listar toda la descripción del producto desde el tag article, y esta sea ordenada por medio de su precio.

Esta es la estructura que lleva cada producto.

<div id="listProducts">
                    <article class="card card-product-list" data-category="Servicios" data-condicion="Nuevo">
                        <div class="row no-gutters">
                            <aside class="col-md-3">
                                <a href="#" class="img-wrap">
                                    <span class="badge badge-danger"> Nuevo </span>
                                    <img src="images/items/10.jpg">
                                </a>
                            </aside> <!-- col.// -->
                            <div class="col-md-6">
                                <div class="info-main">
                                    <a href="#" class="h5 title"> Nombre del producto </a>
                                    <p class="mb-2"> 10 unidades <small class="text-muted">(Stock disponible)</small>
                                    </p>
                                    <p class="mb-2"> 1 unidad <small class="text-muted">(Ordén minima)</small></p>
                                    <p class="text-muted "> Plannerp industrias</p>
                                </div> <!-- info-main.// -->
                            </div> <!-- col.// -->
                            <aside class="col-sm-3">
                                <div class="info-aside">
                                    <div class="price-wrap">
                                        <span class="h5 price">$30000</span>
                                        <small class="text-muted">/ por únidad</small>
                                    </div> <!-- price-wrap.// -->
                                    <hr>
                                    <p class="mt-3 text-center">
                                        <a href="#" class="btn btn-outline-primary"><i style="font-size: 18px;"
                                                class="icofont-eye-alt"></i> Detalle</a>
                                        <a href="#" class="btn btn-outline-secondary"><i class="fa fa-heart"></i>
                                            Favorito
                                        </a>
                                    </p>
                                </div> <!-- info-aside.// -->
                            </aside> <!-- col.// -->
                        </div> <!-- row.// -->
                    </article> <!-- card-product .// -->

Y mi js es el siguiente:

 const prices = document.querySelectorAll(':scope .price-wrap .price'); //Para que la búsqueda siga esa estructura
const listProducts = document.getElementById('listProducts');
let selectPriceLarge = document.getElementById('selectPriceLarge');
selectPriceLarge.addEventListener('change', () => {

    let indice = selectPriceLarge.selectedIndex;
    let isAsc = false;
    
    function sort() {
        var arrayLIs = Array.from(prices);
        if (!isAsc) {
            arrayLIs = arrayLIs.sort(compare);
        }
        listProducts.innerHTML = "";
        for (var i = 0; i < arrayLIs.length; i++) {
            listProducts.appendChild(arrayLIs[i]);
        }
    }

    if (indice == "1") {
        sort();
    }

});

function compare(a, b) {

    if ( Number(a.textContent.substring(1)) <  Number(b.textContent.substring(1))){
        return -1;
    } else if (Number(a.textContent.substring(1)) > Number(b.textContent.substring(1))) {
        return 1;
    } else {
        return 0;
    }
}

El div con id="listProducts" es el elemento padre de todos los productos.

Espero me haya hecho entender.

1 respuesta 1

0

No me funcionaba debido a que no especificaba al article que contenía la información del producto, además simplifique un poco la función. Si desean saber acerca del método sort, en este enlace pueden encontrar información. https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

El código es el siguiente.

//Menor a mayor
    function compareNum(element) {
        const arrayLIs = Array.from(articles).sort(function (a, b) {
            let compara = Number(a.querySelector(element).textContent.substring(1));
            let comparab = Number(b.querySelector(element).textContent.substring(1));

            return compara - comparab;
        });
        for (let i = 0; i < articles.length; i++) {
            listas.appendChild(arrayLIs[i]);
        }
    }

Y la función la utilizo en el evento change, pasando como parametro las clases que usa el span que contiene el precio.

let el = ":scope .price-wrap .price";
    if (indice == "0") {
        compareNum(el);
    }

Por último, si desean saber aún más sobre como ordenar contenido en una página, aquí hay otro enlace. http://thenewcode.com/905/Sorting-Page-Content-With-JavaScript

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.