Compare commits
2 Commits
f24b1e303d
...
b5fd8dae3c
| Author | SHA1 | Date |
|---|---|---|
 MarkHipe
|
b5fd8dae3c | |
|
mark H
|
bcfae881a6 |
|
|
@ -298,165 +298,153 @@ $filteredProducts = [];
|
|||
<script>
|
||||
// JavaScript
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const productsPerPage = 30;
|
||||
let currentPage = 1;
|
||||
let page = currentPage;
|
||||
loadVendors(page); // Initial load of vendor products
|
||||
loadProducts(page); // Initial load of products
|
||||
// JavaScript
|
||||
function filterFunction(checkedCategories, minPrice, maxPrice, products) {
|
||||
var filteredProducts = [];
|
||||
// Filter by category
|
||||
if (checkedCategories.length > 0) {
|
||||
let filteredProduct = products?.filter((product) => {
|
||||
let categoryF = product?.product?.product_category?.toLowerCase();
|
||||
// console.log('Category (lowercase):', categoryF);
|
||||
let result = checkedCategories.includes(categoryF)
|
||||
// console.log('Checked Categories:', result);
|
||||
return result; // Return a boolean value indicating whether the category is included
|
||||
});
|
||||
filteredProducts = filteredProduct
|
||||
console.log(filteredProducts);
|
||||
const productsPerPage = 30;
|
||||
let currentPage = 1;
|
||||
let page = currentPage;
|
||||
loadVendors(page); // Initial load of vendor products
|
||||
loadProducts(page); // Initial load of products
|
||||
// JavaScript
|
||||
function filterFunction(checkedCategories, minPrice, maxPrice, products) {
|
||||
var filteredProducts = [];
|
||||
// Filter by category
|
||||
if (checkedCategories.length > 0) {
|
||||
let filteredProduct = products?.filter((product) => {
|
||||
let categoryF = product?.product?.product_category?.toLowerCase();
|
||||
// console.log('Category (lowercase):', categoryF);
|
||||
let result = checkedCategories.includes(categoryF)
|
||||
// console.log('Checked Categories:', result);
|
||||
return result; // Return a boolean value indicating whether the category is included
|
||||
});
|
||||
filteredProducts = filteredProduct
|
||||
console.log(filteredProducts);
|
||||
|
||||
} else {
|
||||
// If no categories are selected, keep all products
|
||||
filteredProducts = products;
|
||||
}
|
||||
} else {
|
||||
// If no categories are selected, keep all products
|
||||
filteredProducts = products;
|
||||
}
|
||||
|
||||
// If minPrice or maxPrice is not provided, set them to default values
|
||||
minPriceFinal = minPrice !== '' ? parseInt(minPrice) : 0;
|
||||
maxPriceFinal = maxPrice !== '' ? parseInt(maxPrice) : Number.MAX_VALUE;
|
||||
console.log(checkedCategories, minPrice, products)
|
||||
// If minPrice or maxPrice is not provided, set them to default values
|
||||
minPriceFinal = minPrice !== '' ? parseInt(minPrice) : 0;
|
||||
maxPriceFinal = maxPrice !== '' ? parseInt(maxPrice) : Number.MAX_VALUE;
|
||||
console.log(checkedCategories, minPrice, products)
|
||||
|
||||
// Filter by price range
|
||||
// Filter by price range
|
||||
if (minPrice !== '' || maxPrice !== '') {
|
||||
// Filter by price range
|
||||
// Filter by price range
|
||||
if (minPrice !== '' || maxPrice !== '') {
|
||||
|
||||
filteredProducts = filteredProducts.filter(function(product) {
|
||||
// Check if product has a sale price
|
||||
var salePrice = parseInt(product.product.sale_price);
|
||||
var regularPrice = parseInt(product.product.regular_price);
|
||||
filteredProducts = filteredProducts.filter(function(product) {
|
||||
// Check if product has a sale price
|
||||
var salePrice = parseInt(product.product.sale_price);
|
||||
var regularPrice = parseInt(product.product.regular_price);
|
||||
|
||||
// Check if salePrice and regularPrice are valid numbers
|
||||
// Check if salePrice and regularPrice are valid numbers
|
||||
|
||||
// if (isNaN(salePrice) || isNaN(regularPrice)) {
|
||||
// // One of the prices is not a valid number, use 0 instead
|
||||
// salePrice = salePrice || 0;
|
||||
// regularPrice = regularPrice || 0;
|
||||
// }
|
||||
var priceToCheck = salePrice > 0 ? salePrice : regularPrice;
|
||||
// console.log(priceToCheck);
|
||||
return priceToCheck >= minPriceFinal && priceToCheck <= maxPriceFinal;
|
||||
});
|
||||
}
|
||||
console.log({
|
||||
results: filteredProducts
|
||||
});
|
||||
// if (isNaN(salePrice) || isNaN(regularPrice)) {
|
||||
// // One of the prices is not a valid number, use 0 instead
|
||||
// salePrice = salePrice || 0;
|
||||
// regularPrice = regularPrice || 0;
|
||||
// }
|
||||
var priceToCheck = salePrice > 0 ? salePrice : regularPrice;
|
||||
// console.log(priceToCheck);
|
||||
return priceToCheck >= minPriceFinal && priceToCheck <= maxPriceFinal;
|
||||
});
|
||||
}
|
||||
console.log({
|
||||
results: filteredProducts
|
||||
});
|
||||
|
||||
// Final filtered products
|
||||
// console.log({results:filteredProducts});
|
||||
let final = filteredProducts
|
||||
return final;
|
||||
}
|
||||
// Final filtered products
|
||||
// console.log({results:filteredProducts});
|
||||
let final = filteredProducts
|
||||
return final;
|
||||
}
|
||||
|
||||
function loadVendors(page, isFilter) {
|
||||
document.querySelector(".vendor-list").innerHTML = "";
|
||||
function loadVendors(page, isFilter) {
|
||||
document.querySelector(".vendor-list").innerHTML = "";
|
||||
|
||||
// Create a new XMLHttpRequest object for fetching vendors
|
||||
let xhrVendors = new XMLHttpRequest();
|
||||
// Create a new XMLHttpRequest object for fetching vendors
|
||||
let xhrVendors = new XMLHttpRequest();
|
||||
|
||||
// Define the endpoint URL for fetching vendors
|
||||
let vendorsEndpointURL =
|
||||
`https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/vendors/search?q=<?php echo $_GET['search'] ?>`;
|
||||
// Define the endpoint URL for fetching vendors
|
||||
let vendorsEndpointURL =
|
||||
`https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/vendors/search?q=<?php echo $_GET['search'] ?>`;
|
||||
|
||||
// Open a GET request to fetch vendors
|
||||
xhrVendors.open("GET", vendorsEndpointURL, true);
|
||||
// Open a GET request to fetch vendors
|
||||
xhrVendors.open("GET", vendorsEndpointURL, true);
|
||||
|
||||
// Set up a callback function to handle the vendors response
|
||||
xhrVendors.onreadystatechange = function() {
|
||||
if (xhrVendors.readyState === 4 && xhrVendors.status === 200) {
|
||||
// Parse the response JSON for vendors
|
||||
let vendorsResponse = JSON.parse(xhrVendors.responseText);
|
||||
// Set up a callback function to handle the vendors response
|
||||
xhrVendors.onreadystatechange = function() {
|
||||
if (xhrVendors.readyState === 4 && xhrVendors.status === 200) {
|
||||
// Parse the response JSON for vendors
|
||||
let vendorsResponse = JSON.parse(xhrVendors.responseText);
|
||||
|
||||
// Create an array to store vendor IDs
|
||||
let vendorIds = vendorsResponse.results.map(vendor => vendor._id);
|
||||
// Create an array to store vendor IDs
|
||||
let vendorIds = vendorsResponse.results.map(vendor => vendor._id);
|
||||
|
||||
// Create a new XMLHttpRequest object for fetching products
|
||||
let xhrProducts = new XMLHttpRequest();
|
||||
// Create a new XMLHttpRequest object for fetching products
|
||||
let xhrProducts = new XMLHttpRequest();
|
||||
|
||||
// Define the endpoint URL for fetching products
|
||||
let productsEndpointURL =
|
||||
`https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/products`;
|
||||
// Define the endpoint URL for fetching products
|
||||
let productsEndpointURL =
|
||||
`https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/products`;
|
||||
|
||||
// Open a GET request to fetch products
|
||||
xhrProducts.open("GET", productsEndpointURL, true);
|
||||
// Open a GET request to fetch products
|
||||
xhrProducts.open("GET", productsEndpointURL, true);
|
||||
|
||||
// Set up a callback function to handle the products response
|
||||
xhrProducts.onreadystatechange = function() {
|
||||
if (xhrProducts.readyState === 4 && xhrProducts.status === 200) {
|
||||
// Parse the response JSON for products
|
||||
let productsResponse = JSON.parse(xhrProducts.responseText);
|
||||
console.log(productsResponse)
|
||||
// Create an object to store vendor-wise product counts
|
||||
let vendorProductCounts = {};
|
||||
// Set up a callback function to handle the products response
|
||||
xhrProducts.onreadystatechange = function() {
|
||||
if (xhrProducts.readyState === 4 && xhrProducts.status === 200) {
|
||||
// Parse the response JSON for products
|
||||
let productsResponse = JSON.parse(xhrProducts.responseText);
|
||||
console.log(productsResponse)
|
||||
// Create an object to store vendor-wise product counts
|
||||
let vendorProductCounts = {};
|
||||
|
||||
// Iterate through each product and count the products associated with each vendor
|
||||
productsResponse.forEach(function(product) {
|
||||
// Increment product count for the vendor
|
||||
if (!vendorProductCounts[product.vendor_api_id]) {
|
||||
vendorProductCounts[product.vendor_api_id] = 1;
|
||||
} else {
|
||||
vendorProductCounts[product.vendor_api_id]++;
|
||||
}
|
||||
});
|
||||
// Iterate through each product and count the products associated with each vendor
|
||||
productsResponse.forEach(function(product) {
|
||||
// Increment product count for the vendor
|
||||
if (!vendorProductCounts[product.vendor_api_id]) {
|
||||
vendorProductCounts[product.vendor_api_id] = 1;
|
||||
} else {
|
||||
vendorProductCounts[product.vendor_api_id]++;
|
||||
}
|
||||
});
|
||||
|
||||
// Now, we have vendor-wise product counts, we can use it to display the counts for each vendor
|
||||
if (vendorsResponse.results.length > 0) {
|
||||
// Now, we have vendor-wise product counts, we can use it to display the counts for each vendor
|
||||
if (vendorsResponse.results.length > 0) {
|
||||
|
||||
vendorsResponse.results.slice(0, 6).forEach(function(
|
||||
vendor) {
|
||||
let vendorId = vendor._id;
|
||||
let productCount = vendorProductCounts[
|
||||
vendorId] || 0;
|
||||
let vendorDateRegistered = new Date(vendor
|
||||
.date_registered);
|
||||
vendorsResponse.results.slice(0, 6).forEach(
|
||||
function(vendor) {
|
||||
let vendorDateRegistered = "";
|
||||
let vendorId = vendor._id;
|
||||
let productCount =
|
||||
vendorProductCounts[vendorId] ||
|
||||
0;
|
||||
if (vendor.date_registered) {
|
||||
vendorDateRegistered = new Date(
|
||||
vendor.date_registered);
|
||||
} else {
|
||||
vendorDateRegistered =
|
||||
"Not yet registered";
|
||||
}
|
||||
vendorsResponse.results.slice(0, 6).forEach(function(
|
||||
vendor) {
|
||||
let vendorDateRegistered = "";
|
||||
let vendorId = vendor._id;
|
||||
let productCount = vendorProductCounts[
|
||||
vendorId] || 0;
|
||||
if (vendor.date_registered) {
|
||||
vendorDateRegistered = new Date(vendor
|
||||
.date_registered);
|
||||
} else {
|
||||
vendorDateRegistered = "Not yet registered";
|
||||
}
|
||||
|
||||
// Format the date as "Month DD, YYYY"
|
||||
let options = {
|
||||
month: 'long',
|
||||
day: '2-digit',
|
||||
year: 'numeric'
|
||||
};
|
||||
let formattedDate = "";
|
||||
if (vendorDateRegistered !==
|
||||
"Not yet registered") {
|
||||
formattedDate =
|
||||
vendorDateRegistered
|
||||
.toLocaleDateString('en-US',
|
||||
options);
|
||||
} else {
|
||||
formattedDate =
|
||||
"Not yet registered";
|
||||
}
|
||||
// Create a product card element
|
||||
let card = document.createElement(
|
||||
"div");
|
||||
card.classList.add("col-md-12");
|
||||
card.innerHTML = `
|
||||
// Format the date as "Month DD, YYYY"
|
||||
let options = {
|
||||
month: 'long',
|
||||
day: '2-digit',
|
||||
year: 'numeric'
|
||||
};
|
||||
let formattedDate = "";
|
||||
if (vendorDateRegistered !==
|
||||
"Not yet registered") {
|
||||
formattedDate = vendorDateRegistered
|
||||
.toLocaleDateString('en-US', options);
|
||||
} else {
|
||||
formattedDate = "Not yet registered";
|
||||
}
|
||||
|
||||
// Create a product card element
|
||||
let card = document.createElement("div");
|
||||
card.classList.add("col-md-12");
|
||||
card.innerHTML = `
|
||||
<div class="card" style="margin:5px">
|
||||
<div class="card-body">
|
||||
<div class="vendor-info" style="display: flex; align-items: center; flex-wrap:wrap; justify-content:center">
|
||||
|
|
@ -489,122 +477,111 @@ $filteredProducts = [];
|
|||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
// Append the product card to the container
|
||||
document.querySelector(
|
||||
".vendor-list")
|
||||
.appendChild(card);
|
||||
});
|
||||
} else {
|
||||
document.querySelector(".vendor-list")
|
||||
.innerHTML = `
|
||||
// Append the product card to the container
|
||||
document.querySelector(".vendor-list")
|
||||
.appendChild(card);
|
||||
});
|
||||
} else {
|
||||
document.querySelector(".vendor-list").innerHTML = `
|
||||
<h6>No vendors available</h6>
|
||||
|
||||
`;
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Send the request to fetch products
|
||||
xhrProducts.send();
|
||||
}
|
||||
};
|
||||
|
||||
// Send the request to fetch vendors
|
||||
xhrVendors.send();
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function loadProducts(page, isFilter) {
|
||||
// Make AJAX request to fetch products for given page
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open("GET",
|
||||
"https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/products/search?q=<?php echo $_GET['search'] ?>",
|
||||
true);
|
||||
// Send the request to fetch products
|
||||
xhrProducts.send();
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
// Parse JSON response
|
||||
let products1 = JSON.parse(xhr.responseText);
|
||||
let products = products1.results.filter(product => product
|
||||
.product
|
||||
.product_type !== 'variation');
|
||||
console.log(products);
|
||||
// if(isFilter===true){
|
||||
var checkedCategories = getCheckedCheckboxes();
|
||||
var prices = getMinMaxPrices();
|
||||
// Pass the values to your filter function
|
||||
products = filterFunction(checkedCategories, prices.minPrice,
|
||||
prices
|
||||
.maxPrice, products);
|
||||
// }
|
||||
// Construct HTML for product cards
|
||||
let productContainer = document.getElementById(
|
||||
"product-container");
|
||||
productContainer.innerHTML = ""; // Clear previous content
|
||||
console.log(products)
|
||||
let startIndex = (page - 1) * productsPerPage;
|
||||
let endIndex = startIndex + productsPerPage - 1;
|
||||
// Filter products for current page
|
||||
if (products.length > 0) {
|
||||
let productsForPage = products.slice(startIndex, endIndex +
|
||||
1);
|
||||
// Send the request to fetch vendors
|
||||
xhrVendors.send();
|
||||
|
||||
}
|
||||
|
||||
function loadProducts(page, isFilter) {
|
||||
// Make AJAX request to fetch products for given page
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open("GET",
|
||||
"https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/products/search?q=<?php echo $_GET['search'] ?>",
|
||||
true);
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
// Parse JSON response
|
||||
let products1 = JSON.parse(xhr.responseText);
|
||||
let products = products1.results.filter(product => product.product
|
||||
.product_type !== 'variation');
|
||||
console.log(products);
|
||||
// if(isFilter===true){
|
||||
var checkedCategories = getCheckedCheckboxes();
|
||||
var prices = getMinMaxPrices();
|
||||
// Pass the values to your filter function
|
||||
products = filterFunction(checkedCategories, prices.minPrice, prices
|
||||
.maxPrice, products);
|
||||
// }
|
||||
// Construct HTML for product cards
|
||||
let productContainer = document.getElementById("product-container");
|
||||
productContainer.innerHTML = ""; // Clear previous content
|
||||
console.log(products)
|
||||
let startIndex = (page - 1) * productsPerPage;
|
||||
let endIndex = startIndex + productsPerPage - 1;
|
||||
// Filter products for current page
|
||||
if (products.length > 0) {
|
||||
let productsForPage = products.slice(startIndex, endIndex + 1);
|
||||
|
||||
|
||||
productsForPage.forEach(function(prod) {
|
||||
let product = prod.product;
|
||||
let vendor = prod.vendor;
|
||||
productsForPage.forEach(function(prod) {
|
||||
let product = prod.product;
|
||||
let vendor = prod.vendor;
|
||||
|
||||
let vendorOfProduct = prod.vendor;
|
||||
// let card = document.createElement("div");
|
||||
let token = "<?php echo $_SESSION['token'] ?>";
|
||||
let email = "<?php echo $_SESSION['email'] ?>";
|
||||
let password =
|
||||
"<?php echo $_SESSION['password'] ?>";
|
||||
let customer_data =
|
||||
'<?php echo json_encode($customer_data) ?>';
|
||||
let vendorOfProduct = prod.vendor;
|
||||
// let card = document.createElement("div");
|
||||
let token = "<?php echo $_SESSION['token'] ?>";
|
||||
let email = "<?php echo $_SESSION['email'] ?>";
|
||||
let password = "<?php echo $_SESSION['password'] ?>";
|
||||
let customer_data =
|
||||
'<?php echo json_encode($customer_data) ?>';
|
||||
|
||||
// Load product images dynamically
|
||||
let imageContainer = document.createElement(
|
||||
"div");
|
||||
if (product.images && product.images.length >
|
||||
0) {
|
||||
let imageUrls = product.images.split(',');
|
||||
let firstImageUrl = imageUrls[0].trim();
|
||||
let img = document.createElement("img");
|
||||
img.setAttribute("style",
|
||||
"border: 1px solid #eeeeee; height: 330px; object-fit: cover;"
|
||||
);
|
||||
img.setAttribute("class", "main-image");
|
||||
img.setAttribute("src", firstImageUrl);
|
||||
img.setAttribute("loading", "lazy");
|
||||
// Load product images dynamically
|
||||
let imageContainer = document.createElement("div");
|
||||
if (product.images && product.images.length > 0) {
|
||||
let imageUrls = product.images.split(',');
|
||||
let firstImageUrl = imageUrls[0].trim();
|
||||
let img = document.createElement("img");
|
||||
img.setAttribute("style",
|
||||
"border: 1px solid #eeeeee; height: 330px; object-fit: cover;"
|
||||
);
|
||||
img.setAttribute("class", "main-image");
|
||||
img.setAttribute("src", firstImageUrl);
|
||||
img.setAttribute("loading", "lazy");
|
||||
|
||||
img.setAttribute("alt", "Product");
|
||||
img.className = "main-image";
|
||||
imageContainer.appendChild(img);
|
||||
} else {
|
||||
let img = document.createElement("img");
|
||||
img.className = "main-image";
|
||||
img.setAttribute("style",
|
||||
"width: 290px; height: 200px; object-fit: cover;"
|
||||
);
|
||||
img.setAttribute("loading", "lazy");
|
||||
img.setAttribute("alt", "Product");
|
||||
img.className = "main-image";
|
||||
imageContainer.appendChild(img);
|
||||
} else {
|
||||
let img = document.createElement("img");
|
||||
img.className = "main-image";
|
||||
img.setAttribute("style",
|
||||
"width: 290px; height: 200px; object-fit: cover;"
|
||||
);
|
||||
img.setAttribute("loading", "lazy");
|
||||
|
||||
img.setAttribute("class", "main-image");
|
||||
img.setAttribute("src",
|
||||
"https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"
|
||||
);
|
||||
img.setAttribute("alt", "Product");
|
||||
imageContainer.appendChild(img);
|
||||
}
|
||||
img.setAttribute("class", "main-image");
|
||||
img.setAttribute("src",
|
||||
"https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"
|
||||
);
|
||||
img.setAttribute("alt", "Product");
|
||||
imageContainer.appendChild(img);
|
||||
}
|
||||
|
||||
// Create product card
|
||||
let card = document.createElement("div");
|
||||
card.classList.add("col-lg-4", "col-md-6",
|
||||
"col-sm-6",
|
||||
"col-xs-6", "mb-6", "pro-gl-content",
|
||||
"width-100");
|
||||
card.innerHTML = `
|
||||
// Create product card
|
||||
let card = document.createElement("div");
|
||||
card.classList.add("col-lg-4", "col-md-6", "col-sm-6",
|
||||
"col-xs-6", "mb-6", "pro-gl-content", "width-100");
|
||||
card.innerHTML = `
|
||||
<div class="ec-product-inner">
|
||||
<div class="ec-pro-image-outer" style="max-width: 290px; height: 350px;">
|
||||
<div class="ec-pro-image">
|
||||
|
|
@ -639,201 +616,198 @@ $filteredProducts = [];
|
|||
|
||||
</div>
|
||||
</div>`;
|
||||
productContainer.appendChild(card);
|
||||
updatePaginationUI(page, products.length);
|
||||
});
|
||||
gridList()
|
||||
} else {
|
||||
document.getElementById("product-container").innerHTML = `
|
||||
productContainer.appendChild(card);
|
||||
updatePaginationUI(page, products.length);
|
||||
});
|
||||
gridList()
|
||||
} else {
|
||||
document.getElementById("product-container").innerHTML = `
|
||||
<h6>No products available</h6>
|
||||
|
||||
`;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
document.getElementById("product-container").innerHTML = `
|
||||
} else {
|
||||
document.getElementById("product-container").innerHTML = `
|
||||
<h6>No products available</h6>
|
||||
|
||||
`;
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function updatePaginationUI(page, totalProducts) {
|
||||
let totalPages = Math.ceil(totalProducts / productsPerPage);
|
||||
let paginationInner = document.getElementById("prod-search-pagination");
|
||||
let paginationIndicator = document.querySelector(".page-indicator");
|
||||
function updatePaginationUI(page, totalProducts) {
|
||||
let totalPages = Math.ceil(totalProducts / productsPerPage);
|
||||
let paginationInner = document.getElementById("prod-search-pagination");
|
||||
let paginationIndicator = document.querySelector(".page-indicator");
|
||||
|
||||
paginationInner.innerHTML = ""; // Clear previous pagination
|
||||
let startPage = 1;
|
||||
let endPage = totalPages;
|
||||
paginationInner.innerHTML = ""; // Clear previous pagination
|
||||
let startPage = 1;
|
||||
let endPage = totalPages;
|
||||
|
||||
const visiblePages = 5; // Number of visible page links excluding ellipses
|
||||
const visiblePages = 5; // Number of visible page links excluding ellipses
|
||||
|
||||
if (totalPages > visiblePages) {
|
||||
if (page <= Math.ceil(visiblePages / 2)) {
|
||||
endPage = visiblePages;
|
||||
} else if (page >= totalPages - Math.floor(visiblePages / 2)) {
|
||||
startPage = totalPages - visiblePages + 1;
|
||||
} else {
|
||||
startPage = page - Math.floor(visiblePages / 2);
|
||||
endPage = page + Math.ceil(visiblePages / 2) - 1;
|
||||
}
|
||||
}
|
||||
if (totalPages > visiblePages) {
|
||||
if (page <= Math.ceil(visiblePages / 2)) {
|
||||
endPage = visiblePages;
|
||||
} else if (page >= totalPages - Math.floor(visiblePages / 2)) {
|
||||
startPage = totalPages - visiblePages + 1;
|
||||
} else {
|
||||
startPage = page - Math.floor(visiblePages / 2);
|
||||
endPage = page + Math.ceil(visiblePages / 2) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Display ellipsis at the beginning if necessary
|
||||
if (startPage > 1) {
|
||||
let firstPageLi = document.createElement("li");
|
||||
let firstPageLink = document.createElement("a");
|
||||
firstPageLink.setAttribute("href", "#");
|
||||
firstPageLink.setAttribute("data-page", 1);
|
||||
firstPageLink.textContent = 1;
|
||||
firstPageLi.appendChild(firstPageLink);
|
||||
paginationInner.appendChild(firstPageLi);
|
||||
// Display ellipsis at the beginning if necessary
|
||||
if (startPage > 1) {
|
||||
let firstPageLi = document.createElement("li");
|
||||
let firstPageLink = document.createElement("a");
|
||||
firstPageLink.setAttribute("href", "#");
|
||||
firstPageLink.setAttribute("data-page", 1);
|
||||
firstPageLink.textContent = 1;
|
||||
firstPageLi.appendChild(firstPageLink);
|
||||
paginationInner.appendChild(firstPageLi);
|
||||
|
||||
// Display ellipsis after the first page link if necessary
|
||||
if (startPage > 2) {
|
||||
let ellipsisLi = document.createElement("li");
|
||||
ellipsisLi.textContent = "...";
|
||||
paginationInner.appendChild(ellipsisLi);
|
||||
}
|
||||
}
|
||||
// Display ellipsis after the first page link if necessary
|
||||
if (startPage > 2) {
|
||||
let ellipsisLi = document.createElement("li");
|
||||
ellipsisLi.textContent = "...";
|
||||
paginationInner.appendChild(ellipsisLi);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
let li = document.createElement("li");
|
||||
let a = document.createElement("a");
|
||||
a.setAttribute("href", "#");
|
||||
a.setAttribute("data-page", i);
|
||||
a.textContent = i;
|
||||
if (i === page) {
|
||||
a.classList.add("active");
|
||||
}
|
||||
li.appendChild(a);
|
||||
paginationInner.appendChild(li);
|
||||
}
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
let li = document.createElement("li");
|
||||
let a = document.createElement("a");
|
||||
a.setAttribute("href", "#");
|
||||
a.setAttribute("data-page", i);
|
||||
a.textContent = i;
|
||||
if (i === page) {
|
||||
a.classList.add("active");
|
||||
}
|
||||
li.appendChild(a);
|
||||
paginationInner.appendChild(li);
|
||||
}
|
||||
|
||||
|
||||
// Display ellipsis at the end if necessary
|
||||
if (endPage < totalPages) {
|
||||
let li = document.createElement("li");
|
||||
li.textContent = "...";
|
||||
paginationInner.appendChild(li);
|
||||
// Display ellipsis at the end if necessary
|
||||
if (endPage < totalPages) {
|
||||
let li = document.createElement("li");
|
||||
li.textContent = "...";
|
||||
paginationInner.appendChild(li);
|
||||
|
||||
let lastPageLi = document.createElement("li");
|
||||
let lastPageLink = document.createElement("a");
|
||||
lastPageLink.setAttribute("href", "#");
|
||||
lastPageLink.setAttribute("data-page", totalPages);
|
||||
lastPageLink.textContent = totalPages;
|
||||
lastPageLi.appendChild(lastPageLink);
|
||||
paginationInner.appendChild(lastPageLi);
|
||||
}
|
||||
let lastPageLi = document.createElement("li");
|
||||
let lastPageLink = document.createElement("a");
|
||||
lastPageLink.setAttribute("href", "#");
|
||||
lastPageLink.setAttribute("data-page", totalPages);
|
||||
lastPageLink.textContent = totalPages;
|
||||
lastPageLi.appendChild(lastPageLink);
|
||||
paginationInner.appendChild(lastPageLi);
|
||||
}
|
||||
|
||||
// Update pagination indicator
|
||||
let startIndex = (page - 1) * productsPerPage + 1;
|
||||
let endIndex = Math.min(startIndex + productsPerPage - 1, totalProducts);
|
||||
paginationIndicator.textContent = "Showing " + startIndex + " to " +
|
||||
endIndex + " of " +
|
||||
totalProducts + " item(s)";
|
||||
}
|
||||
// Update pagination indicator
|
||||
let startIndex = (page - 1) * productsPerPage + 1;
|
||||
let endIndex = Math.min(startIndex + productsPerPage - 1, totalProducts);
|
||||
paginationIndicator.textContent = "Showing " + startIndex + " to " + endIndex + " of " +
|
||||
totalProducts + " item(s)";
|
||||
}
|
||||
|
||||
function getCheckedCheckboxes() {
|
||||
var checkboxes = document.querySelectorAll(
|
||||
'input[name="category[]"]:checked');
|
||||
var values = [];
|
||||
checkboxes.forEach(function(checkbox) {
|
||||
values.push(checkbox.value.toLowerCase().trim());
|
||||
});
|
||||
return values;
|
||||
}
|
||||
function getCheckedCheckboxes() {
|
||||
var checkboxes = document.querySelectorAll('input[name="category[]"]:checked');
|
||||
var values = [];
|
||||
checkboxes.forEach(function(checkbox) {
|
||||
values.push(checkbox.value.toLowerCase().trim());
|
||||
});
|
||||
return values;
|
||||
}
|
||||
|
||||
// Function to get min and max prices
|
||||
function getMinMaxPrices() {
|
||||
var minPrice = document.getElementById('minPrice').value;
|
||||
var maxPrice = document.getElementById('maxPrice').value;
|
||||
return {
|
||||
minPrice: minPrice,
|
||||
maxPrice: maxPrice
|
||||
};
|
||||
}
|
||||
// Function to get min and max prices
|
||||
function getMinMaxPrices() {
|
||||
var minPrice = document.getElementById('minPrice').value;
|
||||
var maxPrice = document.getElementById('maxPrice').value;
|
||||
return {
|
||||
minPrice: minPrice,
|
||||
maxPrice: maxPrice
|
||||
};
|
||||
}
|
||||
|
||||
// Function to handle form submission
|
||||
function applyFilters() {
|
||||
var checkedCategories = getCheckedCheckboxes();
|
||||
var prices = getMinMaxPrices();
|
||||
// Pass the values to your filter function
|
||||
filterFunction(checkedCategories, prices.minPrice, prices.maxPrice);
|
||||
}
|
||||
// Function to handle form submission
|
||||
function applyFilters() {
|
||||
var checkedCategories = getCheckedCheckboxes();
|
||||
var prices = getMinMaxPrices();
|
||||
// Pass the values to your filter function
|
||||
filterFunction(checkedCategories, prices.minPrice, prices.maxPrice);
|
||||
}
|
||||
|
||||
|
||||
var checkboxes = document.querySelectorAll('input[name="category[]"]');
|
||||
checkboxes.forEach(function(checkbox) {
|
||||
checkbox.addEventListener('change', function() {
|
||||
loadProducts(1, true);
|
||||
});
|
||||
});
|
||||
var checkboxes = document.querySelectorAll('input[name="category[]"]');
|
||||
checkboxes.forEach(function(checkbox) {
|
||||
checkbox.addEventListener('change', function() {
|
||||
loadProducts(1, true);
|
||||
});
|
||||
});
|
||||
|
||||
function gridList(e) {
|
||||
console.log("hereeeee")
|
||||
var $gridCont = $('.shop-pro-inner');
|
||||
var $gridView = $('.pro-gl-content');
|
||||
// e.preventDefault();
|
||||
$gridCont.removeClass('list-view');
|
||||
$gridView.removeClass('width-100');
|
||||
}
|
||||
// Listen for changes in min and max price inputs
|
||||
var minPriceInput = document.getElementById('minPrice');
|
||||
minPriceInput.addEventListener('input', function() {
|
||||
loadProducts(1, true);
|
||||
});
|
||||
function gridList(e) {
|
||||
console.log("hereeeee")
|
||||
var $gridCont = $('.shop-pro-inner');
|
||||
var $gridView = $('.pro-gl-content');
|
||||
// e.preventDefault();
|
||||
$gridCont.removeClass('list-view');
|
||||
$gridView.removeClass('width-100');
|
||||
}
|
||||
// Listen for changes in min and max price inputs
|
||||
var minPriceInput = document.getElementById('minPrice');
|
||||
minPriceInput.addEventListener('input', function() {
|
||||
loadProducts(1, true);
|
||||
});
|
||||
|
||||
var maxPriceInput = document.getElementById('maxPrice');
|
||||
maxPriceInput.addEventListener('input', function() {
|
||||
loadProducts(1, true);
|
||||
});
|
||||
var maxPriceInput = document.getElementById('maxPrice');
|
||||
maxPriceInput.addEventListener('input', function() {
|
||||
loadProducts(1, true);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
document.getElementById("prod-search-pagination").addEventListener("click",
|
||||
function(
|
||||
event) {
|
||||
if (event.target.tagName.toLowerCase() === "a") {
|
||||
event.preventDefault(); // Prevent default link behavior
|
||||
let page = parseInt(event.target.getAttribute("data-page"));
|
||||
currentPage = page;
|
||||
loadProducts(page, false);
|
||||
// Scroll to top
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth" // Optional smooth scrolling behavior
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("prod-search-pagination").addEventListener("click", function(
|
||||
event) {
|
||||
if (event.target.tagName.toLowerCase() === "a") {
|
||||
event.preventDefault(); // Prevent default link behavior
|
||||
let page = parseInt(event.target.getAttribute("data-page"));
|
||||
currentPage = page;
|
||||
loadProducts(page, false);
|
||||
// Scroll to top
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth" // Optional smooth scrolling behavior
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Load initial products on page load
|
||||
loadProducts(currentPage);
|
||||
// Attach click event listeners to pagination links
|
||||
// document.getElementById("pagination-container").addEventListener("click", function(event) {
|
||||
// if (event.target.tagName.toLowerCase() === "a") {
|
||||
// event.preventDefault(); // Prevent default link behavior
|
||||
// let page = event.target.getAttribute("data-page");
|
||||
// loadProducts(page); // Load products for the clicked page
|
||||
// }
|
||||
// });
|
||||
// Load initial products on page load
|
||||
loadProducts(currentPage);
|
||||
// Attach click event listeners to pagination links
|
||||
// document.getElementById("pagination-container").addEventListener("click", function(event) {
|
||||
// if (event.target.tagName.toLowerCase() === "a") {
|
||||
// event.preventDefault(); // Prevent default link behavior
|
||||
// let page = event.target.getAttribute("data-page");
|
||||
// loadProducts(page); // Load products for the clicked page
|
||||
// }
|
||||
// });
|
||||
|
||||
// // Attach event listener to search form or button
|
||||
// document.getElementById("search-form").addEventListener("submit", function(event) {
|
||||
// event.preventDefault(); // Prevent default form submission
|
||||
// let searchQuery = document.getElementById("search-input").value;
|
||||
// console.log(searchQuery + " search clicked");
|
||||
// // Make AJAX request to fetch products based on search query
|
||||
// // You need to implement this part in a similar way to loading products
|
||||
// });
|
||||
});
|
||||
// // Attach event listener to search form or button
|
||||
// document.getElementById("search-form").addEventListener("submit", function(event) {
|
||||
// event.preventDefault(); // Prevent default form submission
|
||||
// let searchQuery = document.getElementById("search-input").value;
|
||||
// console.log(searchQuery + " search clicked");
|
||||
// // Make AJAX request to fetch products based on search query
|
||||
// // You need to implement this part in a similar way to loading products
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
<!-- Sidebar Area Start -->
|
||||
<div class="ec-shop-leftside col-lg-3 order-lg-first col-md-12 order-md-last">
|
||||
|
|
@ -1279,7 +1253,7 @@ $filteredProducts = [];
|
|||
<h6>stylish baby shoes</h6>
|
||||
<p>10 Minutes ago</p>
|
||||
</div>
|
||||
<a href="javascript:void(0)" class="icon-btn recent-close">×</a>
|
||||
<a href="javascript:void(0)" class="icon-btn recent-close">×</a>
|
||||
</div> -->
|
||||
<!-- Recent Purchase Popup end -->
|
||||
|
||||
|
|
@ -1393,4 +1367,11 @@ $filteredProducts = [];
|
|||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Powered by Gitea
|
||||
Version: 1.21.5 Page:
|
||||
215ms
|
||||
Template:
|
||||
22ms
|
||||
Licenses
|
||||
API
|
||||
Loading…
Reference in New Issue