Merge pull request #11 from jap-2024-grupo2/feature/ordenar-filtrar-productos

Ordenar productos asc, desc, rel

Author: alpokyra

js/products.js

@@ -1,4 +1,8 @@
 const catID = localStorage.getItem("catID")
+let currentProductsArray = [];
+let minPrice = undefined;
+let maxPrice = undefined;
+
 
 fetch(`https://japceibal.github.io/emercado-api/cats_products/${catID}.json`)
   .then((res) => res.json())
@@ -7,18 +11,27 @@ fetch(`https://japceibal.github.io/emercado-api/cats_products/${catID}.json`)
     const categoryTitle = document.getElementById('categoryTitle')
     categoryTitle.textContent = catName
 
-    const productsContainer = document.getElementById('productsContainer')
-
-    const fragment = document.createDocumentFragment()
+    currentProductsArray = products
 
     if (products.length === 0) {
       showAlert("No hay productos disponibles para esta categoría")
       return
     }
 
-    products.forEach(
-      ({ image, name, description, currency, cost, soldCount }) => {
+    showProductsList()
+  })
+
+function showProductsList() {
+  const productsContainer = document.getElementById('productsContainer')
+  productsContainer.innerHTML = ""
+
+  const fragment = document.createDocumentFragment()
 
+  currentProductsArray.forEach(
+    ({ image, name, description, currency, cost, soldCount }) => {
+
+      if (minPrice == undefined || (minPrice != undefined && parseFloat(cost) >= minPrice) &&
+        maxPrice == undefined || (maxPrice != undefined && parseFloat(cost) >= maxPrice)) {
         const column = document.createElement('div')
         column.classList.add('col-12', 'col-md-6', 'col-lg-4', 'my-3')
 
@@ -55,10 +68,35 @@ fetch(`https://japceibal.github.io/emercado-api/cats_products/${catID}.json`)
         column.appendChild(card)
         fragment.appendChild(column)
       }
-    )
-
-    productsContainer.appendChild(fragment)
-  })
+    }
+  )
+
+  productsContainer.appendChild(fragment)
+}
+
+function sortProducts(criteria) {
+  if (criteria === "ascPrice") {
+    currentProductsArray.sort((a, b) => parseFloat(a.cost) - parseFloat(b.cost))
+  } else if (criteria === "descPrice") {
+    currentProductsArray.sort((a, b) => parseFloat(b.cost) - parseFloat(a.cost))
+  } else if (criteria === "relevance") {
+    currentProductsArray.sort((a, b) => parseFloat(b.soldCount) - parseFloat(a.soldCount))
+  }
+
+  showProductsList();
+}
+
+document.getElementById("sortAscPrice").addEventListener("click", function() {
+  sortProducts("ascPrice");
+})
+
+document.getElementById("sortDescPrice").addEventListener("click", function() {
+  sortProducts("descPrice");
+})
+
+document.getElementById("sortByRelevance").addEventListener("click", function() {
+  sortProducts("relevance");
+})
 
 function showAlert(message) {
   const alertContainer = document.createElement('div')

products.html

@@ -31,7 +31,7 @@
             <a class="nav-link" href="sell.html">Vender</a>
           </li>
           <li class="nav-item">
-            <p class="userName-navBar navbar-text m-0 text-white" ></p>
+            <p class="userName-navBar navbar-text m-0 text-white"></p>
           </li>
           <li class="nav-item">
             <button onclick="logout()" class="btn btn-primary">Cerrar sesión</button>
@@ -43,6 +43,41 @@
 
   <main class="my-3 container">
     <h1 id="categoryTitle" class="px-6 h1-font-size py-4 category-title"></h1>
+    <div id="filterAndSortingContainer">
+      <div class="row">
+        <div class="col text-end">
+          <div class="btn-group btn-group-toggle mb-4" data-bs-toggle="buttons">
+            <input type="radio" class="btn-check" name="options" id="sortAscPrice">
+            <label class="btn btn-light" for="sortAscPrice"><i class="fas fa-sort-amount-down mr-1"></i> $</label>
+            <input type="radio" class="btn-check" name="options" id="sortDescPrice">
+            <label class="btn btn-light" for="sortDescPrice"><i class="fas fa-sort-amount-up mr-1"></i> $</label>
+            <input type="radio" class="btn-check" name="options" id="sortByRelevance" checked>
+            <label class="btn btn-light" for="sortByRelevance"><i class="fas fa-sort-amount-down mr-1"></i> Rel.</label>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 offset-lg-6 col-md-12 mb-1 container">
+          <div class="row container p-0 m-0">
+            <div class="col">
+              <p class="font-weight-normal text-end my-2">Precio</p>
+            </div>
+            <div class="col">
+              <input class="form-control" type="number" placeholder="min." id="rangeFilterPriceMin">
+            </div>
+            <div class="col">
+              <input class="form-control" type="number" placeholder="máx." id="rangeFilterPriceMax">
+            </div>
+            <div class="col-3 p-0">
+              <div class="btn-group" role="group">
+                <button class="btn btn-light btn-block" id="rangeFilterPrice">Filtrar</button>
+                <button class="btn btn-link btn-sm" id="clearRangeFilterPrice">Limpiar</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div id="productsContainer" class="row"></div>
   </main>