\
';
}
};
selectedPage();
currentPage == 1 ? prevButton.parentNode.classList.add('disabled') : prevButton.parentNode.classList.remove('disabled');
currentPage == pages ? nextButton.parentNode.classList.add('disabled') : nextButton.parentNode.classList.remove('disabled');
}
function selectedPage() {
var pagenumLink = document.getElementById('page-num').getElementsByClassName('clickPageNumber');
for (var i = 0; i < pagenumLink.length; i++) {
if (i == currentPage - 1) {
pagenumLink[i].parentNode.classList.add("active");
} else {
pagenumLink[i].parentNode.classList.remove("active");
}
}
};
// paginationEvents
function paginationEvents() {
var numPages = function numPages() {
return Math.ceil(productListData.length / itemsPerPage);
};
function clickPage() {
document.addEventListener('click', function (e) {
if (e.target.nodeName == "A" && e.target.classList.contains("clickPageNumber")) {
currentPage = e.target.textContent;
loadProductList(productListData, currentPage);
}
});
};
function pageNumbers() {
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
// for each page
for (var i = 1; i < numPages() + 1; i++) {
pageNumber.innerHTML += "";
}
}
prevButton.addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
loadProductList(productListData, currentPage);
}
});
nextButton.addEventListener('click', function () {
if (currentPage < numPages()) {
currentPage++;
loadProductList(productListData, currentPage);
}
});
pageNumbers();
clickPage();
selectedPage();
}
// Search product list
var searchProductList = document.getElementById("searchProductList");
searchProductList.addEventListener("keyup", function () {
var inputVal = searchProductList.value.toLowerCase();
function filterItems(arr, query) {
return arr.filter(function (el) {
return el.productTitle.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
}
var filterData = filterItems(productListData, inputVal);
searchResult(filterData);
loadProductList(filterData, currentPage);
});
// category list filter
Array.from(document.querySelectorAll('.filter-list a')).forEach(function (filteritem) {
filteritem.addEventListener("click", function () {
var filterListItem = document.querySelector(".filter-list a.active");
if (filterListItem) filterListItem.classList.remove("active");
filteritem.classList.add('active');
var filterItemValue = filteritem.querySelector(".listname").innerHTML
var filterData = productListData.filter(filterlist => filterlist.category === filterItemValue);
searchResult(filterData);
loadProductList(filterData, currentPage);
});
});
// price range slider
var slider = document.getElementById('product-price-range');
if (slider) {
noUiSlider.create(slider, {
start: [0, 2000], // Handle start position
step: 10, // Slider moves in increments of '10'
margin: 20, // Handles must be more than '20' apart
connect: true, // Display a colored bar between the handles
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to '100'
'min': 0,
'max': 2000
},
format: wNumb({ decimals: 0, prefix: '$ ' })
});
var minCostInput = document.getElementById('minCost'),
maxCostInput = document.getElementById('maxCost');
var filterDataAll = '';
// When the slider value changes, update the input and span
slider.noUiSlider.on('update', function (values, handle) {
var productListupdatedAll = productListData;
if (handle) {
maxCostInput.value = values[handle];
} else {
minCostInput.value = values[handle];
}
var maxvalue = maxCostInput.value.substr(2);
var minvalue = minCostInput.value.substr(2);
filterDataAll = productListupdatedAll.filter(
product => parseFloat(product.price) >= minvalue && parseFloat(product.price) <= maxvalue
);
searchResult(filterDataAll);
loadProductList(filterDataAll, currentPage);
});
minCostInput.addEventListener('change', function () {
slider.noUiSlider.set([null, this.value]);
});
maxCostInput.addEventListener('change', function () {
slider.noUiSlider.set([null, this.value]);
});
}
// color-filter
document.querySelectorAll("#color-filter li").forEach(function (item) {
var inputVal = item.querySelector("input[type='radio']").value;
item.querySelector("input[type='radio']").addEventListener("change", function () {
var filterData = productListData.filter(function (filterlist) {
if (filterlist.color) {
return filterlist.color.some(function (g) {
return g == inputVal;
});
}
});
searchResult(filterData);
loadProductList(filterData, currentPage);
});
});
// size-filter
document.querySelectorAll("#size-filter li").forEach(function (item) {
var inputVal = item.querySelector("input[type='radio']").value;
item.querySelector("input[type='radio']").addEventListener("change", function () {
var filterData = productListData.filter(function (filterlist) {
if (filterlist.size) {
return filterlist.size.some(function (g) {
return g == inputVal;
});
}
});
searchResult(filterData);
loadProductList(filterData, currentPage);
});
});
// discount-filter
var arraylist = [];
document.querySelectorAll("#discount-filter .form-check").forEach(function (item) {
var inputVal = item.querySelector(".form-check-input").value;
item.querySelector(".form-check-input").addEventListener("change", function () {
if (item.querySelector(".form-check-input").checked) {
arraylist.push(inputVal);
} else {
arraylist.splice(arraylist.indexOf(inputVal), 1);
}
var filterproductdata = productListData;
if (item.querySelector(".form-check-input").checked && inputVal == 0) {
filterDataAll = filterproductdata.filter(function (product) {
if (product.discount) {
var listArray = product.discount.split("%");
return parseFloat(listArray[0]) < 10;
}
});
} else if (item.querySelector(".form-check-input").checked && arraylist.length > 0) {
var compareval = Math.min.apply(Math, arraylist);
filterDataAll = filterproductdata.filter(function (product) {
if (product.discount) {
var listArray = product.discount.split("%");
return parseFloat(listArray[0]) >= compareval;
}
});
} else {
filterDataAll = productListData;
}
searchResult(filterDataAll);
loadProductList(filterDataAll, currentPage);
});
});
// rating-filter
document.querySelectorAll("#rating-filter .form-check").forEach(function (item) {
var inputVal = item.querySelector(".form-check-input").value;
item.querySelector(".form-check-input").addEventListener("change", function () {
if (item.querySelector(".form-check-input").checked) {
arraylist.push(inputVal);
} else {
arraylist.splice(arraylist.indexOf(inputVal), 1);
}
var filterproductdata = productListData;
if (item.querySelector(".form-check-input").checked && inputVal == 1) {
filterDataAll = filterproductdata.filter(function (product) {
if (product.rating) {
var listArray = product.rating;
return parseFloat(listArray) == 1;
}
});
} else if (item.querySelector(".form-check-input").checked && arraylist.length > 0) {
var compareval = Math.min.apply(Math, arraylist);
filterDataAll = filterproductdata.filter(function (product) {
if (product.rating) {
var listArray = product.rating;
return parseFloat(listArray) >= compareval;
}
});
} else {
filterDataAll = productListData;
}
searchResult(filterDataAll);
loadProductList(filterDataAll, currentPage);
});
});
function searchResult(data) {
if (data.length == 0) {
document.getElementById("pagination-element").style.display = "none";
document.getElementById("search-result-elem").classList.remove("d-none");
} else {
document.getElementById("pagination-element").style.display = "flex";
document.getElementById("search-result-elem").classList.add("d-none");
}
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
var dataPageNum = Math.ceil(data.length / itemsPerPage)
// for each page
for (var i = 1; i < dataPageNum + 1; i++) {
pageNumber.innerHTML += "";
}
}\
\
\
\
'+ discountElem + '\
\
\
\
\
\
\
\
\
'+ afterDiscountElem + '\
'+ datas[i].rating + ' \
\
\
'+ datas[i].productTitle + '
\ \'+ datas[i].category + '
\\
\
'+ colorElem + '
\
'+ sizeElem + '
\
\
\
\
\
\
\
'+ datas[i].stock + '
\Stocks
\\
\
\
\
'+ datas[i].orders + '
\Orders
\\
\
\
\
'+ datas[i].publish + '
\Publish
\