'
}
document.getElementById("product-grid").innerHTML += layout + '\
'
// });
};
}
}
if(document.getElementById("product-grid-right")){
document.getElementById("product-grid-right").innerHTML = "";
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
if (datas[i]) {
var checkinput = datas[i].wishList ? "active" : "";
var productLabel = datas[i].arrival ? '\
\
\
\
\
\
\
\
'+ discountElem + '\
\
\
\
'+ colorElem + '\
\
\
'+ datas[i].productTitle + '
\ \\
'+ datas[i].rating + ' \
'+ afterDiscountElem + '\
\
\
Add To Cart\
\
Best Arrival
' : ""; var num = 1; if (datas[i].color) { var colorElem = '- ';
Array.from(datas[i].color).forEach(function (elem) {
num++;
colorElem += '
- \ \ \ '; }) colorElem += '
- ';
Array.from(datas[i].size).forEach(function (elem) {
num++;
colorElem += '
- \ \ \ '; }) colorElem += '
\
'
}
var text = datas[i].discount;
var myArray = text.split("%");
var discount = myArray[0];
var afterDiscount = datas[i].price - (datas[i].price * discount / 100);
if (discount > 0) {
var afterDiscountElem = '\
\
\
$' + afterDiscount.toFixed(2) + ' $' + datas[i].price + '
'
} else {
var afterDiscountElem = '$' + datas[i].price + '
' } if (document.getElementById("col-3-layout")) { var layout = ''
} else {
var layout = '
'
}
document.getElementById("product-grid-right").innerHTML += layout + '\
'
}
}
}
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();
}
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 += "";
}
}
// 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);
});
})
// 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);
});
// 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);
}\
\
\
\
\
\
'+ colorElem + '\
\
\
'+ datas[i].productTitle + '
\ \\
'+ datas[i].rating + ' \
'+ afterDiscountElem + '\
\