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.