File manager - Edit - /home/webapp69.cm.in.th/u69319090034/Shop 034/index.php
Back
<?php // หน้าแรกของร้านค้าออนไลน์ (index.php) - แสดงสินค้าและระบบ Filter ค้นหา require_once 'auth.php'; require_once 'config.php'; // ดึงตัวเลือกสำหรับตัวกรอง (Filters) จากฐานข้อมูล $categories = $conn->query("SELECT * FROM categories")->fetchAll(); $colors = $conn->query("SELECT DISTINCT value, color_code FROM attribute_values WHERE attribute_id = 1 AND color_code IS NOT NULL")->fetchAll(); $sizes = $conn->query("SELECT DISTINCT value FROM attribute_values WHERE attribute_id = 2")->fetchAll(); // อ่านค่าตัวกรองจาก URL/Query String $cat_id = isset($_GET['category']) ? intval($_GET['category']) : null; $selected_color = isset($_GET['color']) ? trim($_GET['color']) : null; $selected_size = isset($_GET['size']) ? trim($_GET['size']) : null; $min_price = isset($_GET['min_price']) && $_GET['min_price'] !== '' ? floatval($_GET['min_price']) : null; $max_price = isset($_GET['max_price']) && $_GET['max_price'] !== '' ? floatval($_GET['max_price']) : null; // ดึงรายชื่อสินค้าตามการกรอง $products = getProducts($cat_id, $min_price, $max_price, $selected_color, $selected_size); // นับจำนวนสินค้าในตะกร้า $cartCount = 0; if (isset($_SESSION['cart'])) { foreach ($_SESSION['cart'] as $item) { $cartCount += $item['qty']; } } ?> <!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-Commerce แฟชั่นออนไลน์ - ช้อปเสื้อผ้าตามไซซ์และสี</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"> </head> <body> <!-- Header Navigation --> <header> <div class="nav-container"> <a href="index.php" class="logo">AMARA<span>STUDIO</span></a> <ul class="nav-menu"> <li><a href="index.php" class="nav-link active">คอลเลกชันทั้งหมด</a></li> <li> <a href="cart.php" class="nav-link cart-icon-wrapper"> ตะกร้าสินค้า <span class="cart-count" id="cart-nav-count"><?= $cartCount ?></span> </a> </li> <li><a href="manual.php" class="nav-link">📖 คู่มือการใช้งาน</a></li> <?php if (isLoggedIn()): ?> <li><a href="favorites.php" class="nav-link">❤️ สินค้าที่ถูกใจ</a></li> <?php if (isSellerLoggedIn()): ?> <li><a href="seller_dashboard.php" class="nav-link admin-btn">🏪 แดชบอร์ดผู้ขาย</a></li> <?php endif; ?> <li style="display: flex; align-items: center; gap: 10px; margin-left: 10px;"> <span style="color: var(--primary); font-size: 14px; font-weight: 600;">👋 <?= htmlspecialchars(getAdminName()) ?></span> <a href="logout.php" class="nav-link" style="color: #e53e3e;">ออกจากระบบ</a> </li> <?php else: ?> <li><a href="login.php" class="nav-link admin-btn">เข้าสู่ระบบ</a></li> <?php endif; ?> </ul> </div> </header> <!-- Hero Section --> <div class="container" style="margin-top: 20px; margin-bottom: 20px;"> <div style="background: linear-gradient(135deg, #1e1e24 0%, #121214 100%); color: white; padding: 60px 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative;"> <div style="z-index: 2; max-width: 500px;"> <span style="color: var(--primary); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 2px;">NEW SEASON ARRIVALS</span> <h1 style="font-size: 40px; font-weight: 800; line-height: 1.2; margin: 15px 0; font-family: var(--font-eng);">PREMIUM FASHION</h1> <p style="color: #a0aec0; font-size: 16px; margin-bottom: 25px;">สัมผัสสินค้าแฟชั่น กระเป๋า รองเท้า เครื่องประดับ และน้ำหอมดีไซน์หรูหรา พร้อมจัดส่งทันที</p> <a href="#shop-now" class="btn btn-primary">ช้อปเลยตอนนี้</a> </div> <!-- Dynamic float shapes for modern premium look --> <div style="position: absolute; right: -50px; top: -50px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(197,168,128,0.15) 0%, rgba(0,0,0,0) 70%);"></div> <div style="position: absolute; right: 10%; bottom: -10%; width: 250px; height: 350px; background: url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=400') center/cover; border-radius: 20px; transform: rotate(5deg); opacity: 0.8; box-shadow: 0 10px 30px rgba(0,0,0,0.5);"></div> </div> </div> <!-- Main Content Section --> <div class="container" id="shop-now"> <div class="shop-layout"> <!-- Sidebar คัดกรองสินค้า --> <aside class="filter-sidebar"> <form action="index.php" method="GET" id="filter-form"> <!-- 1. หมวดหมู่สินค้า --> <div class="filter-section"> <h3 class="filter-title">หมวดหมู่สินค้า</h3> <div class="filter-links"> <a href="index.php" class="<?= !$cat_id ? 'active' : '' ?>">ทั้งหมด</a> <?php foreach ($categories as $cat): ?> <a href="index.php?category=<?= $cat['id'] ?><?= $selected_color ? '&color='.$selected_color : '' ?><?= $selected_size ? '&size='.$selected_size : '' ?>" class="<?= $cat_id === intval($cat['id']) ? 'active' : '' ?>"> <?= htmlspecialchars($cat['name']) ?> </a> <?php endforeach; ?> </div> <?php if ($cat_id): ?> <input type="hidden" name="category" value="<?= $cat_id ?>"> <?php endif; ?> </div> <!-- 2. คัดกรองตามสีสินค้า --> <div class="filter-section"> <h3 class="filter-title">กรองตามโทนสี</h3> <div class="filter-options-grid"> <?php foreach ($colors as $color): ?> <button type="button" class="color-filter-btn <?= $selected_color === $color['value'] ? 'active' : '' ?>" style="background-color: <?= $color['color_code'] ?>;" title="<?= htmlspecialchars($color['value']) ?>" onclick="toggleFilter('color', '<?= htmlspecialchars($color['value']) ?>')"> </button> <?php endforeach; ?> </div> <input type="hidden" name="color" id="filter-color" value="<?= htmlspecialchars($selected_color) ?>"> </div> <!-- 3. คัดกรองตามขนาดเสื้อผ้า --> <div class="filter-section"> <h3 class="filter-title">กรองตามไซซ์</h3> <div class="filter-options-grid"> <?php foreach ($sizes as $size): ?> <button type="button" class="size-filter-btn <?= $selected_size === $size['value'] ? 'active' : '' ?>" onclick="toggleFilter('size', '<?= htmlspecialchars($size['value']) ?>')"> <?= htmlspecialchars($size['value']) ?> </button> <?php endforeach; ?> </div> <input type="hidden" name="size" id="filter-size" value="<?= htmlspecialchars($selected_size) ?>"> </div> <!-- 4. ตัวเลือกราคา --> <div class="filter-section"> <h3 class="filter-title">ช่วงราคา (บาท)</h3> <div class="price-range-group"> <input type="number" name="min_price" placeholder="ต่ำสุด" value="<?= $min_price !== null ? $min_price : '' ?>"> <span>-</span> <input type="number" name="max_price" placeholder="สูงสุด" value="<?= $max_price !== null ? $max_price : '' ?>"> </div> </div> <button type="submit" class="filter-submit-btn">กรองสินค้า</button> <?php if ($cat_id || $selected_color || $selected_size || $min_price || $max_price): ?> <a href="index.php" class="btn btn-outline" style="width: 100%; display: block; margin-top: 10px; font-size: 13px; padding: 10px;">ล้างตัวกรอง</a> <?php endif; ?> </form> </aside> <!-- แสดงรายการสินค้าหลัก --> <main> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"> <div style="font-size: 15px; color: var(--text-muted);"> พบสินค้าทั้งหมด <strong><?= count($products) ?></strong> รายการ </div> </div> <?php if (empty($products)): ?> <div style="background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 60px 20px; text-align: center;"> <span style="font-size: 40px; color: var(--text-muted); display: block; margin-bottom: 20px;">🔍</span> <h3>ไม่พบสินค้าตรงตามตัวกรองที่เลือก</h3> <p style="color: var(--text-muted); margin-top: 10px;">ลองเปลี่ยนตัวกรอง หรือล้างตัวกรองทั้งหมดเพื่อดูสินค้าเริ่มต้น</p> <a href="index.php" class="btn btn-dark" style="margin-top: 20px;">แสดงสินค้าทั้งหมด</a> </div> <?php else: ?> <div class="product-grid"> <?php foreach ($products as $prod): ?> <?php $image = !empty($prod['main_image']) ? $prod['main_image'] : $prod['fallback_image']; if (empty($image)) { $image = 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800'; } $isLiked = isProductLiked($prod['id']); ?> <div class="product-card" style="position: relative;"> <button type="button" class="btn-like <?= $isLiked ? 'active' : '' ?>" onclick="toggleLike(<?= $prod['id'] ?>, this)" title="กดถูกใจสินค้า" style="position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s;"> <?= $isLiked ? '❤️' : '🤍' ?> </button> <a href="product.php?id=<?= $prod['id'] ?>" style="text-decoration: none; color: inherit; display: block;"> <div class="product-card-img-wrapper"> <img src="<?= htmlspecialchars($image) ?>" alt="<?= htmlspecialchars($prod['name']) ?>" class="product-card-img"> </div> <div class="product-card-info"> <span class="product-card-cat"><?= htmlspecialchars($prod['category_name']) ?></span> <h3 class="product-card-title"><?= htmlspecialchars($prod['name']) ?></h3> <div class="product-card-price-row"> <span class="product-card-price">฿<?= number_format($prod['base_price']) ?></span> <span style="font-size: 13px; color: var(--primary); font-weight: 600;">ดูรายละเอียด →</span> </div> </div> </a> </div> <?php endforeach; ?> </div> <?php endif; ?> </main> </div> </div> <!-- Footer --> <footer style="background-color: white; border-top: 1px solid var(--border); padding: 40px 0; margin-top: 80px; text-align: center; color: var(--text-muted);"> <p>© 2026 AMARA STUDIO. All rights reserved. เว็บไซต์นี้จำลองสถาปัตยกรรม E-Commerce แฟชั่นพรีเมียม</p> </footer> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script> function toggleFilter(type, value) { const input = document.getElementById('filter-' + type); if (input.value === value) { input.value = ''; } else { input.value = value; } document.getElementById('filter-form').submit(); } function toggleLike(productId, btn) { fetch('api.php?action=toggle_like', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ product_id: productId }) }) .then(res => res.json()) .then(data => { if (data.success) { if (data.liked) { btn.innerHTML = '❤️'; btn.classList.add('active'); } else { btn.innerHTML = '🤍'; btn.classList.remove('active'); } const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 2000 }); Toast.fire({ icon: 'success', title: data.message }); } else if (data.require_login) { Swal.fire({ title: 'กรุณาเข้าสู่ระบบ', text: data.message, icon: 'info', showCancelButton: true, confirmButtonText: 'เข้าสู่ระบบผู้ซื้อ', cancelButtonText: 'ยกเลิก', confirmButtonColor: '#c5a880' }).then((result) => { if (result.isConfirmed) { window.location.href = 'login.php?role=buyer&redirect=' + encodeURIComponent(window.location.pathname + window.location.search); } }); } else { Swal.fire({ icon: 'error', title: 'ข้อผิดพลาด', text: data.message }); } }); } </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.32 |
proxy
|
phpinfo
|
Settings