Skip to content

Commit ac1b334

Browse files
AilenAlbornozAilenAlbornoz
authored
Merge pull request #12 from jap-2024-grupo2/feature/filter-price
filtrar precio
2 parents 07380ff + f1afef0 commit ac1b334

File tree

2 files changed

+169
-108
lines changed

2 files changed

+169
-108
lines changed

‎js/products.js

Lines changed: 139 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,171 @@
1-
const catID = localStorage.getItem("catID")
1+
const catID = localStorage.getItem("catID");
22
let currentProductsArray = [];
33
let minPrice = undefined;
44
let maxPrice = undefined;
55

6-
76
fetch(`https://japceibal.github.io/emercado-api/cats_products/${catID}.json`)
87
.then((res) => res.json())
98
.then(({ products, catName }) => {
9+
const categoryTitle = document.getElementById("categoryTitle");
10+
categoryTitle.textContent = catName;
1011

11-
const categoryTitle = document.getElementById('categoryTitle')
12-
categoryTitle.textContent = catName
13-
14-
currentProductsArray = products
12+
currentProductsArray = products;
1513

1614
if (products.length === 0) {
17-
showAlert("No hay productos disponibles para esta categoría")
18-
return
15+
showAlert("No hay productos disponibles para esta categoría");
16+
document.getElementById("sortAndFilterContainer").style.display = "none";
17+
return;
1918
}
20-
21-
showProductsList()
22-
})
19+
document.getElementById("sortAndFilterContainer").style.display = "block";
20+
showProductsList();
21+
});
2322

2423
function showProductsList() {
25-
const productsContainer = document.getElementById('productsContainer')
26-
productsContainer.innerHTML = ""
24+
const productsContainer = document.getElementById("productsContainer");
25+
productsContainer.innerHTML = ""; // Limpiar el contenedor antes de mostrar
2726

28-
const fragment = document.createDocumentFragment()
27+
const fragment = document.createDocumentFragment();
2928

3029
currentProductsArray.forEach(
31-
({ image, name, description, currency, cost, soldCount }) => {
32-
33-
if (minPrice == undefined || (minPrice != undefined && parseFloat(cost) >= minPrice) &&
34-
maxPrice == undefined || (maxPrice != undefined && parseFloat(cost) >= maxPrice)) {
35-
const column = document.createElement('div')
36-
column.classList.add('col-12', 'col-md-6', 'col-lg-4', 'my-3')
37-
38-
const card = document.createElement('div')
39-
card.classList.add('card', 'custom-card', 'cursor-active', 'h-100', 'w-100')
40-
card.style = 'width: 24rem;'
41-
42-
const img = document.createElement('img')
43-
img.classList.add('card-img-top')
44-
img.src = image
45-
img.alt = `Imagen de ${name}`
46-
47-
const cardBody = document.createElement('div')
48-
cardBody.classList.add('card-body', 'd-flex', 'flex-column', 'justify-content-between')
49-
50-
const cardTitle = document.createElement('h5')
51-
cardTitle.classList.add('card-title', 'card-title-h5')
52-
cardTitle.textContent = name
53-
54-
const cardDescription = document.createElement('p')
55-
cardDescription.classList.add('card-text', 'card-description', 'flex-grow-1')
56-
cardDescription.textContent = description
57-
58-
const cardPrice = document.createElement('p')
59-
cardPrice.classList.add('card-text', 'card-price', 'mt-auto')
60-
cardPrice.textContent = `${currency} ${cost}`
61-
62-
const cardSoldCount = document.createElement('p')
63-
cardSoldCount.classList.add('card-text', 'card-sold-count')
64-
cardSoldCount.textContent = `${soldCount} vendidos`
65-
66-
cardBody.append(cardTitle, cardDescription, cardPrice, cardSoldCount)
67-
card.append(img, cardBody)
68-
column.appendChild(card)
69-
fragment.appendChild(column)
30+
({ id, image, name, description, currency, cost, soldCount }) => {
31+
if (
32+
(minPrice == undefined ||
33+
(minPrice != undefined && parseFloat(cost) >= minPrice)) &&
34+
(maxPrice == undefined ||
35+
(maxPrice != undefined && parseFloat(cost) <= maxPrice))
36+
) {
37+
const column = document.createElement("div");
38+
column.classList.add("col-12", "col-md-6", "col-lg-4", "my-3");
39+
40+
const card = document.createElement("div");
41+
card.classList.add(
42+
"card",
43+
"custom-card",
44+
"cursor-active",
45+
"h-100",
46+
"w-100"
47+
);
48+
card.style = "width: 24rem;";
49+
50+
const img = document.createElement("img");
51+
img.classList.add("card-img-top");
52+
img.src = image;
53+
img.alt = `Imagen de ${name}`;
54+
img.loading = "lazy";
55+
56+
const cardBody = document.createElement("div");
57+
cardBody.classList.add(
58+
"card-body",
59+
"d-flex",
60+
"flex-column",
61+
"justify-content-between"
62+
);
63+
64+
const cardTitle = document.createElement("h5");
65+
cardTitle.classList.add("card-title", "card-title-h5");
66+
cardTitle.textContent = name;
67+
68+
const cardDescription = document.createElement("p");
69+
cardDescription.classList.add(
70+
"card-text",
71+
"card-description",
72+
"flex-grow-1"
73+
);
74+
cardDescription.textContent = description;
75+
76+
const cardPrice = document.createElement("p");
77+
cardPrice.classList.add("card-text", "card-price", "mt-auto");
78+
cardPrice.textContent = `${currency} ${cost}`;
79+
80+
const cardSoldCount = document.createElement("p");
81+
cardSoldCount.classList.add("card-text", "card-sold-count");
82+
cardSoldCount.textContent = `${soldCount} vendidos`;
83+
84+
cardBody.append(cardTitle, cardDescription, cardPrice, cardSoldCount);
85+
card.append(img, cardBody);
86+
column.appendChild(card);
87+
fragment.appendChild(column);
7088
}
7189
}
72-
)
90+
);
7391

74-
productsContainer.appendChild(fragment)
92+
productsContainer.appendChild(fragment);
7593
}
7694

7795
function sortProducts(criteria) {
78-
if (criteria === "ascPrice") {
79-
currentProductsArray.sort((a, b) => parseFloat(a.cost) - parseFloat(b.cost))
80-
} else if (criteria === "descPrice") {
81-
currentProductsArray.sort((a, b) => parseFloat(b.cost) - parseFloat(a.cost))
82-
} else if (criteria === "relevance") {
83-
currentProductsArray.sort((a, b) => parseFloat(b.soldCount) - parseFloat(a.soldCount))
96+
if (criteria === "PriceAsc") {
97+
currentProductsArray.sort(
98+
(a, b) => parseFloat(a.cost) - parseFloat(b.cost)
99+
);
100+
} else if (criteria === "PriceDesc") {
101+
currentProductsArray.sort(
102+
(a, b) => parseFloat(b.cost) - parseFloat(a.cost)
103+
);
104+
} else if (criteria === "Relevance") {
105+
currentProductsArray.sort(
106+
(a, b) => parseInt(b.soldCount) - parseInt(a.soldCount)
107+
);
84108
}
85109

86110
showProductsList();
87111
}
88112

89-
document.getElementById("sortAscPrice").addEventListener("click", function() {
90-
sortProducts("ascPrice");
91-
})
113+
document.getElementById("sortAscPrice").addEventListener("click", function () {
114+
sortProducts("PriceAsc");
115+
});
116+
117+
document.getElementById("sortDescPrice").addEventListener("click", function () {
118+
sortProducts("PriceDesc");
119+
});
120+
121+
document
122+
.getElementById("sortByRelevance")
123+
.addEventListener("click", function () {
124+
sortProducts("Relevance");
125+
});
126+
127+
document
128+
.getElementById("clearRangeFilter")
129+
.addEventListener("click", function () {
130+
document.getElementById("rangeFilterPriceMin").value = "";
131+
document.getElementById("rangeFilterPriceMax").value = "";
132+
133+
minPrice = undefined;
134+
maxPrice = undefined;
135+
136+
showProductsList();
137+
});
138+
139+
document
140+
.getElementById("rangeFilterPrice")
141+
.addEventListener("click", function () {
142+
minPrice = document.getElementById("rangeFilterPriceMin").value;
143+
maxPrice = document.getElementById("rangeFilterPriceMax").value;
144+
145+
if (minPrice != undefined && minPrice != "" && parseFloat(minPrice) >= 0) {
146+
minPrice = parseFloat(minPrice);
147+
} else {
148+
minPrice = undefined;
149+
}
92150

93-
document.getElementById("sortDescPrice").addEventListener("click", function() {
94-
sortProducts("descPrice");
95-
})
151+
if (maxPrice != undefined && maxPrice != "" && parseFloat(maxPrice) >= 0) {
152+
maxPrice = parseFloat(maxPrice);
153+
} else {
154+
maxPrice = undefined;
155+
}
96156

97-
document.getElementById("sortByRelevance").addEventListener("click", function() {
98-
sortProducts("relevance");
99-
})
157+
showProductsList();
158+
});
100159

101160
function showAlert(message) {
102-
const alertContainer = document.createElement('div')
103-
alertContainer.className = 'alert alert-warning alert-dismissible fade show'
104-
alertContainer.role = 'alert'
161+
const alertContainer = document.createElement("div");
162+
alertContainer.className = "alert alert-warning alert-dismissible fade show";
163+
alertContainer.role = "alert";
105164
alertContainer.innerHTML = `
106-
<strong>Advertencia:</strong> ${message}
107-
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
108-
`
109-
110-
// Insertar la alerta justo después del título de la categoría
111-
const categoryTitle = document.getElementById('categoryTitle')
112-
categoryTitle.insertAdjacentElement('afterend', alertContainer)
113-
}
165+
<strong>Advertencia:</strong> ${message}
166+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
167+
`;
168+
169+
const categoryTitle = document.getElementById("categoryTitle");
170+
categoryTitle.insertAdjacentElement("afterend", alertContainer);
171+
}

‎products.html

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -43,35 +43,38 @@
4343

4444
<main class="my-3 container">
4545
<h1 id="categoryTitle" class="px-6 h1-font-size py-4 category-title"></h1>
46-
<div id="filterAndSortingContainer">
47-
<div class="row">
48-
<div class="col text-end">
49-
<div class="btn-group btn-group-toggle mb-4" data-bs-toggle="buttons">
50-
<input type="radio" class="btn-check" name="options" id="sortAscPrice">
51-
<label class="btn btn-light" for="sortAscPrice"><i class="fas fa-sort-amount-down mr-1"></i> $</label>
52-
<input type="radio" class="btn-check" name="options" id="sortDescPrice">
53-
<label class="btn btn-light" for="sortDescPrice"><i class="fas fa-sort-amount-up mr-1"></i> $</label>
54-
<input type="radio" class="btn-check" name="options" id="sortByRelevance" checked>
55-
<label class="btn btn-light" for="sortByRelevance"><i class="fas fa-sort-amount-down mr-1"></i> Rel.</label>
46+
<div id="sortAndFilterContainer">
47+
<div class="container">
48+
<div class="row">
49+
<div class="col text-end">
50+
<div class="btn-group btn-group-toggle mb-4" data-bs-toggle="buttons">
51+
<input type="radio" class="btn-check" name="options" id="sortAscPrice">
52+
<label class="btn btn-light" for="sortAscPrice"><i class="fas fa-sort-amount-down mr-1"></i> $</label>
53+
<input type="radio" class="btn-check" name="options" id="sortDescPrice">
54+
<label class="btn btn-light" for="sortDescPrice"><i class="fas fa-sort-amount-up mr-1"></i> $</label>
55+
<input type="radio" class="btn-check" name="options" id="sortByRelevance" checked>
56+
<label class="btn btn-light" for="sortByRelevance"><i class="fas fa-sort-amount-down mr-1"></i>
57+
Rel.</label>
58+
</div>
5659
</div>
5760
</div>
58-
</div>
59-
<div class="row">
60-
<div class="col-lg-6 offset-lg-6 col-md-12 mb-1 container">
61-
<div class="row container p-0 m-0">
62-
<div class="col">
63-
<p class="font-weight-normal text-end my-2">Precio</p>
64-
</div>
65-
<div class="col">
66-
<input class="form-control" type="number" placeholder="min." id="rangeFilterPriceMin">
67-
</div>
68-
<div class="col">
69-
<input class="form-control" type="number" placeholder="máx." id="rangeFilterPriceMax">
70-
</div>
71-
<div class="col-3 p-0">
72-
<div class="btn-group" role="group">
73-
<button class="btn btn-light btn-block" id="rangeFilterPrice">Filtrar</button>
74-
<button class="btn btn-link btn-sm" id="clearRangeFilterPrice">Limpiar</button>
61+
<div class="row">
62+
<div class="col-lg-6 offset-lg-6 col-md-12 mb-1 container">
63+
<div class="row container p-0 m-0">
64+
<div class="col">
65+
<p class="font-weight-normal text-end my-2">Precio</p>
66+
</div>
67+
<div class="col">
68+
<input class="form-control" type="number" placeholder="min." id="rangeFilterPriceMin">
69+
</div>
70+
<div class="col">
71+
<input class="form-control" type="number" placeholder="máx." id="rangeFilterPriceMax">
72+
</div>
73+
<div class="col-3 p-0">
74+
<div class="btn-group" role="group">
75+
<button class="btn btn-light btn-block" id="rangeFilterPrice">Filtrar</button>
76+
<button class="btn btn-link btn-sm" id="clearRangeFilter">Limpiar</button>
77+
</div>
7578
</div>
7679
</div>
7780
</div>

0 commit comments

Comments
 (0)