134 lines
4.5 KiB
JavaScript
134 lines
4.5 KiB
JavaScript
$(document).ready(function () {
|
|
const $productWrapperGrid = $(".product-wrapper-grid");
|
|
const $productItems = $productWrapperGrid.children().children();
|
|
|
|
const updateProductView = (classes) => {
|
|
$productItems.removeClass().addClass(classes);
|
|
};
|
|
|
|
$('.grid-layout-view').on('click', () => {
|
|
updateProductView("list-view col-sm-6");
|
|
});
|
|
|
|
$('.product-view4').on('click', () => {
|
|
if (!$productWrapperGrid.hasClass("list-view")) {
|
|
updateProductView("col-xxl-3");
|
|
}
|
|
});
|
|
|
|
$('.product-view3').on('click', () => {
|
|
if (!$productWrapperGrid.hasClass("list-view")) {
|
|
updateProductView("col-md-4");
|
|
}
|
|
});
|
|
|
|
$('.product-view2').on('click', () => {
|
|
if (!$productWrapperGrid.hasClass("list-view")) {
|
|
updateProductView("col-sm-6 product-view-box");
|
|
}
|
|
});
|
|
|
|
$('.product-view').on('click', () => {
|
|
if (!$productWrapperGrid.hasClass("list-view")) {
|
|
updateProductView("col-12");
|
|
}
|
|
});
|
|
|
|
// Range and price filter
|
|
const rangeInputs = document.querySelectorAll(".range-input input");
|
|
const priceInputs = document.querySelectorAll(".price-input input");
|
|
const range = document.querySelector(".slider .progress");
|
|
const priceGap = 1000;
|
|
|
|
if (priceInputs.length === 2 && rangeInputs.length === 2 && range) {
|
|
priceInputs.forEach(input => {
|
|
input.addEventListener("input", (e) => {
|
|
const minPrice = parseInt(priceInputs[0].value, 10);
|
|
const maxPrice = parseInt(priceInputs[1].value, 10);
|
|
|
|
if (maxPrice - minPrice >= priceGap && maxPrice <= rangeInputs[1].max) {
|
|
if (e.target.classList.contains("input-min")) {
|
|
rangeInputs[0].value = minPrice;
|
|
range.style.left = (minPrice / rangeInputs[0].max) * 100 + "%";
|
|
} else {
|
|
rangeInputs[1].value = maxPrice;
|
|
range.style.right = 100 - (maxPrice / rangeInputs[1].max) * 100 + "%";
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
rangeInputs.forEach(input => {
|
|
input.addEventListener("input", (e) => {
|
|
let minVal = parseInt(rangeInputs[0].value, 10);
|
|
let maxVal = parseInt(rangeInputs[1].value, 10);
|
|
|
|
if (maxVal - minVal < priceGap) {
|
|
if (e.target.classList.contains("range-min")) {
|
|
rangeInputs[0].value = maxVal - priceGap;
|
|
} else {
|
|
rangeInputs[1].value = minVal + priceGap;
|
|
}
|
|
} else {
|
|
priceInputs[0].value = minVal;
|
|
priceInputs[1].value = maxVal;
|
|
range.style.left = (minVal / rangeInputs[0].max) * 100 + "%";
|
|
range.style.right = 100 - (maxVal / rangeInputs[1].max) * 100 + "%";
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Select and range slider
|
|
const select = document.getElementById('select-input');
|
|
const html5Slider = document.getElementById('html-input');
|
|
const inputNumber = document.getElementById('number-input');
|
|
|
|
if (select) {
|
|
for (let i = -20; i <= 1000; i++) {
|
|
const option = document.createElement("option");
|
|
option.text = i;
|
|
option.value = i;
|
|
select.appendChild(option);
|
|
}
|
|
}
|
|
|
|
if (html5Slider) {
|
|
noUiSlider.create(html5Slider, {
|
|
start: [10, 30],
|
|
connect: true,
|
|
range: {
|
|
min: 20,
|
|
max: 40
|
|
}
|
|
});
|
|
|
|
html5Slider.noUiSlider.on('update', (values, handle) => {
|
|
const value = values[handle];
|
|
if (handle) {
|
|
inputNumber.value = value;
|
|
} else {
|
|
select.value = Math.round(value);
|
|
}
|
|
});
|
|
|
|
select?.addEventListener('change', () => {
|
|
html5Slider.noUiSlider.set([select.value, null]);
|
|
});
|
|
|
|
inputNumber?.addEventListener('change', () => {
|
|
html5Slider.noUiSlider.set([null, inputNumber.value]);
|
|
});
|
|
}
|
|
|
|
// Toggle product box
|
|
const toggleBtn = document.querySelector('.toggle-btn');
|
|
const productBox = document.querySelector('.productbox');
|
|
|
|
if (toggleBtn && productBox) {
|
|
toggleBtn.addEventListener('click', () => {
|
|
productBox.classList.toggle("producttoggle");
|
|
});
|
|
}
|
|
});
|