first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,195 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Address Js File
|
||||
*/
|
||||
|
||||
var addressListData = [{
|
||||
'id': 1,
|
||||
"checked": false,
|
||||
"addressType": "Home",
|
||||
"name": "Witney Blessington",
|
||||
"address": "144 Cavendish Avenue, Indianapolis, IN 46251",
|
||||
"phone": "012-345-6789"
|
||||
}, {
|
||||
'id': 2,
|
||||
"checked": true,
|
||||
"addressType": "Office",
|
||||
"name": "Edwin Adenike",
|
||||
"address": "2971 Westheimer Road, Santa Ana, IL 80214",
|
||||
"phone": "123-456-7890"
|
||||
}];
|
||||
|
||||
var editlist = false;
|
||||
|
||||
loadAddressList(addressListData);
|
||||
|
||||
function loadAddressList(datas) {
|
||||
document.getElementById("address-list").innerHTML = "";
|
||||
Array.from(datas).forEach(function (listdata) {
|
||||
var checkinput = listdata.checked ? "checked" : "";
|
||||
document.getElementById("address-list").innerHTML += '<div class="col-lg-6">\
|
||||
<div>\
|
||||
<div class="form-check card-radio">\
|
||||
<input id="shippingAddress'+ listdata.id + '" name="shippingAddress" type="radio" class="form-check-input" ' + checkinput + '>\
|
||||
<label class="form-check-label" for="shippingAddress'+ listdata.id + '">\
|
||||
<span class="mb-4 fw-semibold fs-12 d-block text-muted text-uppercase">'+ listdata.addressType + ' Address</span>\
|
||||
<span class="fs-14 mb-2 fw-semibold d-block">'+ listdata.name + '</span>\
|
||||
<span class="text-muted fw-normal text-wrap mb-1 d-block">'+ listdata.address + '</span>\
|
||||
<span class="text-muted fw-normal d-block">Mo. '+ listdata.phone + '</span>\
|
||||
</label>\
|
||||
</div>\
|
||||
<div class="d-flex flex-wrap p-2 py-1 bg-light rounded-bottom border mt-n1 fs-13">\
|
||||
<div>\
|
||||
<a href="#" class="d-block text-body p-1 px-2 edit-list" data-edit-id="'+ listdata.id + '" data-bs-toggle="modal" data-bs-target="#addAddressModal"><i class="ri-pencil-fill text-muted align-bottom me-1"></i> Edit</a>\
|
||||
</div>\
|
||||
<div>\
|
||||
<a href="#" class="d-block text-body p-1 px-2 remove-list" data-remove-id="'+ listdata.id + '" data-bs-toggle="modal" data-bs-target="#removeAddressModal"><i class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Remove</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
editAddressList();
|
||||
removeItem();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
var createAddressForms = document.querySelectorAll('.createAddress-form')
|
||||
Array.prototype.slice.call(createAddressForms).forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
var inputName = document.getElementById('addaddress-Name').value;
|
||||
var addressValue = document.getElementById('addaddress-textarea').value;
|
||||
var phoneValue = document.getElementById('addaddress-phone').value;
|
||||
var stateValue = document.getElementById('state').value;
|
||||
|
||||
if (inputName !== "" &&
|
||||
addressValue !== "" &&
|
||||
stateValue !== "" &&
|
||||
phoneValue !== "" && !editlist) {
|
||||
var newListId = findNextId();
|
||||
var newList = {
|
||||
'id': newListId,
|
||||
"checked": false,
|
||||
"addressType": stateValue,
|
||||
"name": inputName,
|
||||
"address": addressValue,
|
||||
"phone": phoneValue
|
||||
};
|
||||
|
||||
addressListData.push(newList);
|
||||
} else if (inputName !== "" &&
|
||||
addressValue !== "" &&
|
||||
stateValue !== "" &&
|
||||
phoneValue !== "" && editlist) {
|
||||
var getEditid = 0;
|
||||
getEditid = document.getElementById("addressid-input").value;
|
||||
addressListData = addressListData.map(function (item) {
|
||||
if (item.id == getEditid) {
|
||||
var editObj = {
|
||||
'id': getEditid,
|
||||
"checked": item.checked,
|
||||
"addressType": stateValue,
|
||||
"name": inputName,
|
||||
"address": addressValue,
|
||||
"phone": phoneValue
|
||||
}
|
||||
return editObj;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
editlist = false;
|
||||
console.log(addressListData)
|
||||
}
|
||||
|
||||
loadAddressList(addressListData)
|
||||
document.getElementById("addAddress-close").click();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false)
|
||||
});
|
||||
|
||||
function fetchIdFromObj(list) {
|
||||
return parseInt(list.id);
|
||||
}
|
||||
|
||||
function findNextId() {
|
||||
if (addressListData.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
var lastElementId = fetchIdFromObj(addressListData[addressListData.length - 1]),
|
||||
firstElementId = fetchIdFromObj(addressListData[0]);
|
||||
return (firstElementId >= lastElementId) ? (firstElementId + 1) : (lastElementId + 1);
|
||||
}
|
||||
|
||||
Array.from(document.querySelectorAll(".addAddress-modal")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
document.getElementById("addAddressModalLabel").innerHTML = "Add New Address";
|
||||
document.getElementById("addNewAddress").innerHTML = "Add";
|
||||
document.getElementById("addaddress-Name").value = "";
|
||||
document.getElementById("addaddress-textarea").value = "";
|
||||
document.getElementById("addaddress-phone").value = "";
|
||||
document.getElementById("state").value = "Home";
|
||||
|
||||
document.getElementById("createAddress-form").classList.remove('was-validated');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function editAddressList() {
|
||||
var getEditid = 0;
|
||||
Array.from(document.querySelectorAll(".edit-list")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
getEditid = elem.getAttribute('data-edit-id');
|
||||
addressListData = addressListData.map(function (item) {
|
||||
if (item.id == getEditid) {
|
||||
editlist = true;
|
||||
document.getElementById("createAddress-form").classList.remove('was-validated');
|
||||
document.getElementById("addAddressModalLabel").innerHTML = "Edit Address";
|
||||
document.getElementById("addNewAddress").innerHTML = "Save";
|
||||
|
||||
document.getElementById("addressid-input").value = item.id;
|
||||
document.getElementById('addaddress-Name').value = item.name;
|
||||
document.getElementById('addaddress-textarea').value = item.address;
|
||||
document.getElementById('addaddress-phone').value = item.phone;
|
||||
document.getElementById('state').value = item.addressType;
|
||||
|
||||
}
|
||||
return item;
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// removeItem
|
||||
function removeItem() {
|
||||
var getid = 0;
|
||||
Array.from(document.querySelectorAll(".remove-list")).forEach(function (item) {
|
||||
item.addEventListener('click', function (event) {
|
||||
getid = item.getAttribute('data-remove-id');
|
||||
document.getElementById("remove-address").addEventListener("click", function () {
|
||||
function arrayRemove(arr, value) {
|
||||
return arr.filter(function (ele) {
|
||||
return ele.id != value;
|
||||
});
|
||||
}
|
||||
var filtered = arrayRemove(addressListData, getid);
|
||||
|
||||
addressListData = filtered;
|
||||
|
||||
loadAddressList(addressListData);
|
||||
document.getElementById("close-removeAddressModal").click();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: category Js File
|
||||
*/
|
||||
|
||||
var swiper = new Swiper(".mySwiper", {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 15,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
clickable: true,
|
||||
},
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,113 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: landing-index Js File
|
||||
*/
|
||||
|
||||
// Portfolio Filter
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
|
||||
// init Isotope
|
||||
var GalleryWrapper = document.querySelector('.gallery-wrapper');
|
||||
if (GalleryWrapper) {
|
||||
var iso = new Isotope('.gallery-wrapper', {
|
||||
itemSelector: '.element-item',
|
||||
layoutMode: 'fitRows'
|
||||
});
|
||||
}
|
||||
|
||||
// bind filter button click
|
||||
var filtersElem = document.querySelector('.categories-filter');
|
||||
if (filtersElem) {
|
||||
filtersElem.addEventListener('click', function (event) {
|
||||
// only work with buttons
|
||||
if (!matchesSelector(event.target, 'li a')) {
|
||||
return;
|
||||
}
|
||||
var filterValue = event.target.getAttribute('data-filter');
|
||||
if (filterValue) {
|
||||
// use matching filter function
|
||||
iso.arrange({
|
||||
filter: filterValue
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// change is-checked class on buttons
|
||||
var buttonGroups = document.querySelectorAll('.categories-filter');
|
||||
if (buttonGroups) {
|
||||
Array.from(buttonGroups).forEach(function (btnGroup) {
|
||||
var buttonGroup = btnGroup;
|
||||
radioButtonGroup(buttonGroup);
|
||||
});
|
||||
}
|
||||
|
||||
function radioButtonGroup(buttonGroup) {
|
||||
buttonGroup.addEventListener('click', function (event) {
|
||||
// only work with buttons
|
||||
if (!matchesSelector(event.target, 'li a')) {
|
||||
return;
|
||||
}
|
||||
buttonGroup.querySelector('.active').classList.remove('active');
|
||||
event.target.classList.add('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// TESti Monial slider
|
||||
var swiper = new Swiper(".testi-slider", {
|
||||
spaceBetween: 20,
|
||||
loop: true,
|
||||
loopFillGroupWithBlank: true,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
00: {
|
||||
slidesPerView: 1
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// latest product slider
|
||||
var swiper = new Swiper(".latest-slider", {
|
||||
spaceBetween: 30,
|
||||
loop: 'true',
|
||||
slidesPerView: 1,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
576: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,661 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: menu Js File
|
||||
*/
|
||||
|
||||
var default_lang = "en"; // set Default Language
|
||||
var language = localStorage.getItem("language");
|
||||
|
||||
function initLanguage() {
|
||||
// Set new language
|
||||
(language === null) ? setLanguage(default_lang) : setLanguage(language);
|
||||
var languages = document.getElementsByClassName("language");
|
||||
languages && Array.from(languages).forEach(function (dropdown) {
|
||||
dropdown.addEventListener("click", function (event) {
|
||||
setLanguage(dropdown.getAttribute("data-lang"));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setLanguage(lang) {
|
||||
if (document.getElementById("header-lang-img")) {
|
||||
if (lang == "en") {
|
||||
document.getElementById("header-lang-img").src = "../build/images/flags/us.svg";
|
||||
document.getElementById("lang-name").innerHTML = "English"
|
||||
} else if (lang == "sp") {
|
||||
document.getElementById("header-lang-img").src = "../build/images/flags/spain.svg";
|
||||
document.getElementById("lang-name").innerHTML = "Española"
|
||||
} else if (lang == "gr") {
|
||||
document.getElementById("header-lang-img").src = "../build/images/flags/germany.svg";
|
||||
document.getElementById("lang-name").innerHTML = "Deutsche"
|
||||
} else if (lang == "it") {
|
||||
document.getElementById("header-lang-img").src = "../build/images/flags/italy.svg";
|
||||
document.getElementById("lang-name").innerHTML = "Italiana"
|
||||
} else if (lang == "ru") {
|
||||
document.getElementById("header-lang-img").src = "../build/images/flags/russia.svg";
|
||||
document.getElementById("lang-name").innerHTML = "русский"
|
||||
} else if (lang == "ch") {
|
||||
document.getElementById("header-lang-img").src = "../build/images/flags/china.svg";
|
||||
document.getElementById("lang-name").innerHTML = "中国人"
|
||||
} else if (lang == "fr") {
|
||||
document.getElementById("header-lang-img").src = "../build/images/flags/french.svg";
|
||||
document.getElementById("lang-name").innerHTML = "français"
|
||||
} else if (lang == "sa") {
|
||||
document.getElementById("header-lang-img").src = "../build/images/flags/sa.svg";
|
||||
document.getElementById("lang-name").innerHTML = "عربى"
|
||||
}
|
||||
localStorage.setItem("language", lang);
|
||||
language = localStorage.getItem("language");
|
||||
getLanguage();
|
||||
}
|
||||
}
|
||||
|
||||
// Multi language setting
|
||||
function getLanguage() {
|
||||
language == null ? setLanguage(default_lang) : false;
|
||||
var request = new XMLHttpRequest();
|
||||
// Instantiating the request object
|
||||
request.open("GET", "../build/lang/" + language + ".json");
|
||||
// Defining event listener for readystatechange event
|
||||
request.onreadystatechange = function () {
|
||||
// Check if the request is compete and was successful
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
var data = JSON.parse(this.responseText);
|
||||
Object.keys(data).forEach(function (key) {
|
||||
var elements = document.querySelectorAll("[data-key='" + key + "']");
|
||||
Array.from(elements).forEach(function (elem) {
|
||||
elem.textContent = data[key];
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
// Sending the request to the server
|
||||
request.send();
|
||||
}
|
||||
|
||||
initLanguage();
|
||||
|
||||
// Search menu dropdown on Topbar
|
||||
function isCustomDropdown() {
|
||||
//Search bar
|
||||
var searchOptions = document.getElementById("search-close-options");
|
||||
var dropdown = document.getElementById("search-dropdown");
|
||||
var searchInput = document.getElementById("search-options");
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("focus", function () {
|
||||
var inputLength = searchInput.value.length;
|
||||
if (inputLength > 0) {
|
||||
dropdown.classList.add("show");
|
||||
searchOptions.classList.remove("d-none");
|
||||
} else {
|
||||
dropdown.classList.remove("show");
|
||||
searchOptions.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
|
||||
searchInput.addEventListener("keyup", function (event) {
|
||||
var inputLength = searchInput.value.length;
|
||||
if (inputLength > 0) {
|
||||
dropdown.classList.add("show");
|
||||
searchOptions.classList.remove("d-none");
|
||||
|
||||
var inputVal = searchInput.value.toLowerCase();
|
||||
var notifyItem = document.getElementsByClassName("notify-item");
|
||||
|
||||
Array.from(notifyItem).forEach(function (element) {
|
||||
var notifiTxt = ''
|
||||
if (element.querySelector("h6")) {
|
||||
var spantext = element.getElementsByTagName("span")[0].innerText.toLowerCase()
|
||||
var name = element.querySelector("h6").innerText.toLowerCase()
|
||||
if (name.includes(inputVal)) {
|
||||
notifiTxt = name
|
||||
} else {
|
||||
notifiTxt = spantext
|
||||
}
|
||||
} else if (element.getElementsByTagName("span")) {
|
||||
notifiTxt = element.getElementsByTagName("span")[0].innerText.toLowerCase()
|
||||
}
|
||||
|
||||
if (notifiTxt) {
|
||||
if (notifiTxt.includes(inputVal)) {
|
||||
element.classList.add("d-block");
|
||||
element.classList.remove("d-none");
|
||||
} else {
|
||||
element.classList.remove("d-block");
|
||||
element.classList.add("d-none");
|
||||
}
|
||||
}
|
||||
|
||||
Array.from(document.getElementsByClassName("notification-group-list")).forEach(function (element) {
|
||||
if (element.querySelectorAll(".notify-item.d-block").length == 0) {
|
||||
element.querySelector(".notification-title").style.display = 'none'
|
||||
} else {
|
||||
element.querySelector(".notification-title").style.display = 'block'
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
dropdown.classList.remove("show");
|
||||
searchOptions.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
|
||||
searchOptions.addEventListener("click", function () {
|
||||
searchInput.value = "";
|
||||
dropdown.classList.remove("show");
|
||||
searchOptions.classList.add("d-none");
|
||||
});
|
||||
|
||||
document.body.addEventListener("click", function (e) {
|
||||
if (e.target.getAttribute("id") !== "search-options") {
|
||||
dropdown.classList.remove("show");
|
||||
searchOptions.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// cart dropdown
|
||||
|
||||
// input spin
|
||||
isData();
|
||||
function isData() {
|
||||
var plus = document.getElementsByClassName('plus');
|
||||
var minus = document.getElementsByClassName('minus');
|
||||
var product = document.getElementsByClassName("product");
|
||||
|
||||
if (plus) {
|
||||
Array.from(plus).forEach(function (e) {
|
||||
e.addEventListener('click', function (event) {
|
||||
// if(event.target.previousElementSibling.value )
|
||||
if (parseInt(e.previousElementSibling.value) < event.target.previousElementSibling.getAttribute('max')) {
|
||||
event.target.previousElementSibling.value++;
|
||||
if (product) {
|
||||
Array.from(product).forEach(function (x) {
|
||||
updateQuantity(event.target);
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (minus) {
|
||||
Array.from(minus).forEach(function (e) {
|
||||
e.addEventListener('click', function (event) {
|
||||
if (parseInt(e.nextElementSibling.value) > event.target.nextElementSibling.getAttribute('min')) {
|
||||
event.target.nextElementSibling.value--;
|
||||
if (product) {
|
||||
Array.from(product).forEach(function (x) {
|
||||
updateQuantity(event.target);
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var taxRate = 0.125;
|
||||
var shippingRate = 65.00;
|
||||
var discountRate = 0.15;
|
||||
|
||||
var currencySign = "$";
|
||||
var cartList = document.querySelectorAll(".cartlist li").length;
|
||||
document.querySelectorAll(".cartitem-badge").forEach(function(item){
|
||||
item.innerHTML = cartList
|
||||
})
|
||||
|
||||
document.querySelectorAll(".product-list").forEach(function(elem){
|
||||
elem.querySelectorAll(".product-count").forEach(function(subelem){
|
||||
subelem.innerHTML = elem.querySelectorAll(".product").length
|
||||
})
|
||||
recalculateCart(elem);
|
||||
})
|
||||
|
||||
function recalculateCart(elm) {
|
||||
var subtotal = 0;
|
||||
|
||||
Array.from(elm.getElementsByClassName("product")).forEach(function (item) {
|
||||
Array.from(item.getElementsByClassName('product-line-price')).forEach(function (e) {
|
||||
subtotal += parseFloat(e.innerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
/* Calculate totals */
|
||||
var tax = subtotal * taxRate;
|
||||
var discount = subtotal * discountRate;
|
||||
|
||||
var shipping = (subtotal > 0 ? shippingRate : 0);
|
||||
var total = subtotal + tax + shipping - discount;
|
||||
|
||||
elm.querySelector(".cart-subtotal").innerHTML = currencySign + subtotal.toFixed(2);
|
||||
elm.querySelector(".cart-tax").innerHTML = currencySign + tax.toFixed(2);
|
||||
elm.querySelector(".cart-shipping").innerHTML = currencySign + shipping.toFixed(2);
|
||||
elm.querySelector(".cart-total").innerHTML = currencySign + total.toFixed(2);
|
||||
elm.querySelector(".cart-discount").innerHTML = "-" + currencySign + discount.toFixed(2);
|
||||
}
|
||||
|
||||
function updateQuantity(quantityInput) {
|
||||
if(quantityInput.closest('.product')){
|
||||
var productRow = quantityInput.closest('.product');
|
||||
var productList = quantityInput.closest('.product-list');
|
||||
var price;
|
||||
if (productRow || productRow.getElementsByClassName('product-price'))
|
||||
Array.from(productRow.getElementsByClassName('product-price')).forEach(function (e) {
|
||||
price = parseFloat(e.innerHTML);
|
||||
});
|
||||
|
||||
if (quantityInput.previousElementSibling && quantityInput.previousElementSibling.classList.contains("product-quantity")) {
|
||||
var quantity = quantityInput.previousElementSibling.value;
|
||||
} else if (quantityInput.nextElementSibling && quantityInput.nextElementSibling.classList.contains("product-quantity")) {
|
||||
var quantity = quantityInput.nextElementSibling.value;
|
||||
}
|
||||
var linePrice = price * quantity;
|
||||
/* Update line price display and recalc cart totals */
|
||||
Array.from(productRow.getElementsByClassName('product-line-price')).forEach(function (e) {
|
||||
e.innerHTML = linePrice.toFixed(2);
|
||||
recalculateCart(productList);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Remove product from cart
|
||||
var removeProduct = document.getElementById('removeItemModal')
|
||||
if (removeProduct)
|
||||
removeProduct.addEventListener('show.bs.modal', function (e) {
|
||||
document.getElementById('remove-product').addEventListener('click', function (event) {
|
||||
e.relatedTarget.closest('.product').remove();
|
||||
|
||||
document.getElementById("close-modal").click();
|
||||
document.querySelectorAll(".cartitem-badge").forEach(function(item){
|
||||
item.innerHTML = document.querySelectorAll(".cartlist li").length;
|
||||
})
|
||||
|
||||
document.querySelectorAll(".product-list").forEach(function(elem){
|
||||
elem.querySelectorAll(".product-count").forEach(function(subelem){
|
||||
subelem.innerHTML = elem.querySelectorAll(".product").length
|
||||
})
|
||||
recalculateCart(elem);
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
// search menu dropdown on topbar
|
||||
function isCustomDropdownResponsive() {
|
||||
//Search bar
|
||||
var searchOptions = document.getElementById("search-close-options");
|
||||
var dropdownReponsive = document.getElementById("search-dropdown-reponsive");
|
||||
var searchInputReponsive = document.getElementById("search-options-reponsive");
|
||||
|
||||
if (searchOptions && dropdownReponsive && searchInputReponsive) {
|
||||
searchInputReponsive.addEventListener("focus", function () {
|
||||
var inputLength = searchInputReponsive.value.length;
|
||||
if (inputLength > 0) {
|
||||
dropdownReponsive.classList.add("show");
|
||||
searchOptions.classList.remove("d-none");
|
||||
} else {
|
||||
dropdownReponsive.classList.remove("show");
|
||||
searchOptions.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
|
||||
searchInputReponsive.addEventListener("keyup", function () {
|
||||
var inputLength = searchInputReponsive.value.length;
|
||||
if (inputLength > 0) {
|
||||
dropdownReponsive.classList.add("show");
|
||||
searchOptions.classList.remove("d-none");
|
||||
} else {
|
||||
dropdownReponsive.classList.remove("show");
|
||||
searchOptions.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
|
||||
searchOptions.addEventListener("click", function () {
|
||||
searchInputReponsive.value = "";
|
||||
dropdownReponsive.classList.remove("show");
|
||||
searchOptions.classList.add("d-none");
|
||||
});
|
||||
|
||||
document.body.addEventListener("click", function (e) {
|
||||
if (e.target.getAttribute("id") !== "search-options") {
|
||||
dropdownReponsive.classList.remove("show");
|
||||
searchOptions.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function elementInViewport(el) {
|
||||
if (el) {
|
||||
var top = el.offsetTop;
|
||||
var left = el.offsetLeft;
|
||||
var width = el.offsetWidth;
|
||||
var height = el.offsetHeight;
|
||||
|
||||
if (el.offsetParent) {
|
||||
while (el.offsetParent) {
|
||||
el = el.offsetParent;
|
||||
top += el.offsetTop;
|
||||
left += el.offsetLeft;
|
||||
}
|
||||
}
|
||||
return (
|
||||
top >= window.pageYOffset &&
|
||||
left >= window.pageXOffset &&
|
||||
top + height <= window.pageYOffset + window.innerHeight &&
|
||||
left + width <= window.pageXOffset + window.innerWidth
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function windowResizeHover() {
|
||||
var isElement = document.querySelectorAll(".ecommerce-navbar .navbar-nav li");
|
||||
Array.from(isElement).forEach(function (item) {
|
||||
item.addEventListener("click", menuItem.bind(this), false);
|
||||
item.addEventListener("mouseover", menuItem.bind(this), false);
|
||||
});
|
||||
|
||||
var windowSize = document.documentElement.clientWidth;
|
||||
if (windowSize < 992) {
|
||||
var currentPath = location.pathname == "/" ? "index" : location.pathname.substring(1);
|
||||
currentPath = currentPath.substring(currentPath.lastIndexOf("/") + 1);
|
||||
|
||||
if (currentPath) {
|
||||
var a = document.getElementById("navigation-menu").querySelector('[href="' + currentPath + '"]');
|
||||
if (a) {
|
||||
var parentCollapseDiv = a.closest(".dropdown-menu");
|
||||
|
||||
if (parentCollapseDiv) {
|
||||
parentCollapseDiv.classList.add("show");
|
||||
if (parentCollapseDiv.parentElement) {
|
||||
parentCollapseDiv.classList.add("show");
|
||||
parentCollapseDiv.parentElement.children[0].classList.add("show");
|
||||
parentCollapseDiv.parentElement.children[0].setAttribute("aria-expanded", "true");
|
||||
if (parentCollapseDiv.parentElement.parentElement.parentElement) {
|
||||
parentCollapseDiv.parentElement.parentElement.classList.add("show");
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.children[0].classList.add("show");
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.children[0].setAttribute("aria-expanded", "true");
|
||||
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement) {
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.classList.add("show");
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.children[0].classList.add("show");
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.children[0].setAttribute("aria-expanded", "true");
|
||||
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement) {
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("show");
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[0].classList.add("show");
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[0].setAttribute("aria-expanded", "true");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
document.querySelectorAll("#navigation-menu .dropdown").forEach(function (elem) {
|
||||
if (elem.querySelector(".dropdown-menu").classList.contains("show")) {
|
||||
elem.querySelector(".dropdown-menu").classList.remove("show");
|
||||
}
|
||||
if (elem.querySelector(".dropdown-toggle")) {
|
||||
elem.querySelector(".dropdown-toggle").setAttribute("aria-expanded", "false")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var myCollapse = document.getElementById("navbarSupportedContent");
|
||||
var bsCollapse = new bootstrap.Collapse(myCollapse,{
|
||||
toggle: false
|
||||
})
|
||||
bsCollapse.hide();
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener("resize", windowResizeHover);
|
||||
|
||||
windowResizeHover();
|
||||
|
||||
function menuItem(e) {
|
||||
if (e.target && e.target.matches(".submenu a.nav-link")) {
|
||||
if (elementInViewport(e.target.nextElementSibling) == false) {
|
||||
e.target.nextElementSibling.classList.add("dropdown-custom-right");
|
||||
// e.target.parentElement.parentElement.classList.add("dropdown-custom-right");
|
||||
|
||||
var eleChild = e.target.nextElementSibling;
|
||||
Array.from(eleChild.querySelectorAll(".submenu")).forEach(function (item) {
|
||||
item.classList.add("dropdown-custom-right");
|
||||
});
|
||||
} else if (elementInViewport(e.target.nextElementSibling) == true) {
|
||||
if (window.innerWidth >= 1848) {
|
||||
var elements = document.getElementsByClassName("dropdown-custom-right");
|
||||
while (elements.length > 0) {
|
||||
elements[0].classList.remove("dropdown-custom-right");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initActiveMenu() {
|
||||
var currentPath = location.pathname == "/" ? "index" : location.pathname.substring(1);
|
||||
currentPath = currentPath.substring(currentPath.lastIndexOf("/") + 1);
|
||||
|
||||
if (currentPath) {
|
||||
var a = document.getElementById("navigation-menu").querySelector('.nav-link[href="' + currentPath + '"]');
|
||||
if (a) {
|
||||
a.classList.add("active");
|
||||
var parentCollapseDiv = a.closest(".dropdown-menu");
|
||||
if (parentCollapseDiv) {
|
||||
if (parentCollapseDiv.parentElement) {
|
||||
parentCollapseDiv.parentElement.children[0].classList.add("active");
|
||||
if (parentCollapseDiv.parentElement.parentElement.parentElement) {
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.children[0].classList.add("active");
|
||||
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement) {
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.children[0].classList.add("active");
|
||||
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement) {
|
||||
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[0].classList.add("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initMenuItemScroll() {
|
||||
setTimeout(function () {
|
||||
var sidebarMenu = document.getElementById("navbarSupportedContent");
|
||||
if (sidebarMenu) {
|
||||
if (sidebarMenu.querySelector(".nav-link.active")) {
|
||||
var activeMenu = sidebarMenu.querySelector(".nav-link.active").offsetTop;
|
||||
setTimeout(function () {
|
||||
sidebarMenu.scrollTop = activeMenu
|
||||
}, 0);
|
||||
|
||||
}
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
initMenuItemScroll();
|
||||
|
||||
const navbarCollapsible = document.getElementById('navbarSupportedContent')
|
||||
navbarCollapsible.addEventListener('shown.bs.collapse', event => {
|
||||
initMenuItemScroll()
|
||||
})
|
||||
|
||||
function initModeSetting() {
|
||||
if (sessionStorage.getItem("data-bs-theme") && sessionStorage.getItem("data-bs-theme") == "light") {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'light');
|
||||
}else if (sessionStorage.getItem("data-bs-theme") == "dark") {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
}
|
||||
|
||||
var html = document.getElementsByTagName("HTML")[0];
|
||||
document.querySelectorAll("#light-dark-mode .dropdown-item").forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
if (html.hasAttribute("data-bs-theme") && item.getAttribute("data-mode") == "light") {
|
||||
sessionStorage.setItem("data-bs-theme", "light");
|
||||
} else if (html.hasAttribute("data-bs-theme") && item.getAttribute("data-mode") == "dark") {
|
||||
sessionStorage.setItem("data-bs-theme", "dark");
|
||||
} else if (html.hasAttribute("data-bs-theme") && item.getAttribute("data-mode") == "auto") {
|
||||
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
if (prefersDarkScheme.matches) {
|
||||
sessionStorage.setItem("data-bs-theme", "dark");
|
||||
} else {
|
||||
sessionStorage.setItem("data-bs-theme", "light");
|
||||
}
|
||||
}
|
||||
|
||||
if (sessionStorage.getItem("data-bs-theme") && sessionStorage.getItem("data-bs-theme") == "light") {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'light');
|
||||
}else if (sessionStorage.getItem("data-bs-theme") == "dark") {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function init() {
|
||||
isCustomDropdown();
|
||||
isCustomDropdownResponsive();
|
||||
initActiveMenu();
|
||||
initMenuItemScroll();
|
||||
initModeSetting();
|
||||
}
|
||||
init();
|
||||
|
||||
|
||||
// Window scroll sticky class add
|
||||
function windowScroll() {
|
||||
var navbar = document.getElementById("navbar");
|
||||
if (navbar) {
|
||||
if (document.body.scrollTop >= 50 || document.documentElement.scrollTop >= 50) {
|
||||
navbar.classList.add("is-sticky");
|
||||
} else {
|
||||
navbar.classList.remove("is-sticky");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function (ev) {
|
||||
ev.preventDefault();
|
||||
windowScroll();
|
||||
});
|
||||
|
||||
//modal js
|
||||
function firstTimeLoad() {
|
||||
|
||||
var myModal = new bootstrap.Modal(document.getElementById('subscribeModal'), {
|
||||
keyboard: false
|
||||
})
|
||||
var modalToggle = document.getElementById('subscribeModal') // relatedTarget
|
||||
|
||||
setTimeout(function () {
|
||||
myModal ? myModal.show(modalToggle) : "";
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
firstTimeLoad();
|
||||
|
||||
// var tooltipTriggerList = [].slice.call(
|
||||
// document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
// );
|
||||
// var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
// return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
// });
|
||||
|
||||
function initComponents() {
|
||||
// tooltip
|
||||
var tooltipTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
);
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// popover
|
||||
var popoverTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="popover"]')
|
||||
);
|
||||
popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl);
|
||||
});
|
||||
}
|
||||
|
||||
initComponents();
|
||||
|
||||
setTimeout(function () {
|
||||
// === following js will activate the menu in left side bar based on url ====
|
||||
var menuItems = document.querySelectorAll(".submenu-item li a");
|
||||
menuItems && menuItems.forEach(function (item) {
|
||||
var pageUrl = window.location.href.split(/[?#]/)[0];
|
||||
|
||||
if (item.href == pageUrl) {
|
||||
item.classList.add("active");
|
||||
}
|
||||
});
|
||||
}, 0)
|
||||
|
||||
//
|
||||
/********************* scroll top js ************************/
|
||||
//
|
||||
|
||||
var mybutton = document.getElementById("back-to-top");
|
||||
|
||||
if (mybutton) {
|
||||
// When the user scrolls down 20px from the top of the document, show the button
|
||||
window.onscroll = function () {
|
||||
scrollFunction();
|
||||
};
|
||||
|
||||
function scrollFunction() {
|
||||
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
|
||||
mybutton.style.display = "block";
|
||||
} else {
|
||||
mybutton.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// When the user clicks on the button, scroll to the top of the document
|
||||
function topFunction() {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
|
||||
//chat bot
|
||||
function chatBot() {
|
||||
var chatbot = document.getElementById("chatBot");
|
||||
if (chatbot) {
|
||||
chatbot.classList.remove("show");
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll to Bottom
|
||||
function scrollToBottom(id) {
|
||||
setTimeout(function () {
|
||||
var simpleBar = (document.getElementById(id).querySelector("#chat-conversation .simplebar-content-wrapper")) ?
|
||||
document.getElementById(id).querySelector("#chat-conversation .simplebar-content-wrapper") : ''
|
||||
|
||||
var offsetHeight = document.getElementsByClassName("chat-conversation-list")[0] ?
|
||||
document.getElementById(id).getElementsByClassName("chat-conversation-list")[0].scrollHeight - window.innerHeight + 800 : 0;
|
||||
|
||||
if (offsetHeight)
|
||||
simpleBar.scrollTo({
|
||||
top: offsetHeight,
|
||||
behavior: "smooth"
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
|
||||
const chatCollapsible = document.getElementById('chatBot')
|
||||
chatCollapsible.addEventListener('shown.bs.collapse', event => {
|
||||
// chat
|
||||
var currentChatId = "users-chat-widget";
|
||||
scrollToBottom(currentChatId);
|
||||
})
|
||||
@@ -0,0 +1,76 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: modern fashion init Js File
|
||||
*/
|
||||
|
||||
|
||||
var swiper = new Swiper(".category-slider", {
|
||||
spaceBetween: 24,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// counter
|
||||
const end = new Date("Augest 16, 2025 00:00:00").getTime();
|
||||
//const end = new Date("November 09, 2020 00:00:00").getTime();
|
||||
const dayEl = document.getElementById('days');
|
||||
const hoursEl = document.getElementById('hours');
|
||||
const minutesEl = document.getElementById('minutes');
|
||||
const secondsEl = document.getElementById('seconds');
|
||||
const seconds = 1000;
|
||||
const minutes = seconds * 60;
|
||||
const hours = minutes * 60;
|
||||
const days = hours * 24;
|
||||
|
||||
const x = setInterval(function () {
|
||||
let now = new Date().getTime();
|
||||
const difference = end - now;
|
||||
|
||||
if (difference < 0) {
|
||||
clearInterval(x);
|
||||
document.getElementById("done").innerHTML = "End Sales 🎉";
|
||||
return;
|
||||
}
|
||||
|
||||
dayEl.innerText = Math.floor(difference / days);
|
||||
hoursEl.innerText = Math.floor((difference % days) / hours);
|
||||
minutesEl.innerText = Math.floor((difference % hours) / minutes);
|
||||
secondsEl.innerText = Math.floor((difference % minutes) / seconds);
|
||||
}, seconds);
|
||||
|
||||
//filter nav
|
||||
var filterBtns = document.querySelectorAll(".filter-btns .nav-link"),
|
||||
productItems = document.querySelectorAll(".product-item");
|
||||
Array.from(filterBtns).forEach(function (t) {
|
||||
t.addEventListener("click", function (t) {
|
||||
t.preventDefault();
|
||||
for (var e = 0; e < filterBtns.length; e++) filterBtns[e].classList.remove("active");
|
||||
this.classList.add("active");
|
||||
var n = t.target.dataset.filter;
|
||||
Array.from(productItems).forEach(function (t) {
|
||||
"all" === n || t.classList.contains(n) ? (t.style.display = "block") : (t.style.display = "none");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: product Details init js
|
||||
*/
|
||||
|
||||
var swiper = new Swiper(".productSwiper", {
|
||||
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
mousewheel: true,
|
||||
freeMode: true,
|
||||
watchSlidesProgress: true,
|
||||
breakpoints: {
|
||||
992: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 10,
|
||||
direction: "vertical",
|
||||
},
|
||||
},
|
||||
});
|
||||
var swiper2 = new Swiper(".productSwiper2", {
|
||||
loop: true,
|
||||
spaceBetween: 10,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,830 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: product grid list init Js File
|
||||
*/
|
||||
|
||||
|
||||
var productListData = [{
|
||||
'id': 1,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-8.png",
|
||||
"productTitle": "World's most expensive t shirt",
|
||||
"category": "Fashion",
|
||||
"price": "354.99",
|
||||
"discount": "25%",
|
||||
"rating": "4.9",
|
||||
"arrival": true,
|
||||
"color": ["success", "info", "warning", "danger"],
|
||||
}, {
|
||||
'id': 2,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-15.png",
|
||||
"productTitle": "Like Style Women Black Handbag",
|
||||
"category": "Fashion",
|
||||
"price": "742.00",
|
||||
"discount": "0%",
|
||||
"rating": "4.2",
|
||||
"arrival": false,
|
||||
"color": ["light", "dark"],
|
||||
}, {
|
||||
'id': 3,
|
||||
"wishList": true,
|
||||
"productImg": "../build/images/products/img-1.png",
|
||||
"productTitle": "Black Horn Backpack For Men Bags 30 L Backpack",
|
||||
"category": "Grocery",
|
||||
"price": "150.00",
|
||||
"discount": "25%",
|
||||
"rating": "3.8",
|
||||
"arrival": true,
|
||||
"color": ["primary", "danger", "secondary"],
|
||||
}, {
|
||||
'id': 4,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-7.png",
|
||||
"productTitle": "Innovative education book",
|
||||
"category": "Kids",
|
||||
"price": "96.26",
|
||||
"discount": "0%",
|
||||
"rating": "4.7",
|
||||
"arrival": false,
|
||||
}, {
|
||||
'id': 5,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-4.png",
|
||||
"productTitle": "Sangria Girls Mint Green & Off-White Solid Open Toe Flats",
|
||||
"category": "Kids",
|
||||
"price": "96.26",
|
||||
"discount": "75%",
|
||||
"rating": "4.7",
|
||||
"arrival": true,
|
||||
"color": ["success", "danger", "secondary"],
|
||||
}, {
|
||||
'id': 6,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-5.png",
|
||||
"productTitle": "Lace-Up Casual Shoes For Men",
|
||||
"category": "Fashion",
|
||||
"price": "229.00",
|
||||
"discount": "0%",
|
||||
"rating": "4.0",
|
||||
"arrival": false,
|
||||
"color": ["danger"],
|
||||
}, {
|
||||
'id': 7,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-6.png",
|
||||
"productTitle": "Striped High Neck Casual Men Orange Sweater",
|
||||
"category": "Fashion",
|
||||
"price": "120.00",
|
||||
"discount": "48%",
|
||||
"rating": "4.8",
|
||||
"arrival": false,
|
||||
"size": ["s", "m", "l", "xl"],
|
||||
}, {
|
||||
'id': 8,
|
||||
"wishList": true,
|
||||
"productImg": "../build/images/products/img-9.png",
|
||||
"productTitle": "Lace-Up Casual Shoes For Men",
|
||||
"category": "Kids",
|
||||
"price": "229.00",
|
||||
"discount": "15%",
|
||||
"rating": "2.4",
|
||||
"arrival": false,
|
||||
"color": ["light", "warning"],
|
||||
}, {
|
||||
'id': 9,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-10.png",
|
||||
"productTitle": "Printed, Typography Men Round Neck Black T-shirt",
|
||||
"category": "Fashion",
|
||||
"price": "81.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.9",
|
||||
"arrival": true,
|
||||
"color": ["dark", "light"],
|
||||
}, {
|
||||
'id': 10,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-12.png",
|
||||
"productTitle": "Carven Lounge Chair Red",
|
||||
"category": "Furniture",
|
||||
"price": "209.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.1",
|
||||
"arrival": false,
|
||||
"color": ["secondary", "dark", "danger", "light"],
|
||||
}, {
|
||||
'id': 11,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-3.png",
|
||||
"productTitle": "Ninja Pro Max Smartwatch",
|
||||
"category": "Watches",
|
||||
"price": "309.09",
|
||||
"discount": "20%",
|
||||
"rating": "3.5",
|
||||
"arrival": false,
|
||||
"color": ["secondary", "info"],
|
||||
}, {
|
||||
'id': 12,
|
||||
"wishList": false,
|
||||
"productImg": "../build/images/products/img-2.png",
|
||||
"productTitle": "Opinion Striped Round Neck Green T-shirt",
|
||||
"category": "Fashion",
|
||||
"price": "126.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.1",
|
||||
"arrival": true,
|
||||
"color": ["success"],
|
||||
}];
|
||||
|
||||
var prevButton = document.getElementById('page-prev');
|
||||
var nextButton = document.getElementById('page-next');
|
||||
|
||||
// configuration variables
|
||||
var currentPage = 1;
|
||||
var itemsPerPage
|
||||
|
||||
if (document.getElementById("col-3-layout")) {
|
||||
itemsPerPage = 12;
|
||||
} else {
|
||||
itemsPerPage = 9;
|
||||
}
|
||||
|
||||
loadProductList(productListData, currentPage);
|
||||
paginationEvents();
|
||||
|
||||
function loadProductList(datas, page) {
|
||||
var pages = Math.ceil(datas.length / itemsPerPage)
|
||||
if (page < 1) page = 1;
|
||||
if (page > pages) page = pages;
|
||||
|
||||
if (document.getElementById("product-grid")) {
|
||||
document.getElementById("product-grid").innerHTML = "";
|
||||
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
|
||||
// Array.from(datas).forEach(function (listdata) {
|
||||
if (datas[i]) {
|
||||
var checkinput = datas[i].wishList ? "active" : "";
|
||||
var num = 1;
|
||||
if (datas[i].color) {
|
||||
var colorElem = '<ul class="clothe-colors list-unstyled hstack gap-1 mb-3 flex-wrap">';
|
||||
Array.from(datas[i].color).forEach(function (elem) {
|
||||
num++;
|
||||
colorElem += '<li>\
|
||||
<input type="radio" name="sizes'+ datas[i].id + '" id="product-color-' + datas[i].id + num + '">\
|
||||
<label class="avatar-xxs btn btn-'+ elem + ' p-0 d-flex align-items-center justify-content-center rounded-circle" for="product-color-' + datas[i].id + num + '"></label>\
|
||||
</li>';
|
||||
})
|
||||
colorElem += '</ul>';
|
||||
} else if (datas[i].size) {
|
||||
var colorElem = '<ul class="clothe-size list-unstyled hstack gap-2 mb-3 flex-wrap">';
|
||||
Array.from(datas[i].size).forEach(function (elem) {
|
||||
num++;
|
||||
colorElem += '<li>\
|
||||
<input type="radio" name="sizes'+ datas[i].id + '" id="product-color-' + datas[i].id + num + '">\
|
||||
<label class="avatar-xxs btn btn-soft-primary text-uppercase p-0 fs-12 d-flex align-items-center justify-content-center rounded-circle" for="product-color-'+ datas[i].id + num + '">' + elem + '</label>\
|
||||
</li>';
|
||||
})
|
||||
colorElem += '</ul>';
|
||||
} else {
|
||||
var colorElem = '<div class="avatar-xxs mb-3">\
|
||||
<div class="avatar-title bg-light text-muted rounded cursor-pointer">\
|
||||
<i class="ri-error-warning-line"></i>\
|
||||
</div>\
|
||||
</div>'
|
||||
}
|
||||
|
||||
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 discountElem = '<div class="avatar-xs label">\
|
||||
<div class="avatar-title bg-danger rounded-circle fs-11">'+ datas[i].discount + '</div>\
|
||||
</div>';
|
||||
var afterDiscountElem = '<h5 class="text-secondary mb-0">$' + afterDiscount.toFixed(2) + ' <span class="text-muted fs-12"><del>$' + datas[i].price + '</del></span></h5>'
|
||||
} else {
|
||||
var discountElem = "";
|
||||
var afterDiscountElem = '<h5 class="text-secondary mb-0">$' + datas[i].price + '</h5>'
|
||||
}
|
||||
|
||||
if (document.getElementById("col-3-layout")) {
|
||||
var layout = '<div class="col-xxl-3 col-lg-4 col-md-6">'
|
||||
} else {
|
||||
var layout = '<div class="col-xxl-4 col-lg-4 col-md-6">'
|
||||
}
|
||||
|
||||
document.getElementById("product-grid").innerHTML += layout + '\
|
||||
<div class="card ecommerce-product-widgets border-0 rounded-0 shadow-none overflow-hidden">\
|
||||
<div class="bg-light bg-opacity-50 rounded py-4 position-relative">\
|
||||
<img src="'+ datas[i].productImg + '" alt="" style="max-height: 200px;max-width: 100%;" class="mx-auto d-block rounded-2">\
|
||||
<div class="action vstack gap-2">\
|
||||
<button class="btn btn-danger avatar-xs p-0 btn-soft-warning custom-toggle product-action '+ checkinput + '" data-bs-toggle="button">\
|
||||
<span class="icon-on"><i class="ri-heart-line"></i></span>\
|
||||
<span class="icon-off"><i class="ri-heart-fill"></i></span>\
|
||||
</button>\
|
||||
</div>\
|
||||
'+ discountElem + '\
|
||||
</div>\
|
||||
<div class="pt-4">\
|
||||
<div>\
|
||||
'+ colorElem + '\
|
||||
<a href="#!">\
|
||||
<h6 class="text-capitalize fs-15 lh-base text-truncate mb-0">'+ datas[i].productTitle + '</h6>\
|
||||
</a>\
|
||||
<div class="mt-2">\
|
||||
<span class="float-end">'+ datas[i].rating + ' <i class="ri-star-half-fill text-warning align-bottom"></i></span>\
|
||||
'+ afterDiscountElem + '\
|
||||
</div>\
|
||||
<div class="tn mt-3">\
|
||||
<a href="#!" class="btn btn-primary btn-hover w-100 add-btn"><i class="mdi mdi-cart me-1"></i> Add To Cart</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>'
|
||||
// });
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
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 ? '<p class="fs-11 fw-medium badge bg-primary py-2 px-3 product-lable mb-0">Best Arrival</p>' : "";
|
||||
|
||||
var num = 1;
|
||||
if (datas[i].color) {
|
||||
var colorElem = '<ul class="clothe-colors list-unstyled hstack gap-1 mb-3 flex-wrap d-none">';
|
||||
Array.from(datas[i].color).forEach(function (elem) {
|
||||
num++;
|
||||
colorElem += '<li>\
|
||||
<input type="radio" name="sizes'+ datas[i].id + '" id="product-color-' + datas[i].id + num + '">\
|
||||
<label class="avatar-xxs btn btn-'+ elem + ' p-0 d-flex align-items-center justify-content-center rounded-circle" for="product-color-' + datas[i].id + num + '"></label>\
|
||||
</li>';
|
||||
})
|
||||
colorElem += '</ul>';
|
||||
} else if (datas[i].size) {
|
||||
var colorElem = '<ul class="clothe-size list-unstyled hstack gap-2 mb-3 flex-wrap d-none">';
|
||||
Array.from(datas[i].size).forEach(function (elem) {
|
||||
num++;
|
||||
colorElem += '<li>\
|
||||
<input type="radio" name="sizes'+ datas[i].id + '" id="product-color-' + datas[i].id + num + '">\
|
||||
<label class="avatar-xxs btn btn-soft-primary text-uppercase p-0 fs-12 d-flex align-items-center justify-content-center rounded-circle" for="product-color-'+ datas[i].id + num + '">' + elem + '</label>\
|
||||
</li>';
|
||||
})
|
||||
colorElem += '</ul>';
|
||||
} else {
|
||||
var colorElem = '<div class="avatar-xxs mb-3 d-none">\
|
||||
<div class="avatar-title bg-light text-muted rounded cursor-pointer">\
|
||||
<i class="ri-error-warning-line"></i>\
|
||||
</div>\
|
||||
</div>'
|
||||
}
|
||||
|
||||
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 = '<h5 class="mb-0">$' + afterDiscount.toFixed(2) + ' <span class="text-muted fs-12"><del>$' + datas[i].price + '</del></span></h5>'
|
||||
} else {
|
||||
var afterDiscountElem = '<h5 class="mb-0">$' + datas[i].price + '</h5>'
|
||||
}
|
||||
|
||||
if (document.getElementById("col-3-layout")) {
|
||||
var layout = '<div class="col-xxl-3 col-lg-4 col-md-6">'
|
||||
} else {
|
||||
var layout = '<div class="col-lg-4 col-md-6">'
|
||||
}
|
||||
|
||||
document.getElementById("product-grid-right").innerHTML += layout + '\
|
||||
<div class="card overflow-hidden element-item">\
|
||||
<div class="bg-light py-4">\
|
||||
<div class="gallery-product">\
|
||||
<img src="'+ datas[i].productImg + '" alt="" style="max-height: 215px;max-width: 100%;" class="mx-auto d-block">\
|
||||
</div>\
|
||||
'+productLabel+'\
|
||||
<div class="gallery-product-actions">\
|
||||
<div class="mb-2">\
|
||||
<button type="button" class="btn btn-danger btn-sm custom-toggle '+ checkinput + '" data-bs-toggle="button">\
|
||||
<span class="icon-on"><i class="mdi mdi-heart-outline align-bottom fs-15"></i></span>\
|
||||
<span class="icon-off"><i class="mdi mdi-heart align-bottom fs-15"></i></span>\
|
||||
</button>\
|
||||
</div>\
|
||||
<div>\
|
||||
<button type="button" class="btn btn-success btn-sm custom-toggle" data-bs-toggle="button">\
|
||||
<span class="icon-on"><i class="mdi mdi-eye-outline align-bottom fs-15"></i></span>\
|
||||
<span class="icon-off"><i class="mdi mdi-eye align-bottom fs-15"></i></span>\
|
||||
</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="product-btn px-3">\
|
||||
<a href="#!" class="btn btn-primary btn-sm w-75 add-btn"><i class="mdi mdi-cart me-1"></i> Add to Cart</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="card-body">\
|
||||
<div>\
|
||||
'+ colorElem + '\
|
||||
<a href="#!">\
|
||||
<h6 class="fs-16 lh-base text-truncate mb-0">'+ datas[i].productTitle + '</h6>\
|
||||
</a>\
|
||||
<div class="mt-3">\
|
||||
<span class="float-end">'+ datas[i].rating + ' <i class="ri-star-half-fill text-warning align-bottom"></i></span>\
|
||||
'+ afterDiscountElem + '\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
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 += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
|
||||
}
|
||||
}
|
||||
|
||||
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 += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
@@ -0,0 +1,514 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: product list table init Js File
|
||||
*/
|
||||
|
||||
var productListData = [{
|
||||
'id': 1,
|
||||
"productImg": "../build/images/products/img-10.png",
|
||||
"productTitle": "World's most expensive t shirt",
|
||||
"category": "Fashion",
|
||||
"price": "354.99",
|
||||
"discount": "25%",
|
||||
"rating": "4.9",
|
||||
"stock": "Out of stock",
|
||||
"color": ["secondary", "light", "dark"],
|
||||
"size": ["s", "m", "l"],
|
||||
}, {
|
||||
'id': 2,
|
||||
"productImg": "../build/images/products/img-15.png",
|
||||
"productTitle": "Like Style Women Black Handbag",
|
||||
"category": "Fashion",
|
||||
"price": "742.00",
|
||||
"discount": "0%",
|
||||
"rating": "4.2",
|
||||
"stock": "In stock",
|
||||
"color": ["light", "dark"],
|
||||
}, {
|
||||
'id': 3,
|
||||
"productImg": "../build/images/products/img-1.png",
|
||||
"productTitle": "Black Horn Backpack For Men Bags 30 L Backpack",
|
||||
"category": "Grocery",
|
||||
"price": "150.99",
|
||||
"discount": "25%",
|
||||
"rating": "3.8",
|
||||
"stock": "In stock",
|
||||
"color": ["primary", "danger", "secondary"],
|
||||
"size": ["s", "m", "l"],
|
||||
}, {
|
||||
'id': 4,
|
||||
"productImg": "../build/images/products/img-7.png",
|
||||
"productTitle": "Innovative education book",
|
||||
"category": "Kids",
|
||||
"price": "96.26",
|
||||
"discount": "0%",
|
||||
"rating": "4.7",
|
||||
"stock": "In stock",
|
||||
}, {
|
||||
'id': 5,
|
||||
"productImg": "../build/images/products/img-4.png",
|
||||
"productTitle": "Sangria Girls Mint Green & Off-White Solid Open Toe Flats",
|
||||
"category": "Kids",
|
||||
"price": "96.26",
|
||||
"discount": "75%",
|
||||
"rating": "4.7",
|
||||
"stock": "In stock",
|
||||
"color": ["success", "danger", "secondary"],
|
||||
"size": ["40", "41", "42"],
|
||||
}, {
|
||||
'id': 6,
|
||||
"productImg": "../build/images/products/img-5.png",
|
||||
"productTitle": "Lace-Up Casual Shoes For Men",
|
||||
"category": "Fashion",
|
||||
"price": "229.00",
|
||||
"discount": "0%",
|
||||
"rating": "4.0",
|
||||
"stock": "Out of stock",
|
||||
"color": ["danger"],
|
||||
"size": ["40", "41", "42"],
|
||||
}, {
|
||||
'id': 7,
|
||||
"productImg": "../build/images/products/img-6.png",
|
||||
"productTitle": "Striped High Neck Casual Men Orange Sweater",
|
||||
"category": "Fashion",
|
||||
"price": "120.00",
|
||||
"discount": "48%",
|
||||
"rating": "4.8",
|
||||
"stock": "In stock",
|
||||
"size": ["s", "m", "l", "xl"],
|
||||
}, {
|
||||
'id': 8,
|
||||
"productImg": "../build/images/products/img-9.png",
|
||||
"productTitle": "Lace-Up Casual Shoes For Men",
|
||||
"category": "Kids",
|
||||
"price": "229.00",
|
||||
"discount": "15%",
|
||||
"rating": "2.4",
|
||||
"stock": "In stock",
|
||||
"color": ["light", "warning"],
|
||||
"size": ["s", "l"],
|
||||
}, {
|
||||
'id': 9,
|
||||
"productImg": "../build/images/products/img-10.png",
|
||||
"productTitle": "Printed, Typography Men Round Neck Black T-shirt",
|
||||
"category": "Fashion",
|
||||
"price": "81.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.9",
|
||||
"stock": "In stock",
|
||||
"color": ["dark", "light"],
|
||||
"size": ["s", "m", "l", "xl"],
|
||||
}, {
|
||||
'id': 10,
|
||||
"productImg": "../build/images/products/img-12.png",
|
||||
"productTitle": "Carven Lounge Chair Red",
|
||||
"category": "Furniture",
|
||||
"price": "209.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.1",
|
||||
"stock": "Out of stock",
|
||||
"color": ["secondary", "dark", "danger", "light"],
|
||||
}, {
|
||||
'id': 11,
|
||||
"productImg": "../build/images/products/img-3.png",
|
||||
"productTitle": "Ninja Pro Max Smartwatch",
|
||||
"category": "Watches",
|
||||
"price": "309.09",
|
||||
"discount": "20%",
|
||||
"rating": "3.5",
|
||||
"stock": "In stock",
|
||||
"color": ["secondary", "info"],
|
||||
}, {
|
||||
'id': 12,
|
||||
"productImg": "../build/images/products/img-2.png",
|
||||
"productTitle": "Opinion Striped Round Neck Green T-shirt",
|
||||
"category": "Fashion",
|
||||
"price": "126.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.1",
|
||||
"stock": "Out of stock",
|
||||
"color": ["success"],
|
||||
"size": ["s", "m", "l", "xl"],
|
||||
}];
|
||||
|
||||
// product-list
|
||||
if (document.getElementById("product-list")) {
|
||||
var productList = new gridjs.Grid({
|
||||
columns: [
|
||||
{
|
||||
name: 'Product Name',
|
||||
data: (function (row) {
|
||||
var num = 1;
|
||||
if (row.color) {
|
||||
var colorElem = '<ul class="clothe-colors list-unstyled hstack gap-1 mb-0 flex-wrap d-none">';
|
||||
Array.from(row.color).forEach(function (elem) {
|
||||
num++;
|
||||
colorElem += '<li>\
|
||||
<input type="radio" name="color'+ row.id + '" id="product-color-' + row.id + num + '">\
|
||||
<label class="avatar-xxs btn btn-'+ elem + ' p-0 d-flex align-items-center justify-content-center rounded-circle" for="product-color-' + row.id + num + '"></label>\
|
||||
</li>';
|
||||
})
|
||||
colorElem += '</ul>';
|
||||
} else {
|
||||
var colorElem = '';
|
||||
}
|
||||
|
||||
if (row.size) {
|
||||
var sizeElem = '<ul class="clothe-size list-unstyled hstack gap-2 mb-0 flex-wrap d-none">';
|
||||
Array.from(row.size).forEach(function (elem) {
|
||||
num++;
|
||||
sizeElem += '<li>\
|
||||
<input type="radio" name="sizes'+ row.id + '" id="product-size-' + row.id + num + '">\
|
||||
<label class="avatar-xxs btn btn-soft-primary text-uppercase p-0 fs-12 d-flex align-items-center justify-content-center rounded-circle" for="product-size-'+ row.id + num + '">' + elem + '</label>\
|
||||
</li>';
|
||||
})
|
||||
sizeElem += '</ul>';
|
||||
}else{
|
||||
var sizeElem = '';
|
||||
}
|
||||
return gridjs.html('<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0 me-2 avatar-sm">\
|
||||
<div class="avatar-title bg-light rounded">\
|
||||
<img src="'+ row.productImg + '" alt="" class="avatar-xs" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="flex-grow-1">\
|
||||
<h6 class="fs-14">'+ row.productTitle + '</h6>\
|
||||
<p class="mb-0 fs-13 text-muted">'+ row.category + '</p>\
|
||||
</div>\
|
||||
</div>'+ colorElem + sizeElem);
|
||||
}),
|
||||
width: '400px',
|
||||
},
|
||||
{
|
||||
name: 'Rate',
|
||||
data: (function (row) {
|
||||
return gridjs.html('<span class="badge bg-light text-body fs-12 fw-medium"><i class="mdi mdi-star text-warning me-1"></i>'+row.rating+'</span>');
|
||||
}),
|
||||
width: '80px',
|
||||
},
|
||||
{
|
||||
name: 'Price',
|
||||
data: (function (row) {
|
||||
var text = row.discount;
|
||||
var myArray = text.split("%");
|
||||
var discount = myArray[0];
|
||||
var afterDiscount = row.price - (row.price * discount / 100);
|
||||
if (discount > 0) {
|
||||
var afterDiscountElem = '<div>$' + afterDiscount.toFixed(2) + ' <span class="text-muted fs-12"><del>$' + row.price + '</del></span></div>'
|
||||
} else {
|
||||
var afterDiscountElem = '<div>$' + row.price + '</div>'
|
||||
}
|
||||
return gridjs.html(afterDiscountElem);
|
||||
}),
|
||||
width: '80px',
|
||||
},
|
||||
{
|
||||
name: 'Status',
|
||||
data: (function (row) {
|
||||
return gridjs.html(isStatus(row.stock));
|
||||
}),
|
||||
width: '100px',
|
||||
}, {
|
||||
name: 'Action',
|
||||
width: '80px',
|
||||
data: (function (row) {
|
||||
return gridjs.html('<div class="text-center dropdown">\
|
||||
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false" class=""> <i class="mdi mdi-dots-horizontal"></i> </a>\
|
||||
<ul class="dropdown-menu dropdown-menu-end">\
|
||||
<li>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-eye-line me-2 align-bottom text-muted"></i>view</a>\
|
||||
</li>\
|
||||
<li>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-shopping-cart-line me-2 align-bottom text-muted"></i>cart</a>\
|
||||
</li>\
|
||||
</ul>\
|
||||
</div>');
|
||||
})
|
||||
},
|
||||
],
|
||||
sort: true,
|
||||
pagination: {
|
||||
limit: 10
|
||||
},
|
||||
data: productListData,
|
||||
}).render(document.getElementById("product-list"));
|
||||
};
|
||||
|
||||
function isStatus(val) {
|
||||
switch (val) {
|
||||
case "In stock":
|
||||
return ('<span class="badge bg-success-subtle text-success align-middle ms-1">'+ val +'</span>');
|
||||
case "Out of stock":
|
||||
return ('<span class="badge bg-danger-subtle text-danger align-middle ms-1">'+ val +'</span>');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 || el.category.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.stock.toLowerCase().indexOf(query.toLowerCase()) !== -1|| el.price.toLowerCase().indexOf(query.toLowerCase()) !== -1
|
||||
})
|
||||
}
|
||||
var filterData = filterItems(productListData, inputVal);
|
||||
productList.updateConfig({
|
||||
data: filterData
|
||||
}).forceRender();
|
||||
});
|
||||
|
||||
// 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
|
||||
);
|
||||
|
||||
productList.updateConfig({
|
||||
data: filterDataAll
|
||||
}).forceRender();
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
productList.updateConfig({
|
||||
data: filterData
|
||||
}).forceRender();
|
||||
});
|
||||
});
|
||||
|
||||
// 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;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
productList.updateConfig({
|
||||
data: filterData
|
||||
}).forceRender();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
productList.updateConfig({
|
||||
data: filterDataAll
|
||||
}).forceRender();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
productList.updateConfig({
|
||||
data: filterDataAll
|
||||
}).forceRender();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
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;
|
||||
})
|
||||
productList.updateConfig({
|
||||
data: list
|
||||
}).forceRender();
|
||||
}
|
||||
|
||||
// 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;
|
||||
})
|
||||
productList.updateConfig({
|
||||
data: list
|
||||
}).forceRender();
|
||||
}
|
||||
|
||||
// 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;
|
||||
})
|
||||
productList.updateConfig({
|
||||
data: list
|
||||
}).forceRender();
|
||||
}
|
||||
@@ -0,0 +1,751 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: product list init Js File
|
||||
*/
|
||||
|
||||
var productListData = [{
|
||||
'id': 1,
|
||||
"productImg": "../build/images/products/img-10.png",
|
||||
"productTitle": "World's most expensive t shirt",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Fashion",
|
||||
"price": "354.99",
|
||||
"discount": "25%",
|
||||
"rating": "4.9",
|
||||
"stock": "Out of stock",
|
||||
"color": ["secondary", "light", "dark"],
|
||||
"size": ["s", "m", "l"],
|
||||
},{
|
||||
'id': 2,
|
||||
"productImg": "../build/images/products/img-15.png",
|
||||
"productTitle": "Like Style Women Black Handbag",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Fashion",
|
||||
"price": "742.00",
|
||||
"discount": "0%",
|
||||
"rating": "4.2",
|
||||
"stock": "In stock",
|
||||
"color": ["light", "dark"],
|
||||
},{
|
||||
'id': 3,
|
||||
"productImg": "../build/images/products/img-1.png",
|
||||
"productTitle": "Black Horn Backpack For Men Bags 30 L Backpack",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Grocery",
|
||||
"price": "150.99",
|
||||
"discount": "25%",
|
||||
"rating": "3.8",
|
||||
"stock": "In stock",
|
||||
"color": ["primary", "danger", "secondary"],
|
||||
"size": ["s", "m", "l"],
|
||||
},{
|
||||
'id': 4,
|
||||
"productImg": "../build/images/products/img-7.png",
|
||||
"productTitle": "Innovative education book",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Kids",
|
||||
"price": "96.26",
|
||||
"discount": "0%",
|
||||
"rating": "4.7",
|
||||
"stock": "In stock",
|
||||
},{
|
||||
'id': 5,
|
||||
"productImg": "../build/images/products/img-4.png",
|
||||
"productTitle": "Sangria Girls Mint Green & Off-White Solid Open Toe Flats",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Kids",
|
||||
"price": "96.26",
|
||||
"discount": "75%",
|
||||
"rating": "4.7",
|
||||
"stock": "In stock",
|
||||
"color": ["success", "danger", "secondary"],
|
||||
"size": ["40", "41", "42"],
|
||||
},{
|
||||
'id': 6,
|
||||
"productImg": "../build/images/products/img-5.png",
|
||||
"productTitle": "Lace-Up Casual Shoes For Men",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Fashion",
|
||||
"price": "229.00",
|
||||
"discount": "0%",
|
||||
"rating": "4.0",
|
||||
"stock": "In stock",
|
||||
"color": ["danger"],
|
||||
"size": ["40", "41", "42"],
|
||||
},{
|
||||
'id': 7,
|
||||
"productImg": "../build/images/products/img-6.png",
|
||||
"productTitle": "Striped High Neck Casual Men Orange Sweater",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Fashion",
|
||||
"price": "120.00",
|
||||
"discount": "48%",
|
||||
"rating": "4.8",
|
||||
"stock": "In stock",
|
||||
"size": ["s", "m", "l", "xl"],
|
||||
},{
|
||||
'id': 8,
|
||||
"productImg": "../build/images/products/img-9.png",
|
||||
"productTitle": "Lace-Up Casual Shoes For Men",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Kids",
|
||||
"price": "229.00",
|
||||
"discount": "15%",
|
||||
"rating": "2.4",
|
||||
"stock": "In stock",
|
||||
"color": ["light", "warning"],
|
||||
"size": ["s", "l"],
|
||||
},{
|
||||
'id': 9,
|
||||
"productImg": "../build/images/products/img-10.png",
|
||||
"productTitle": "Printed, Typography Men Round Neck Black T-shirt",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Fashion",
|
||||
"price": "81.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.9",
|
||||
"stock": "In stock",
|
||||
"color": ["dark", "light"],
|
||||
"size": ["s", "m", "l", "xl"],
|
||||
},{
|
||||
'id': 10,
|
||||
"productImg": "../build/images/products/img-12.png",
|
||||
"productTitle": "Carven Lounge Chair Red",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Furniture",
|
||||
"price": "209.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.1",
|
||||
"stock": "In stock",
|
||||
"color": ["secondary", "dark", "danger", "light"],
|
||||
},{
|
||||
'id': 11,
|
||||
"productImg": "../build/images/products/img-3.png",
|
||||
"productTitle": "Ninja Pro Max Smartwatch",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Watches",
|
||||
"price": "309.09",
|
||||
"discount": "20%",
|
||||
"rating": "3.5",
|
||||
"stock": "In stock",
|
||||
"color": ["secondary", "info"],
|
||||
},{
|
||||
'id': 12,
|
||||
"productImg": "../build/images/products/img-2.png",
|
||||
"productTitle": "Opinion Striped Round Neck Green T-shirt",
|
||||
"description": "T-Shirt house best black boys T-Shirt fully cotton material & all size available hirt fully cotton material & all size available.",
|
||||
"category": "Fashion",
|
||||
"price": "126.99",
|
||||
"discount": "0%",
|
||||
"rating": "4.1",
|
||||
"stock": "In stock",
|
||||
"color": ["success"],
|
||||
"size": ["s", "m", "l", "xl"],
|
||||
}];
|
||||
|
||||
|
||||
var prevButton = document.getElementById('page-prev');
|
||||
var nextButton = document.getElementById('page-next');
|
||||
|
||||
var currentPage = 1;
|
||||
var itemsPerPage = 5;
|
||||
|
||||
loadProductList(productListData, currentPage);
|
||||
paginationEvents();
|
||||
|
||||
function loadProductList(datas, page) {
|
||||
var pages = Math.ceil(datas.length / itemsPerPage)
|
||||
if (page < 1) page = 1
|
||||
if (page > pages) page = pages
|
||||
if (document.getElementById("product-list")) {
|
||||
document.getElementById("product-list").innerHTML = "";
|
||||
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
|
||||
// Array.from(datas).forEach(function (listdata) {
|
||||
if(datas[i]){
|
||||
var checkinput = datas[i].wishList ? "active" : "";
|
||||
|
||||
var num = 1;
|
||||
if (datas[i].color) {
|
||||
var colorElem = '<ul class="clothe-colors list-unstyled hstack gap-1 mb-0 flex-wrap">';
|
||||
Array.from(datas[i].color).forEach(function (elem) {
|
||||
num++;
|
||||
colorElem += '<li>\
|
||||
<input type="radio" name="color'+ datas[i].id + '" id="product-color-' + datas[i].id + num + '">\
|
||||
<label class="avatar-xxs btn btn-'+ elem + ' p-0 d-flex align-items-center justify-content-center rounded-circle" for="product-color-' + datas[i].id + num + '"></label>\
|
||||
</li>';
|
||||
})
|
||||
colorElem += '</ul>';
|
||||
} else {
|
||||
var colorElem = '';
|
||||
}
|
||||
|
||||
if (datas[i].size) {
|
||||
var sizeElem = '<ul class="clothe-size list-unstyled hstack gap-2 mb-0 flex-wrap">';
|
||||
Array.from(datas[i].size).forEach(function (elem) {
|
||||
num++;
|
||||
sizeElem += '<li>\
|
||||
<input type="radio" name="sizes'+ datas[i].id + '" id="product-size-' + datas[i].id + num + '">\
|
||||
<label class="avatar-xxs btn btn-soft-primary text-uppercase p-0 fs-12 d-flex align-items-center justify-content-center rounded-circle" for="product-size-'+ datas[i].id + num + '">' + elem + '</label>\
|
||||
</li>';
|
||||
})
|
||||
sizeElem += '</ul>';
|
||||
}else{
|
||||
var sizeElem = '';
|
||||
}
|
||||
|
||||
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 discountElem = '<div class="ribbon ribbon-danger ribbon-shape">'+ datas[i].discount + ' OFF</div>';
|
||||
var afterDiscountElem = '<h5 class="text-secondary mb-0">$' + afterDiscount.toFixed(2) + ' <span class="text-muted fs-13"><del>$' + datas[i].price + '</del></span></h5>'
|
||||
} else {
|
||||
var discountElem = '';
|
||||
var afterDiscountElem = '<h5 class="text-secondary mb-0">$' + datas[i].price + '</h5>'
|
||||
}
|
||||
|
||||
if (document.getElementById("layout-noSidebar")) {
|
||||
var layout = '<div class="col-md-3">'
|
||||
} else {
|
||||
var layout = '<div class="col-md-4">'
|
||||
}
|
||||
|
||||
document.getElementById("product-list").innerHTML += '<div class="card ribbon-box">\
|
||||
'+discountElem+'\
|
||||
<div class="card-body">\
|
||||
<div class="row">\
|
||||
'+layout + '\
|
||||
<div class="bg-light p-2 rounded-2 h-100">\
|
||||
<img src="'+datas[i].productImg+'" alt="" class="img-fluid">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="col-md">\
|
||||
<div>\
|
||||
<div class="mb-2">\
|
||||
<span class="me-2">'+datas[i].rating+'</span>\
|
||||
<span> <i class="ri-star-fill text-warning align-bottom"></i></span>\
|
||||
</div>\
|
||||
<a href="#!"><h4 class="fs-16">'+datas[i].productTitle+'</h4></a>\
|
||||
<p class="text-muted mb-3">'+datas[i].description+'</p>\
|
||||
<div class="d-flex gap-1">\
|
||||
'+afterDiscountElem+'\
|
||||
'+isStatus(datas[i].stock)+'\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="mt-3">\
|
||||
<div class="d-flex gap-4">\
|
||||
'+ colorElem + '\
|
||||
'+ sizeElem + '\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="mt-3 hstack gap-2 justify-content-end">\
|
||||
<a href="shop-cart" class="btn btn-primary"> <i class="ri-shopping-cart-2-fill align-bottom me-1"></i> Add To Cart</a>\
|
||||
<a href="#!" class="btn btn-soft-secondary"> <i class="ri-eye-fill align-bottom"></i></a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>'
|
||||
}
|
||||
// });
|
||||
}
|
||||
}
|
||||
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 ('<span class="badge bg-success-subtle text-success align-middle ms-1">'+ val +'</span>');
|
||||
case "Out of stock":
|
||||
return ('<span class="badge bg-danger-subtle text-danger align-middle ms-1">'+ val +'</span>');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
|
||||
}
|
||||
}
|
||||
|
||||
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 += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: store locator init Js File
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors Attribute not found on:', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
// world map with markers
|
||||
var vectorMapWorldMarkersColors = getChartColorsArray("world-map-markers");
|
||||
if (vectorMapWorldMarkersColors)
|
||||
var worldemapmarkers = new jsVectorMap({
|
||||
map: 'world_merc',
|
||||
selector: '#world-map-markers',
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
selectedMarkers: [0, 2],
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapWorldMarkersColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
markersSelectable: true,
|
||||
markers: [{
|
||||
name: "Israel",
|
||||
coords: [31.0461, 34.8516]
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
coords: [61.5240, 105.3188]
|
||||
},
|
||||
{
|
||||
name: "Germany",
|
||||
coords: [51.1657, 10.4515]
|
||||
},
|
||||
{
|
||||
name: "Brazil",
|
||||
coords: [-14.2350, -51.9253]
|
||||
},
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
fill: "#038edc"
|
||||
},
|
||||
selected: {
|
||||
fill: "red"
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function (marker) {
|
||||
return marker.name
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,91 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: trend fashion init Js File
|
||||
*/
|
||||
|
||||
const end = new Date("Augest 16, 2025 00:00:00").getTime();
|
||||
//const end = new Date("November 09, 2020 00:00:00").getTime();
|
||||
const dayEl = document.getElementById('days');
|
||||
const hoursEl = document.getElementById('hours');
|
||||
const minutesEl = document.getElementById('minutes');
|
||||
const secondsEl = document.getElementById('seconds');
|
||||
const seconds = 1000;
|
||||
const minutes = seconds * 60;
|
||||
const hours = minutes * 60;
|
||||
const days = hours * 24;
|
||||
|
||||
const x = setInterval(function () {
|
||||
let now = new Date().getTime();
|
||||
const difference = end - now;
|
||||
|
||||
if (difference < 0) {
|
||||
clearInterval(x);
|
||||
document.getElementById("done").innerHTML = "End Sales 🎉";
|
||||
return;
|
||||
}
|
||||
|
||||
dayEl.innerText = Math.floor(difference / days);
|
||||
hoursEl.innerText = Math.floor((difference % days) / hours);
|
||||
minutesEl.innerText = Math.floor((difference % hours) / minutes);
|
||||
secondsEl.innerText = Math.floor((difference % minutes) / seconds);
|
||||
}, seconds);
|
||||
|
||||
|
||||
//top product slider
|
||||
var swiper = new Swiper(".top-Product-slider", {
|
||||
loop: true,
|
||||
spaceBetween: 24,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1400: {
|
||||
slidesPerView: 5,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
//product load more
|
||||
var work = document.querySelector("#productList");
|
||||
var items = Array.from(work.querySelectorAll(".item"));
|
||||
var loadMore = document.getElementById("productLoadMore");
|
||||
maxItems = 10;
|
||||
loadItems = 5;
|
||||
hiddenClass = "hidden-product";
|
||||
hiddenItems = Array.from(document.querySelectorAll(".hidden-product"));
|
||||
|
||||
items.forEach(function (item, index) {
|
||||
if (index > maxItems - 1) {
|
||||
item.classList.add(hiddenClass);
|
||||
}
|
||||
});
|
||||
|
||||
loadMore.addEventListener("click", function () {
|
||||
[].forEach.call(document.querySelectorAll("." + hiddenClass), function (
|
||||
item,
|
||||
index
|
||||
) {
|
||||
if (index < loadItems) {
|
||||
item.classList.remove(hiddenClass);
|
||||
}
|
||||
|
||||
if (document.querySelectorAll("." + hiddenClass).length === 0) {
|
||||
loadMore.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: watch demo init Js File
|
||||
*/
|
||||
|
||||
|
||||
var swiper = new Swiper(".feedback-slider", {
|
||||
spaceBetween: 24,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1500: {
|
||||
slidesPerView: 5,
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user