369 lines
16 KiB
PHP
369 lines
16 KiB
PHP
<?php
|
|
// Prevent direct access to file
|
|
defined(security_key) or exit;
|
|
|
|
//Pagination
|
|
$current_page = isset($_GET['p']) && is_numeric($_GET['p']) ? (int)$_GET['p'] : 1;
|
|
$num_products_on_each_page = 25;
|
|
|
|
//GET Details from URL
|
|
$GET_VALUES = urlGETdetails($_GET) ?? '';
|
|
|
|
//Get all the categories from cached data
|
|
$categories = $GLOBALS['cached_categories'];
|
|
|
|
// Deduplicate categories by rowID (since categories repeat for each product)
|
|
$unique_categories = [];
|
|
foreach ($categories as $cat) {
|
|
$unique_categories[$cat['rowID']] = $cat;
|
|
}
|
|
$categories = array_values($unique_categories);
|
|
|
|
//Get all products from cached data
|
|
$products = $GLOBALS['cached_catalog'];
|
|
|
|
// Build product-to-categories mapping for filtering
|
|
$product_categories_map = [];
|
|
foreach ($GLOBALS['cached_categories'] as $cat) {
|
|
if (isset($cat['product_id'])) {
|
|
$product_id = $cat['product_id'];
|
|
if (!isset($product_categories_map[$product_id])) {
|
|
$product_categories_map[$product_id] = [];
|
|
}
|
|
// Only add categories that have status=1 and filter=1
|
|
if (isset($cat['status']) && $cat['status'] == 1) {
|
|
$product_categories_map[$product_id][] = $cat['rowID'];
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add categories array to each product for JavaScript filtering
|
|
foreach ($products as &$product) {
|
|
$product_id = $product['rowID'];
|
|
$product['category_ids'] = isset($product_categories_map[$product_id])
|
|
? array_unique($product_categories_map[$product_id])
|
|
: [];
|
|
}
|
|
unset($product);
|
|
|
|
$total_products = count($products);
|
|
|
|
// Get URL category filter if present
|
|
$url_category_filter = isset($_GET['category']) ? explode(',', $_GET['category']) : [];
|
|
|
|
// Expand parent categories to include all their children
|
|
$expanded_filters = [];
|
|
foreach ($url_category_filter as $cat_id) {
|
|
$expanded_filters[] = $cat_id;
|
|
// Find all children of this category
|
|
foreach ($unique_categories as $cat) {
|
|
if ($cat['parent_id'] == $cat_id && $cat['status'] == 1 && $cat['filter'] == 1) {
|
|
$expanded_filters[] = $cat['rowID'];
|
|
}
|
|
}
|
|
}
|
|
$url_category_filter = array_unique($expanded_filters);
|
|
|
|
// Debug: log what category was received
|
|
if (debug && !empty($url_category_filter)) {
|
|
debuglog('URL category filter (expanded): ' . implode(',', $url_category_filter));
|
|
}
|
|
|
|
//SORT BY NAME
|
|
usort($products, function($a, $b) {
|
|
return strcmp($a['productname'], $b['productname']);
|
|
});
|
|
|
|
//INCLUDE THE HEADER
|
|
$view = template_header($products_text,'');
|
|
|
|
$view .= '
|
|
<!-- Hero Section -->
|
|
<section class="hero hero-products" style="background-image:url('.base_url.featured_store_image.');">
|
|
<div class="hero-content">
|
|
<h1>'.$h1_content_top.'</h1>
|
|
</div>
|
|
</section>';
|
|
|
|
|
|
$view .= '
|
|
<div class="container" style="padding: 20px;">
|
|
<button class="filter-button" id="filterToggle">'.($products_filters_h2 ?? 'Show filters').'</button>
|
|
|
|
<div class="filters-products-container">
|
|
|
|
<div class="filters" id="filters">
|
|
<div class="filter-container">';
|
|
|
|
if (count($categories) > 0){
|
|
//BUILD UP FILTERS BASED ON CATEGORY ASSIGNMENTS
|
|
foreach ($categories as $filters){
|
|
|
|
if ($filters['parent_id'] == '0' && $filters['status'] == 1 && $filters['filter'] == 1){
|
|
$view .= '<div class="filter-section">
|
|
<h3>'.(${$filters['name']} ?? $filters['name']).'</h3>
|
|
<div class="filter-options"> ';
|
|
//Iterate through categories for subfilters
|
|
foreach ($categories as $subfilter){
|
|
if ($filters['rowID'] == $subfilter['parent_id'] && $subfilter['status'] == 1 && $subfilter['filter'] == 1){
|
|
$checked = in_array($subfilter['rowID'], $url_category_filter) ? 'checked' : '';
|
|
$view .= '
|
|
<div class="filter-option">
|
|
<input type="checkbox" class="filter-checkbox" id="cat_'.$subfilter['rowID'].'" data-category="'.$subfilter['rowID'].'" '.$checked.'>
|
|
<label for="cat_'.$subfilter['rowID'].'">'.(${$subfilter['name']} ?? $subfilter['name']).'</label>
|
|
</div>';
|
|
}
|
|
}
|
|
$view .= '</div>
|
|
</div>';
|
|
}
|
|
}
|
|
$view .= '
|
|
<div class="filter-option">
|
|
<button type="button" id="clearFilters" class="btn" style="display:none;">'.($btn_clear_filters ?? 'Clear Filters').'</button>
|
|
</div>';
|
|
}
|
|
$view .= '</div>
|
|
</div>
|
|
<div class="products">
|
|
<div class="product-grid">';
|
|
|
|
foreach ($products as $product){
|
|
|
|
// Ensure product price is a numeric value
|
|
$product_price = isset($product['price']) && $product['price'] > 0 ? floatval($product['price']) : 0.00;
|
|
|
|
|
|
$view .= '
|
|
<div class="product-card" data-categories="'.implode(',', $product['category_ids']).'" data-product-id="'.$product['rowID'].'">
|
|
<a href="'.url('index.php?page=product&rowID=' . ($product['url_slug'] ? ($product['url_slug'] ) : $product['rowID'])).(!empty($product['main_option_for_display']) ? '/'.$product['main_option_for_display']:'').'" id="'.$product['rowID'].'A" class="product">
|
|
<img src="'.img_url.$product['full_path'].'" id="'.$product['rowID'].'" width="" height="250" alt="'.(${$product['productname']} ?? $product['productname']).'">
|
|
</a>';
|
|
|
|
//CHECK IF CONFIGURATION SETTING IS FOUND AND NOT EMPTY => USE GROUP TO DISPLAY IMAGES
|
|
if (isset($product['configurations']) && isset($product['config_setting']) && $product['config_setting'] != ''){
|
|
|
|
|
|
//GET THE CONFIG_SETTING GROuP AND DISPLAY
|
|
foreach ($product['configurations'] as $config){
|
|
|
|
//MATCH ASSIGNMENT WITH CONFIG SETTING
|
|
if($config['assignment'] == $product['config_setting']){
|
|
|
|
$view .= '<div class="" style="display:flex;justify-content: center">';
|
|
|
|
//GET ALL RELATED ATTRIBUTES
|
|
foreach ($config['attributes'] as $attribute){
|
|
$option_id = $attribute['attribute_id']; // ID of the LARGE IMAGE
|
|
$IMG_small_id = img_url.$attribute['full_path']; //URL TO SMALL IMAGE
|
|
$IMG_large_id = img_url.$attribute['alternative_media_full_path']; //URL TO LARGE IMAGE
|
|
|
|
// Ensure attribute price is a numeric value
|
|
$attribute_price = isset($attribute['price']) ? floatval($attribute['price']) : 0.00;
|
|
|
|
$option_price = isset($attribute['price'])
|
|
// If price modifier is 1, add prices; otherwise, subtract
|
|
? ((isset($attribute['price_modifier']) && $attribute['price_modifier'] == 1) ? currency_code . number_format(floatval($product_price + $attribute_price), 2) : currency_code . number_format(floatval($product_price - $attribute_price), 2))
|
|
// If product price is not zero, format it
|
|
: (($product_price != 0.00) ? currency_code . number_format(floatval($product_price), 2) : '');
|
|
|
|
$view .= '
|
|
<div>
|
|
<img class="img_config" src="'.$IMG_small_id.'" id="'.$attribute['item_media'].'" onclick="update(\''.$product['rowID'].'\',\''.$IMG_large_id.'\',\''.url('index.php?page=product&rowID=' . ($product['url_slug'] ? $product['url_slug'].'/'.$option_id : $product['rowID'].'/'.$option_id )).'\',\''.$option_price.'\')" />
|
|
</div>';
|
|
}
|
|
|
|
$view .= '</div>';
|
|
|
|
}
|
|
}
|
|
|
|
} else {
|
|
//SHOW SMALL IMAGE
|
|
$view .= '<div class="" style="display:flex;justify-content: center">
|
|
<div>
|
|
<img class="img_config" src="'.img_url.$product['full_path'].'"/>
|
|
</div>
|
|
</div>';
|
|
}
|
|
|
|
//Stock status
|
|
$stock_status = (isset($product['quantity']) && $product['quantity'] != 0) ? $product_on_stock : $out_of_stock;
|
|
$style = ($stock_status == $product_on_stock) ? 'style="color: green;"' : 'style="background-color:gray;font-weight: lighter;"';
|
|
|
|
$view .= '
|
|
<span class="stock">
|
|
<p '.$style.'> '.$stock_status.'</p>
|
|
</span>';
|
|
|
|
if (free_shipment_indicator){
|
|
$shipment = freeShipment($product_price,'span');
|
|
$view .= $shipment;
|
|
}
|
|
$option_id ='';
|
|
$view .='<a href="'.url('index.php?page=product&rowID=' . ($product['url_slug'] ? $product['url_slug'].$option_id : $product['rowID'])).'" id="'.$product['rowID'].'B" class="product">
|
|
<span class="products_name">'.(${$product['productname']} ?? $product['productname']).'</span>';
|
|
|
|
if (isset($product_price)){
|
|
|
|
$view .= '<span class="products_price" id="'.$product['rowID'].'C">'.(($product_price != 0.00) ? '<span class="price-from">'.$price_from.' </span>'.currency_code.number_format($product_price,2) : '').'';
|
|
|
|
if (isset($product['rrp']) && $product['rrp'] > 0){
|
|
$view .= '<span class="products_rrp">'.currency_code.number_format($product['rrp'],2).'</span>';
|
|
}
|
|
$view .= '</span>';
|
|
}
|
|
$view .= '
|
|
</a>
|
|
</div>';
|
|
}
|
|
$view .= '
|
|
</div>
|
|
<div class="buttons">';
|
|
if ($current_page > 1) {
|
|
$view .= '<a href="'.url('index.php?page=products&p=' . ($current_page-1) . $url_input . '&sort=' . $sort).'" class="btn">Prev</a>';
|
|
}
|
|
if ($total_products > ($current_page * $num_products_on_each_page)){
|
|
$view .= '<a href="'.url('index.php?page=products&p=' . ($current_page+1) . $url_input . '&sort=' . $sort).'" class="btn">Next</a>';
|
|
}
|
|
$view .= '</div>';
|
|
|
|
$view .= '
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>';
|
|
|
|
|
|
$view .= template_footer();
|
|
|
|
$view .= '
|
|
<script>
|
|
function update(id_large, IMG_large, option_id, price){
|
|
let url_id_a = id_large + \'A\';
|
|
let url_id_b = id_large + \'B\';
|
|
let url_id_c = id_large + \'C\';
|
|
|
|
//change picture
|
|
document.getElementById(id_large).src = IMG_large;
|
|
document.getElementById(url_id_a).href = option_id;
|
|
document.getElementById(url_id_b).href = option_id;
|
|
document.getElementById(url_id_c).innerHTML = price;
|
|
document.getElementById(url_id_c).style = price;
|
|
}
|
|
</script>
|
|
<script>
|
|
// Filter toggle for mobile
|
|
const filterToggle = document.getElementById(\'filterToggle\');
|
|
const filters = document.getElementById(\'filters\');
|
|
|
|
filterToggle.addEventListener(\'click\', () => {
|
|
filters.classList.toggle(\'show\');
|
|
filterToggle.textContent = filters.classList.contains(\'show\') ? \'Hide Filters\' : \'Show Filters\';
|
|
});
|
|
|
|
// Client-side product filtering
|
|
const filterCheckboxes = document.querySelectorAll(\'.filter-checkbox\');
|
|
const productCards = document.querySelectorAll(\'.product-card\');
|
|
const clearFiltersBtn = document.getElementById(\'clearFilters\');
|
|
let activeFilters = new Set();
|
|
|
|
console.log(\'Filter system initialized\');
|
|
console.log(\'Total checkboxes:\', filterCheckboxes.length);
|
|
console.log(\'Total product cards:\', productCards.length);
|
|
|
|
// Debug: Log all product categories
|
|
productCards.forEach((card, idx) => {
|
|
if (idx < 3) {
|
|
console.log(\'Product\', idx, \'categories:\', card.getAttribute(\'data-categories\'));
|
|
}
|
|
});
|
|
|
|
// Debug: Log all filter categories
|
|
const filterCategories = [];
|
|
filterCheckboxes.forEach(checkbox => {
|
|
filterCategories.push(checkbox.getAttribute(\'data-category\'));
|
|
});
|
|
console.log(\'Filter categories:\', filterCategories);
|
|
|
|
// Initialize filters from pre-checked checkboxes (from URL params)
|
|
filterCheckboxes.forEach(checkbox => {
|
|
if (checkbox.checked) {
|
|
const category = checkbox.getAttribute(\'data-category\');
|
|
activeFilters.add(category);
|
|
}
|
|
});
|
|
|
|
// Run initial filter if there are pre-selected categories
|
|
if (activeFilters.size > 0) {
|
|
filterProducts();
|
|
}
|
|
|
|
// Filter products based on selected categories
|
|
function filterProducts() {
|
|
let visibleCount = 0;
|
|
|
|
console.log(\'Active filters:\', Array.from(activeFilters));
|
|
|
|
productCards.forEach(card => {
|
|
const productCategoriesStr = card.getAttribute(\'data-categories\');
|
|
const productCategories = productCategoriesStr ? productCategoriesStr.split(\',\') : [];
|
|
|
|
// If no filters active, show all products
|
|
if (activeFilters.size === 0) {
|
|
card.style.display = \'\';
|
|
visibleCount++;
|
|
} else {
|
|
// Show product if ANY of its categories match the active filters
|
|
const hasMatch = productCategories.some(cat => activeFilters.has(cat));
|
|
if (hasMatch) {
|
|
card.style.display = \'\';
|
|
visibleCount++;
|
|
} else {
|
|
card.style.display = \'none\';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Show/hide clear button
|
|
if (clearFiltersBtn) {
|
|
clearFiltersBtn.style.display = activeFilters.size > 0 ? \'inline-block\' : \'none\';
|
|
}
|
|
|
|
console.log(\'Showing \' + visibleCount + \' of \' + productCards.length + \' products\');
|
|
}
|
|
|
|
// Add event listeners to checkboxes
|
|
filterCheckboxes.forEach(checkbox => {
|
|
checkbox.addEventListener(\'change\', function() {
|
|
const category = this.getAttribute(\'data-category\');
|
|
console.log(\'Checkbox changed:\', category, \'checked:\', this.checked);
|
|
|
|
if (this.checked) {
|
|
activeFilters.add(category);
|
|
} else {
|
|
activeFilters.delete(category);
|
|
}
|
|
|
|
filterProducts();
|
|
});
|
|
});
|
|
|
|
// Clear all filters
|
|
if (clearFiltersBtn) {
|
|
clearFiltersBtn.addEventListener(\'click\', () => {
|
|
filterCheckboxes.forEach(checkbox => {
|
|
checkbox.checked = false;
|
|
});
|
|
activeFilters.clear();
|
|
filterProducts();
|
|
});
|
|
}
|
|
</script>
|
|
';
|
|
|
|
//OUTPUT
|
|
echo $view;
|
|
|
|
|
|
?>
|