'
}
document.getElementById("product-list").innerHTML += '
'
}
// });
}
}
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");
}
}
};
function isStatus(val) {
switch (val) {
case "In stock":
return (''+ val +'');
case "Out of stock":
return (''+ val +'');
}
}
// 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();
}
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 += "";
}
}
// 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]);
});
}
// 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);
});
});
// 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);
});
});
document.getElementById("sort-elem").addEventListener("change", function (e) {
var inputVal = e.target.value
if (inputVal == "low_to_high") {
sortElementsByAsc();
} else if (inputVal == "high_to_low") {
sortElementsByDesc();
} else if (inputVal == "") {
sortElementsById()
}
});
// sort element ascending
function sortElementsByAsc() {
var list = productListData.sort(function (a, b) {
var text = a.discount;
var myArray = text.split("%");
var discount = myArray[0];
var x = a.price - (a.price * discount / 100);
var text1 = b.discount;
var myArray1 = text1.split("%");
var discount = myArray1[0];
var y = b.price - (b.price * discount / 100);
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
})
loadProductList(list, currentPage);
}
// sort element descending
function sortElementsByDesc() {
var list = productListData.sort(function (a, b) {
var text = a.discount;
var myArray = text.split("%");
var discount = myArray[0];
var x = a.price - (a.price * discount / 100);
var text1 = b.discount;
var myArray1 = text1.split("%");
var discount = myArray1[0];
var y = b.price - (b.price * discount / 100);
if (x > y) {
return -1;
}
if (x < y) {
return 1;
}
return 0;
})
loadProductList(list, currentPage);
}
// sort element id
function sortElementsById() {
var list = productListData.sort(function (a, b) {
var x = parseInt(a.id);
var y = parseInt(b.id);
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
})
loadProductList(list, currentPage);
}
// no sidebar page
var hidingTooltipSlider = document.getElementById('slider-hide');
if (hidingTooltipSlider){
noUiSlider.create(hidingTooltipSlider, {
range: {
min: 0,
max: 2000
},
start: [20, 800],
tooltips: true,
connect: true,
pips: {
mode: 'count',
values: 5,
density: 4
},
format: wNumb({ decimals: 2, prefix: '$ ' })
});
var minCostInput = document.getElementById('minCost'),
maxCostInput = document.getElementById('maxCost');
var filterDataAll = '';
// When the slider value changes, update the input and span
hidingTooltipSlider.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);
});
}
// choices category input
if(document.getElementById('select-category')){
var productCategoryInput = new Choices(document.getElementById('select-category'), {
searchEnabled: false,
});
productCategoryInput.passedElement.element.addEventListener('change', function (event) {
var productCategoryValue = event.detail.value
if (event.detail.value) {
var filterData = productListData.filter(productlist => productlist.category === productCategoryValue);
}else {
var filterData = productListData;
}
searchResult(filterData);
loadProductList(filterData, currentPage);
}, false);
}
// select-rating
if(document.getElementById('select-rating')){
var productRatingInput = new Choices(document.getElementById('select-rating'), {
searchEnabled: false,
allowHTML: true,
delimiter: ',',
editItems: true,
maxItemCount: 5,
removeItemButton: true,
});
productRatingInput.passedElement.element.addEventListener('change', function (event) {
var productRatingInputValue = productRatingInput.getValue(true);
if(event.detail.value == 1){
filterDataAll = productListData.filter(function (product) {
if (product.rating) {
var listArray = product.rating;
return parseFloat(listArray) == 1;
}
});
} else if (productRatingInputValue.length > 0) {
var compareval = Math.min.apply(Math, productRatingInputValue);
filterDataAll = productListData.filter(function (product) {
if (product.rating) {
var listArray = product.rating;
return parseFloat(listArray) >= compareval;
}
});
} else {
filterDataAll = productListData;
}
searchResult(filterDataAll);
loadProductList(filterDataAll, currentPage);
}, false);
}
// select-discount
if(document.getElementById('select-discount')){
var productDiscountInput = new Choices(document.getElementById('select-discount'), {
searchEnabled: false,
allowHTML: true,
delimiter: ',',
editItems: true,
maxItemCount: 5,
removeItemButton: true,
});
productDiscountInput.passedElement.element.addEventListener('change', function (event) {
var productDiscountInputValue = productDiscountInput.getValue(true);
var filterproductdata = productListData;
if(event.detail.value == 0){
filterDataAll = productListData.filter(function (product) {
if (product.discount) {
var listArray = product.discount.split("%");
return parseFloat(listArray[0]) < 10;
}
});
} else if (productDiscountInputValue.length > 0) {
var compareval = Math.min.apply(Math, productDiscountInputValue);
filterDataAll = productListData.filter(function (product) {
if (product.discount) {
var listArray = product.discount.split("%");
return parseFloat(listArray[0]) >= compareval;
}
});
} else {
filterDataAll = productListData;
}
searchResult(filterDataAll);
loadProductList(filterDataAll, currentPage);
}, false);
}\
'+discountElem+'\
\
\
\
\
'+layout + '\
\
\
\
\
\
\
\
\
\
'+datas[i].rating+'\
\
\
'+datas[i].productTitle+'
\'+datas[i].description+'
\\
'+afterDiscountElem+'\
'+isStatus(datas[i].stock)+'\
\
\
\
\
'+ colorElem + '\
'+ sizeElem + '\
\
\
Add To Cart\
\
\