🖥️ Server: LiteSpeed
💻 System: Linux in-mum-web1643.main-hosting.eu 5.14.0-687.46.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Sep 11 09:03:19 EDT 2026 x86_64
👤 User: u621169360 (621169360)
🐘 PHP: 8.2.33
🚫 Disabled: system, exec, shell_exec, passthru, mysql_list_dbs, ini_alter, dl, link, chgrp, leak, popen, apache_child_terminate, virtual, mb_send_mail
📄 shop.php
📁 Path: /home/u621169360/domains/papayawhip-cod-251399.hostingersite.com/public_html/shop.php
📊 Size: 27.93 KB
🔒 Perm: 0644
📝 MIME: text/x-php
<?php
session_start();
require_once __DIR__ . '/admin-panal/includes/db.php';
$filterCat = (int)($_GET['cat'] ?? 0);
$filterSub = (int)($_GET['sub'] ?? 0);
$sortBy = $_GET['sort'] ?? 'newest';
// Fetch all categories & subcategories for filters
$allCats = $pdo->query('SELECT * FROM categories ORDER BY sort_order, name')->fetchAll(PDO::FETCH_ASSOC);
$allSubs = $pdo->query('SELECT * FROM subcategories ORDER BY sort_order, name')->fetchAll(PDO::FETCH_ASSOC);
// Base query
$sql = '
SELECT p.*, c.name AS category_name, c.slug AS category_slug
FROM products p
LEFT JOIN categories c ON c.id = CAST(SUBSTRING_INDEX(p.category_id, ",", 1) AS UNSIGNED)
WHERE p.is_active = 1
';
$params = [];
if ($filterCat) {
$sql .= ' AND FIND_IN_SET(?, p.category_id)';
$params[] = $filterCat;
}
if ($filterSub) {
$sql .= ' AND FIND_IN_SET(?, p.subcategory_id)';
$params[] = $filterSub;
}
$orderClause = ' ORDER BY p.created_at DESC';
if ($sortBy === 'price_low') $orderClause = ' ORDER BY p.price_usd ASC';
elseif ($sortBy === 'price_high') $orderClause = ' ORDER BY p.price_usd DESC';
elseif ($sortBy === 'name_az') $orderClause = ' ORDER BY p.name ASC';
$sql .= $orderClause;
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Page title
$pageTitle = 'Shop All';
$catName = '';
$subName = '';
if ($filterCat) {
$cStmt = $pdo->prepare('SELECT name FROM categories WHERE id = ?');
$cStmt->execute([$filterCat]);
$catName = $cStmt->fetchColumn();
if ($catName) $pageTitle = $catName;
}
if ($filterSub) {
$sStmt = $pdo->prepare('SELECT name FROM subcategories WHERE id = ?');
$sStmt->execute([$filterSub]);
$subName = $sStmt->fetchColumn();
if ($subName) $pageTitle = $subName;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Z2X2T395KZ');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?= htmlspecialchars($pageTitle) ?> — Elegance of India</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<style>
/* ── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* ── PAGE TITLE BAR ─────────────────────────────────────── */
.plp-hero {
text-align: center;
padding: 48px 24px 28px;
background: #faf9f7;
border-bottom: 1px solid #e8e0d5;
}
.plp-hero__title {
font-family: inherit;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #000;
margin: 0;
}
.plp-hero__count {
margin-top: 10px;
font-size: 11px;
letter-spacing: 0.12em;
color: #666;
text-transform: uppercase;
font-weight: 500;
}
/* ── WRAPPER ────────────────────────────────────────────── */
.plp-outer {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px 80px;
}
/* ── BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
letter-spacing: 0.06em;
color: #333;
padding: 20px 0 0;
}
.breadcrumb a { color: #555; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: #000; }
.breadcrumb .sep { font-size: 8px; color: #999; }
.breadcrumb .current { color: #000; font-weight: 500; }
/* ── TOOLBAR ────────────────────────────────────────────── */
.plp-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0 16px;
border-bottom: 1px solid #e8e0d5;
gap: 12px;
flex-wrap: wrap;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 10px;
}
.btn-filter-toggle {
display: flex;
align-items: center;
gap: 7px;
background: none;
border: 1px solid #ccc;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 16px;
cursor: pointer;
color: #333;
border-radius: 2px;
transition: background .2s, border-color .2s;
}
.btn-filter-toggle:hover, .btn-filter-toggle.active {
background: #1a1712;
color: #fff;
border-color: #1a1712;
}
.toolbar-right {
display: flex;
align-items: center;
gap: 14px;
}
.sort-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.sort-label {
font-size: 11px;
letter-spacing: 0.1em;
color: #1a1712;
text-transform: uppercase;
font-weight: 500;
}
.sort-select {
font-size: 11px;
border: 1px solid #ccc;
padding: 7px 30px 7px 10px;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;
cursor: pointer;
color: #333;
min-width: 150px;
}
.grid-switcher {
display: flex;
align-items: center;
gap: 4px;
}
.grid-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid #ccc;
border-radius: 2px;
cursor: pointer;
color: #999;
transition: all .2s;
padding: 0;
}
.grid-btn.active, .grid-btn:hover {
background: #1a1712;
border-color: #1a1712;
color: #fff;
}
.grid-btn svg { width: 14px; height: 14px; fill: currentColor; }
/* ── BODY: SIDEBAR + GRID ───────────────────────────────── */
.plp-body {
display: flex;
gap: 32px;
margin-top: 0;
align-items: flex-start;
}
/* ── FILTER SIDEBAR ─────────────────────────────────────── */
.plp-sidebar {
width: 220px;
flex-shrink: 0;
transition: width .3s ease, opacity .3s ease, margin .3s ease;
overflow: hidden;
}
.plp-sidebar.hidden {
width: 0;
opacity: 0;
margin-right: -32px;
}
.filter-block {
border-bottom: 1px solid #e8e0d5;
padding: 16px 0;
}
.filter-block:first-child { padding-top: 20px; }
.filter-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #1a1712;
cursor: pointer;
user-select: none;
padding-bottom: 0;
}
.filter-title .chevron {
transition: transform .25s;
font-size: 9px;
color: #888;
}
.filter-title.open .chevron { transform: rotate(180deg); }
.filter-body {
overflow: hidden;
max-height: 0;
transition: max-height .3s ease;
}
.filter-body.open { max-height: 500px; }
.filter-list {
list-style: none;
padding: 12px 0 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-list li a {
font-size: 12px;
color: #555;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: color .2s;
}
.filter-list li a:hover, .filter-list li a.active { color: #1a1712; font-weight: 500; }
.filter-list li a .tick {
width: 14px;
height: 14px;
border: 1px solid #ccc;
border-radius: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
flex-shrink: 0;
transition: background .2s, border-color .2s;
}
.filter-list li a.active .tick {
background: #1a1712;
border-color: #1a1712;
color: #fff;
}
.filter-clear {
display: inline-block;
margin-top: 14px;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #c9a96e;
text-decoration: underline;
cursor: pointer;
}
/* ── PRODUCT GRID ───────────────────────────────────────── */
.plp-main-col { flex: 1; min-width: 0; }
.plp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px 12px;
transition: grid-template-columns .3s ease;
}
.plp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.plp-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.plp-card__img-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 2/3;
background: #f5f3f0;
}
.plp-card__img-wrap img, .plp-card__img-wrap video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.85s ease;
}
.plp-card:hover .plp-card__img-wrap img:first-child { transform: scale(1.04); }
.plp-hover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.55s ease;
}
.plp-card:hover .plp-hover-img { opacity: 1; }
.plp-card__badge {
position: absolute;
top: 10px;
left: 10px;
background: #1a1712;
color: #fff;
font-family: 'Jost', sans-serif;
font-size: 8px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 8px;
z-index: 1;
}
.plp-card__wishlist {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #333;
opacity: 0;
transform: translateY(-6px);
transition: opacity .3s, transform .3s, color .2s;
border: none;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.10);
z-index: 1;
}
.plp-card:hover .plp-card__wishlist { opacity: 1; transform: translateY(0); }
.plp-card__wishlist:hover { color: #c0392b; }
.plp-card__info { padding: 15px 0 0; text-align: center; }
.plp-card__designer {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1712;
margin-bottom: 8px;
}
.plp-card__name {
font-size: 13px;
font-weight: 400;
color: #1a1712;
margin-bottom: 6px;
line-height: 1.4;
transition: color .25s;
}
.plp-card:hover .plp-card__name { color: #555; }
.plp-card__price {
font-size: 12px;
font-weight: 500;
color: #1a1712;
letter-spacing: 0.02em;
}
.empty-state {
grid-column: 1/-1;
text-align: center;
padding: 60px 20px;
color: #888;
font-family: 'Jost', sans-serif;
}
.empty-state i { font-size: 32px; color: #c9a96e; margin-bottom: 16px; display: block; }
/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
.plp-grid { grid-template-columns: repeat(3, 1fr); }
.plp-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.plp-sidebar { display: none; }
.plp-grid, .plp-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
}
@media (max-width: 480px) {
.plp-outer { padding: 0 12px 60px; }
.plp-grid { gap: 12px 6px; }
}
</style>
</head>
<body>
<?php include 'inc/header.php'; ?>
<!-- PAGE TITLE -->
<div class="plp-hero">
<h1 class="plp-hero__title"><?= htmlspecialchars($pageTitle) ?></h1>
<p class="plp-hero__count"><?= count($products) ?> Product<?= count($products) !== 1 ? 's' : '' ?></p>
</div>
<div class="plp-outer">
<!-- Breadcrumb -->
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="index.php">Home</a>
<span class="sep"><i class="fas fa-chevron-right"></i></span>
<a href="shop.php">Shop All</a>
<?php if ($catName): ?>
<span class="sep"><i class="fas fa-chevron-right"></i></span>
<?php if ($subName): ?>
<a href="shop.php?cat=<?= $filterCat ?>"><?= htmlspecialchars($catName) ?></a>
<span class="sep"><i class="fas fa-chevron-right"></i></span>
<span class="current"><?= htmlspecialchars($subName) ?></span>
<?php else: ?>
<span class="current"><?= htmlspecialchars($catName) ?></span>
<?php endif; ?>
<?php endif; ?>
</nav>
<!-- Toolbar -->
<div class="plp-toolbar">
<div class="toolbar-left">
<button class="btn-filter-toggle active" id="filterToggle">
<i class="fas fa-sliders-h"></i> Show Filter
</button>
<?php if ($filterCat || $filterSub): ?>
<a href="shop.php" style="font-family:'Jost',sans-serif;font-size:11px;color:#999;text-decoration:underline;letter-spacing:.08em;">Clear All</a>
<?php endif; ?>
</div>
<div class="toolbar-right">
<div class="sort-wrap">
<span class="sort-label">Sort By:</span>
<select class="sort-select" id="sortSelect" onchange="applySort(this.value)">
<option value="newest" <?= $sortBy === 'newest' ? 'selected' : '' ?>>Newest First</option>
<option value="price_low" <?= $sortBy === 'price_low' ? 'selected' : '' ?>>Price: Low to High</option>
<option value="price_high" <?= $sortBy === 'price_high' ? 'selected' : '' ?>>Price: High to Low</option>
<option value="name_az" <?= $sortBy === 'name_az' ? 'selected' : '' ?>>Name: A–Z</option>
</select>
</div>
<div class="grid-switcher">
<button class="grid-btn" id="btn3" onclick="setGrid(3)" title="3 columns">
<!-- 3-col icon -->
<svg viewBox="0 0 14 14"><rect x="0" y="0" width="3.5" height="6"/><rect x="5.25" y="0" width="3.5" height="6"/><rect x="10.5" y="0" width="3.5" height="6"/><rect x="0" y="8" width="3.5" height="6"/><rect x="5.25" y="8" width="3.5" height="6"/><rect x="10.5" y="8" width="3.5" height="6"/></svg>
</button>
<button class="grid-btn active" id="btn4" onclick="setGrid(4)" title="4 columns">
<!-- 4-col icon -->
<svg viewBox="0 0 14 14"><rect x="0" y="0" width="2.5" height="6"/><rect x="3.83" y="0" width="2.5" height="6"/><rect x="7.67" y="0" width="2.5" height="6"/><rect x="11.5" y="0" width="2.5" height="6"/><rect x="0" y="8" width="2.5" height="6"/><rect x="3.83" y="8" width="2.5" height="6"/><rect x="7.67" y="8" width="2.5" height="6"/><rect x="11.5" y="8" width="2.5" height="6"/></svg>
</button>
</div>
</div>
</div>
<!-- Body: Sidebar + Grid -->
<div class="plp-body" style="padding-top:24px;">
<!-- FILTER SIDEBAR -->
<aside class="plp-sidebar" id="plpSidebar">
<!-- CATEGORY filter -->
<div class="filter-block">
<div class="filter-title open" onclick="toggleFilter(this)">
Category <i class="fas fa-chevron-down chevron"></i>
</div>
<div class="filter-body open">
<ul class="filter-list">
<li><a href="shop.php<?= $sortBy !== 'newest' ? '?sort='.$sortBy : '' ?>" class="<?= !$filterCat && !$filterSub ? 'active' : '' ?>">
<span class="tick"><?= !$filterCat && !$filterSub ? '✓' : '' ?></span> All
</a></li>
<?php foreach ($allCats as $cat):
$href = 'shop.php?cat=' . $cat['id'] . ($sortBy !== 'newest' ? '&sort='.$sortBy : '');
$isActive = $filterCat == $cat['id'];
?>
<li><a href="<?= $href ?>" class="<?= $isActive ? 'active' : '' ?>">
<span class="tick"><?= $isActive ? '✓' : '' ?></span> <?= htmlspecialchars($cat['name']) ?>
</a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<!-- SUBCATEGORY filter (shown if parent selected) -->
<?php
$subsForCat = array_filter($allSubs, fn($s) => !$filterCat || $s['category_id'] == $filterCat);
if (!empty($subsForCat)): ?>
<div class="filter-block">
<div class="filter-title open" onclick="toggleFilter(this)">
Collection <i class="fas fa-chevron-down chevron"></i>
</div>
<div class="filter-body open">
<ul class="filter-list">
<?php foreach ($subsForCat as $sub):
$href = 'shop.php?cat=' . ($filterCat ?: $sub['category_id']) . '&sub=' . $sub['id'] . ($sortBy !== 'newest' ? '&sort='.$sortBy : '');
$isActive = $filterSub == $sub['id'];
?>
<li><a href="<?= $href ?>" class="<?= $isActive ? 'active' : '' ?>">
<span class="tick"><?= $isActive ? '✓' : '' ?></span> <?= htmlspecialchars($sub['name']) ?>
</a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endif; ?>
<!-- PRICE RANGE placeholder -->
<div class="filter-block">
<div class="filter-title open" onclick="toggleFilter(this)">
Price Range <i class="fas fa-chevron-down chevron"></i>
</div>
<div class="filter-body open">
<ul class="filter-list">
<li><a href="?<?= http_build_query(array_merge($_GET, ['price'=>'under100'])) ?>">
<span class="tick"></span> Under $100
</a></li>
<li><a href="?<?= http_build_query(array_merge($_GET, ['price'=>'100-500'])) ?>">
<span class="tick"></span> $100 – $500
</a></li>
<li><a href="?<?= http_build_query(array_merge($_GET, ['price'=>'above500'])) ?>">
<span class="tick"></span> Above $500
</a></li>
</ul>
</div>
</div>
</aside>
<!-- End Sidebar -->
<!-- PRODUCT GRID -->
<main class="plp-main-col">
<div class="plp-grid" id="plpGrid">
<?php if (empty($products)): ?>
<div class="empty-state">
<i class="fas fa-box-open"></i>
<h3>No products found.</h3>
<p style="margin-top:8px;font-size:13px;">Try a different filter or <a href="shop.php" style="color:#c9a96e;">browse all products</a>.</p>
</div>
<?php else: ?>
<?php foreach ($products as $prod):
$swatches = json_decode($prod['design_swatches'], true) ?? [];
// Image 1
$img1 = 'assets/placeholder-product.jpg';
$vid1 = '';
if (!empty($swatches[0])) {
$sw1 = $swatches[0];
if (!empty($sw1['thumb'])) $img1 = $sw1['thumb'];
elseif (!empty($sw1['src'])) $img1 = $sw1['src'];
elseif (!empty($sw1['gallery'][0])) $img1 = $sw1['gallery'][0];
// Check for video if still placeholder
if ($img1 === 'assets/placeholder-product.jpg' && !empty($sw1['videos'][0])) {
$vid1 = $sw1['videos'][0];
}
}
// Image 2 (Hover)
$img2 = null;
if (!empty($swatches[1])) {
$sw2 = $swatches[1];
if (!empty($sw2['thumb'])) $img2 = $sw2['thumb'];
elseif (!empty($sw2['src'])) $img2 = $sw2['src'];
elseif (!empty($sw2['gallery'][0])) $img2 = $sw2['gallery'][0];
} elseif (!empty($swatches[0]['gallery'][1])) {
$img2 = $swatches[0]['gallery'][1];
}
$link = "product.php?id=" . $prod['id'];
?>
<a href="<?= htmlspecialchars($link) ?>" class="plp-card" data-category="<?= htmlspecialchars($prod['category_slug'] ?? '') ?>">
<div class="plp-card__img-wrap">
<?php if ($vid1): ?>
<video src="<?= htmlspecialchars($vid1) ?>" autoplay muted loop playsinline></video>
<?php else: ?>
<img src="<?= htmlspecialchars($img1) ?>" alt="<?= htmlspecialchars($prod['name']) ?>" loading="lazy" />
<?php endif; ?>
<?php if ($img2): ?>
<img class="plp-hover-img" src="<?= htmlspecialchars($img2) ?>" alt="hover" loading="lazy" />
<?php endif; ?>
<?php if (!empty($prod['badge_text'])): ?>
<span class="plp-card__badge" style="background:<?= htmlspecialchars($prod['badge_color'] ?? '#1a1712') ?>;">
<?= htmlspecialchars($prod['badge_text']) ?>
</span>
<?php endif; ?>
<button class="plp-card__wishlist"
data-id="<?= (int)$prod['id'] ?>"
aria-label="Add to Wishlist"
onclick="toggleWishlist(event, <?= htmlspecialchars(json_encode([
'id' => $prod['id'],
'name' => $prod['name'],
'price' => $prod['price_usd'],
'image' => $img1,
'sku' => $prod['sku'] ?? ($prod['category_name'] ?? '')
])) ?>)">
<i class="far fa-heart"></i>
</button>
</div>
<div class="plp-card__info">
<p class="plp-card__designer"><?= htmlspecialchars($prod['category_name'] ?? $prod['sku']) ?></p>
<p class="plp-card__name"><?= htmlspecialchars($prod['name']) ?></p>
<p class="plp-card__price">USD <?= number_format($prod['price_usd'], 2) ?></p>
</div>
</a>
<?php endforeach; ?>
<?php endif; ?>
</div>
</main>
<!-- End Grid -->
</div>
</div>
<?php include 'inc/footer.php'; ?>
<script>
// ── Filter sidebar toggle
const sidebar = document.getElementById('plpSidebar');
const toggleBtn = document.getElementById('filterToggle');
toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('hidden');
toggleBtn.classList.toggle('active');
toggleBtn.innerHTML = sidebar.classList.contains('hidden')
? '<i class="fas fa-sliders-h"></i> Show Filter'
: '<i class="fas fa-sliders-h"></i> Hide Filter';
});
// ── Accordion filter sections
function toggleFilter(el) {
el.classList.toggle('open');
const body = el.nextElementSibling;
body.classList.toggle('open');
}
// ── Grid switcher
const grid = document.getElementById('plpGrid');
const btn3 = document.getElementById('btn3');
const btn4 = document.getElementById('btn4');
function setGrid(n) {
if (n === 3) {
grid.classList.add('cols-3');
btn3.classList.add('active');
btn4.classList.remove('active');
localStorage.setItem('plpCols', '3');
} else {
grid.classList.remove('cols-3');
btn4.classList.add('active');
btn3.classList.remove('active');
localStorage.setItem('plpCols', '4');
}
}
// Restore from localStorage
(function() {
const saved = localStorage.getItem('plpCols');
if (saved === '3') setGrid(3);
})();
// ── Sort By
function applySort(val) {
const url = new URL(window.location.href);
url.searchParams.set('sort', val);
window.location.href = url.toString();
}
// ── Wishlist Toggle & Sync
function toggleWishlist(e, item) {
e.preventDefault(); e.stopPropagation();
let wl = [];
try { wl = JSON.parse(localStorage.getItem('eoi_wishlist') || '[]'); } catch(err) { wl = []; }
const idx = wl.findIndex(x => x.id == item.id);
const btn = e.currentTarget;
const icon = btn.querySelector('i');
if (idx > -1) {
wl.splice(idx, 1);
btn.classList.remove('active');
icon.classList.replace('fas', 'far');
icon.style.color = '';
showToast('Removed from wishlist');
} else {
wl.push(item);
btn.classList.add('active');
icon.classList.replace('far', 'fas');
icon.style.color = '#c0392b';
showToast('Added to wishlist!');
}
localStorage.setItem('eoi_wishlist', JSON.stringify(wl));
if (typeof updateWishlistBadge === 'function') updateWishlistBadge();
}
function updateWishlistIcons() {
let wl = [];
try { wl = JSON.parse(localStorage.getItem('eoi_wishlist') || '[]'); } catch(err) { wl = []; }
document.querySelectorAll('.plp-card__wishlist').forEach(btn => {
const id = btn.getAttribute('data-id');
const icon = btn.querySelector('i');
if (wl.some(x => x.id == id)) {
btn.classList.add('active');
icon.classList.replace('far', 'fas');
icon.style.color = '#c0392b';
} else {
btn.classList.remove('active');
icon.classList.replace('fas', 'far');
icon.style.color = '';
}
});
}
function showToast(msg) {
let t = document.getElementById('shopToast');
if (!t) {
t = document.createElement('div');
t.id = 'shopToast';
t.style.cssText = 'position:fixed;bottom:40px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:12px 24px;font-family:Raleway,sans-serif;font-size:12px;letter-spacing:0.1em;border-radius:2px;z-index:9999;transition:all 0.4s;opacity:0;visibility:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.3);';
document.body.appendChild(t);
}
t.textContent = msg;
t.style.opacity = '1'; t.style.visibility = 'visible'; t.style.transform = 'translate(-50%, -20px)';
setTimeout(() => { t.style.opacity = '0'; t.style.visibility = 'hidden'; t.style.transform = 'translate(-50%, 0)'; }, 2500);
}
document.addEventListener('DOMContentLoaded', updateWishlistIcons);
</script>
</body>
</html>