File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090034/Shop 034/manual.php

Back
<?php // หน้าคู่มือการใช้งานระบบ (manual.php) require_once 'auth.php'; // คำนวณจำนวนสินค้าในตะกร้า $cartCount = 0; if (isset($_SESSION['cart']) && is_array($_SESSION['cart'])) { foreach ($_SESSION['cart'] as $item) { $cartCount += ($item['quantity'] ?? 1); } } ?> <!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>คู่มือการใช้งานระบบ - AMARA STUDIO</title> <link rel="stylesheet" href="style.css"> <style> .manual-hero { background: linear-gradient(135deg, #1e1e24 0%, #121214 100%); color: white; padding: 50px 30px; border-radius: var(--radius); margin-top: 25px; margin-bottom: 35px; text-align: center; position: relative; overflow: hidden; } .manual-hero h1 { font-size: 32px; font-weight: 700; margin-bottom: 12px; } .manual-hero p { color: #a0aec0; font-size: 16px; max-width: 650px; margin: 0 auto 20px; } .search-manual-box { max-width: 500px; margin: 0 auto; position: relative; } .search-manual-box input { width: 100%; padding: 14px 20px 14px 45px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; font-size: 15px; outline: none; backdrop-filter: blur(10px); transition: all 0.3s ease; } .search-manual-box input::placeholder { color: #cbd5e0; } .search-manual-box input:focus { background: rgba(255,255,255,0.18); border-color: var(--primary); box-shadow: 0 0 15px rgba(197, 168, 128, 0.3); } .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #cbd5e0; } .manual-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; } .manual-tab-btn { padding: 12px 24px; border-radius: 30px; border: 1px solid var(--border); background: white; color: var(--text-main); font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; } .manual-tab-btn:hover { border-color: var(--primary); color: var(--primary); } .manual-tab-btn.active { background: var(--dark); color: white; border-color: var(--dark); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .manual-section { display: none; animation: fadeIn 0.3s ease forwards; } .manual-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .guide-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; margin-bottom: 24px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .guide-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); } .guide-card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #edf2f7; } .guide-step-num { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; } .guide-card h3 { font-size: 20px; font-weight: 700; color: var(--dark); margin: 0; } .step-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; } .step-list li { position: relative; padding-left: 28px; font-size: 15px; color: #4a5568; line-height: 1.6; } .step-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--primary); font-weight: bold; font-size: 16px; } .guide-tip { background: #fffaf0; border-left: 4px solid var(--warning); padding: 12px 18px; border-radius: 0 8px 8px 0; margin-top: 15px; font-size: 14px; color: #7b341e; } .guide-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: #edf2f7; color: #4a5568; margin: 0 4px; } .faq-item { background: white; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } .faq-question { padding: 18px 24px; font-weight: 600; font-size: 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; user-select: none; transition: background 0.2s; } .faq-question:hover { background: #f8fafc; } .faq-answer { padding: 0 24px 20px; color: #4a5568; font-size: 15px; line-height: 1.7; display: none; border-top: 1px solid #f1f5f9; padding-top: 15px; } .faq-item.open .faq-answer { display: block; } .faq-item.open .faq-icon { transform: rotate(180deg); } .faq-icon { transition: transform 0.2s ease; color: var(--primary); font-weight: bold; } .quick-action-bar { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; justify-content: space-around; text-align: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; } .quick-action-item { text-decoration: none; color: var(--text-main); display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; padding: 10px 15px; border-radius: 8px; transition: all 0.2s ease; } .quick-action-item:hover { background: #f7f7f9; color: var(--primary); transform: translateY(-2px); } .quick-action-icon { font-size: 24px; } </style> </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">คอลเลกชันทั้งหมด</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 active" style="color: var(--primary); font-weight: 700;">📖 คู่มือการใช้งาน</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> <!-- Main Container --> <div class="container" style="margin-bottom: 60px;"> <!-- Hero Header --> <div class="manual-hero"> <span style="color: var(--primary); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 2px; display: block; margin-bottom: 8px;">HELP CENTER & DOCUMENTATION</span> <h1>คู่มือการใช้งานระบบ AMARA STUDIO</h1> <p>ศูนย์รวมข้อมูลและขั้นตอนการใช้งานระบบร้านค้าออนไลน์ ทั้งสำหรับลูกค้าผู้ซื้อ ร้านค้าผู้ขาย และผู้ดูแลระบบ</p> <div class="search-manual-box"> <span class="search-icon">🔍</span> <input type="text" id="manual-search" placeholder="ค้นหาคู่มือ เช่น วิธีสั่งซื้อ, เพิ่มสินค้า, แนบสลิป..." onkeyup="filterManualCards()"> </div> </div> <!-- Quick Action Links --> <div class="quick-action-bar"> <a href="#buyer-section" class="quick-action-item" onclick="switchTab('buyer')"> <span class="quick-action-icon">🛍️</span> <span>คู่มือผู้ซื้อ</span> </a> <a href="#seller-section" class="quick-action-item" onclick="switchTab('seller')"> <span class="quick-action-icon">🏪</span> <span>คู่มือร้านค้า/ผู้ขาย</span> </a> <a href="#admin-section" class="quick-action-item" onclick="switchTab('admin')"> <span class="quick-action-icon">⚙️</span> <span>คู่มือผู้ดูแลระบบ</span> </a> <a href="#faq-section" class="quick-action-item" onclick="switchTab('faq')"> <span class="quick-action-icon">❓</span> <span>คำถามที่พบบ่อย</span> </a> </div> <!-- Tabs Navigation --> <div class="manual-tabs"> <button type="button" class="manual-tab-btn active" id="tab-buyer-btn" onclick="switchTab('buyer')"> 🛍️ สำหรับลูกค้า / ผู้ซื้อ </button> <button type="button" class="manual-tab-btn" id="tab-seller-btn" onclick="switchTab('seller')"> 🏪 สำหรับร้านค้า / ผู้ขาย </button> <button type="button" class="manual-tab-btn" id="tab-admin-btn" onclick="switchTab('admin')"> ⚙️ สำหรับผู้ดูแลระบบ (Admin) </button> <button type="button" class="manual-tab-btn" id="tab-faq-btn" onclick="switchTab('faq')"> ❓ คำถามที่พบบ่อย (FAQ) </button> </div> <!-- SECTION 1: Buyer Guide --> <div id="section-buyer" class="manual-section active"> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">1</div> <div> <h3>การเลือกชมและค้นหาสินค้า (Browse & Search)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ค้นหาไอเทมแฟชั่นที่คุณต้องการได้อย่างรวดเร็ว</p> </div> </div> <ul class="step-list"> <li>เข้าสู่หน้าแรก <span class="guide-badge">คอลเลกชันทั้งหมด</span> เพื่อดูรายการสินค้าทั้งหมด</li> <li>ใช้ <strong>แถบหมวดหมู่ (Category Filter)</strong> เช่น ชุดเดรส, เสื้อเชิ้ต, กางเกง, รองเท้า, กระเป๋า เพื่อคัดกรองสินค้าตามประเภท</li> <li>ใช้ <strong>ช่องค้นหา (Search Bar)</strong> พิมพ์ชื่อสินค้า หรือรหัสสินค้า เพื่อค้นหาแบบระบุเฉพาะเจาะจง</li> <li>สามารถคลิกปุ่ม <strong>❤️ ไอคอนหัวใจ</strong> บนการ์ดสินค้าเพื่อบันทึกไว้ใน <span class="guide-badge">สินค้าที่ถูกใจ</span> เพื่อกลับมาดูภายหลังได้</li> </ul> </div> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">2</div> <div> <h3>การเลือกสี ไซซ์ และใส่ตะกร้า (Select Variants & Add to Cart)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ระบุรายละเอียดไซซ์และสีที่ตรงใจก่อนสั่งซื้อ</p> </div> </div> <ul class="step-list"> <li>คลิกที่รูปหรือชื่อสินค้าเพื่อเข้าสู่หน้า <strong>รายละเอียดสินค้า (Product Detail)</strong></li> <li>กดเลือก <strong>สี (Color)</strong> และ <strong>ขนาด (Size)</strong> ที่ต้องการ ระบบจะแสดงจำนวนคงเหลือในสต็อกและปรับรูปภาพ/ราคาตามตัวเลือกนั้น</li> <li>ระบุจำนวนชิ้นที่ต้องการสั่งซื้อ จากนั้นกดปุ่ม <span class="guide-badge" style="background: var(--dark); color: white;">+ เพิ่มลงตะกร้า</span></li> <li>ระบบจะอัปเดตจำนวนสินค้าบนเมนู <span class="guide-badge">ตะกร้าสินค้า</span> ด้านบนทันที</li> </ul> <div class="guide-tip"> 💡 <strong>คำแนะนำ:</strong> หากตัวเลือกสีหรือไซซ์ใดหมดสต็อก (Out of Stock) ระบบจะแสดงสถานะสินค้าหมดและไม่อนุญาตให้สั่งซื้อเกินจำนวนคงเหลือ </div> </div> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">3</div> <div> <h3>การสั่งซื้อและการชำระเงิน (Checkout & Payment)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ชำระเงินสะดวกและปลอดภัยผ่าน QR PromptPay พร้อมแนบสลิป</p> </div> </div> <ul class="step-list"> <li>คลิกที่เมนู <span class="guide-badge">ตะกร้าสินค้า</span> เพื่อตรวจสอบรายการสินค้า ปรับลดจำนวน หรือลบสินค้า</li> <li>กรอกข้อมูลผู้รับและที่อยู่จัดส่งให้ครบถ้วน (ชื่อ-นามสกุล, เบอร์โทรศัพท์, ที่อยู่จัดส่ง)</li> <li>ระบบจะแสดง <strong>QR Code พร้อมเพย์ (PromptPay)</strong> พร้อมยอดเงินรวมที่ต้องชำระ</li> <li>เปิดแอปพลิเคชันธนาคารของท่าน สแกน QR Code เพื่อโอนเงินตามยอดที่ระบุ</li> <li>อัปโหลด <strong>ไฟล์รูปภาพสลิปหลักฐานการโอนเงิน (Payment Slip)</strong> ในช่องที่กำหนด</li> <li>ตรวจสอบความถูกต้องแล้วกดปุ่ม <strong>"ยืนยันการสั่งซื้อ"</strong> เพื่อส่งข้อมูลคำสั่งซื้อเข้าสู่ระบบ</li> </ul> </div> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">4</div> <div> <h3>การติดตามสถานะคำสั่งซื้อ (Order Tracking)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ตรวจสอบสถานะการตรวจสอบสลิปและการจัดส่งสินค้า</p> </div> </div> <ul class="step-list"> <li>หลังจากยืนยันคำสั่งซื้อ คุณจะได้รับ <strong>หมายเลขคำสั่งซื้อ (Order ID)</strong></li> <li>สถานะเริ่มต้นคือ <span class="guide-badge" style="background: #feebc8; color: #7b341e;">รอตรวจสอบ (Pending)</span> เมื่อผู้ขายตรวจสอบสลิปจะเปลี่ยนเป็น <span class="guide-badge" style="background: #c6f6d5; color: #22543d;">ชำระเงินแล้ว (Paid)</span></li> <li>เมื่อสินค้าถูกส่งมอบให้ขนส่ง สถานะจะเปลี่ยนเป็น <span class="guide-badge" style="background: #bee3f8; color: #2c5282;">กำลังจัดส่ง (Shipped)</span> พร้อมหมายเลขพัสดุสำหรับติดตาม</li> </ul> </div> </div> <!-- SECTION 2: Seller Guide --> <div id="section-seller" class="manual-section"> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">1</div> <div> <h3>การเข้าสู่ระบบร้านค้า (Seller Login & Dashboard)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ภาพรวมสถิติร้านค้า ยอดขาย และคำสั่งซื้อล่าสุด</p> </div> </div> <ul class="step-list"> <li>คลิกปุ่ม <span class="guide-badge">เข้าสู่ระบบ</span> แล้วเลือกบทบาท <strong>"ผู้ขาย (Seller)"</strong></li> <li>กรอกชื่อผู้ใช้และรหัสผ่านเพื่อเข้าสู่ <span class="guide-badge">แดชบอร์ดผู้ขาย (Seller Dashboard)</span></li> <li>หน้าแดชบอร์ดจะสรุปข้อมูลสำคัญ: <strong>ยอดขายรวม (Total Sales)</strong>, <strong>จำนวนออเดอร์ (Total Orders)</strong>, และ <strong>จำนวนสินค้าทั้งหมด (Products Count)</strong></li> <li>มีตารางแสดงรายการคำสั่งซื้อล่าสุดของร้านค้า พร้อมปุ่มเข้าถึงการจัดการอย่างรวดเร็ว</li> </ul> </div> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">2</div> <div> <h3>การลงสินค้าใหม่ด้วย Matrix Generator (Add New Product)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">สร้างตัวเลือก สี × ไซซ์ พร้อมระบุสต็อกและราคาได้ในพริบตา</p> </div> </div> <ul class="step-list"> <li>ไปที่เมนู <span class="guide-badge">เพิ่มสินค้าใหม่</span> ในแถบเมนูผู้ขาย</li> <li>กรอกข้อมูลพื้นฐาน: ชื่อสินค้า, หมวดหมู่ (Category), ราคาเริ่มต้น, คำอธิบายสินค้า และอัปโหลดรูปภาพหลัก</li> <li>ในส่วน <strong>ตัวเลือกสินค้า (Variant Matrix Generator)</strong>: <ul style="margin-left: 20px; margin-top: 6px; list-style: disc;"> <li>เลือกหรือกรอก <strong>สี (Colors)</strong> เช่น Black, White, Gold, Beige</li> <li>เลือกหรือกรอก <strong>ขนาด (Sizes)</strong> เช่น S, M, L, XL หรือ One Size</li> </ul> </li> <li>กดปุ่ม <strong>"สร้างตารางตัวเลือก (Generate Matrix)"</strong> ระบบจะจับคู่ สี × ขนาด ทุกรูปแบบโดยอัตโนมัติ</li> <li>กำหนด SKU, จำนวนสต็อกคงเหลือ และราคาเฉพาะของแต่ละตัวเลือก (หากมี)</li> <li>กดปุ่ม <span class="guide-badge" style="background: var(--dark); color: white;">บันทึกสินค้าใหม่</span> สินค้าจะเผยแพร่บนหน้าร้านค้าทันที</li> </ul> <div class="guide-tip"> 💡 <strong>ข้อดีของ Matrix Generator:</strong> ช่วยประหยัดเวลา ไม่ต้องสร้างตัวเลือกทีละแถวด้วยตนเอง และสามารถแก้ไขจำนวนสต็อกแต่ละไซซ์ได้อิสระ </div> </div> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">3</div> <div> <h3>การจัดการออเดอร์และตรวจสอบสลิป (Order Management)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ตรวจสอบหลักฐานการโอนและปรับสถานะพัสดุ</p> </div> </div> <ul class="step-list"> <li>เข้าสู่หน้า <span class="guide-badge">จัดการคำสั่งซื้อ (Orders)</span> เพื่อดูออเดอร์ของสินค้าในร้านคุณ</li> <li>คลิกดู <strong>รูปภาพสลิปโอนเงิน (Payment Slip)</strong> เพื่อตรวจสอบยอดเงินและเวลาโอน</li> <li>เมื่อตรวจสอบยอดเงินถูกต้อง ให้ปรับสถานะเป็น <span class="guide-badge" style="background: #c6f6d5; color: #22543d;">ชำระเงินแล้ว (Paid)</span> หรือ <span class="guide-badge" style="background: #bee3f8; color: #2c5282;">กำลังจัดส่ง (Shipped)</span></li> <li>สามารถระบุ <strong>หมายเลขพัสดุ (Tracking Number)</strong> เพื่อให้ลูกค้าติดตามสินค้าได้</li> </ul> </div> </div> <!-- SECTION 3: Admin Guide --> <div id="section-admin" class="manual-section"> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">1</div> <div> <h3>การบริหารระบบในระดับภาพรวม (Admin Portal Overview)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ควบคุมดูแลร้านค้า ผู้ขาย และข้อมูลธุรกรรมทั้งหมด</p> </div> </div> <ul class="step-list"> <li>เข้าสู่ระบบด้วยบัญชีผู้ดูแลระบบ (Admin Credentials)</li> <li>ดูภาพรวมสถิติทั้งแพลตฟอร์ม: ยอดขายรวมของทุกร้าน, จำนวนคำสั่งซื้อทั้งหมด และจำนวนสินค้าทั้งหมด</li> <li>ตรวจสอบสินค้าที่มีสต็อกเหลือน้อย เพื่อแจ้งเตือนร้านค้า</li> </ul> </div> <div class="guide-card"> <div class="guide-card-header"> <div class="guide-step-num">2</div> <div> <h3>การพิมพ์ใบจัดส่ง & ใบแพ็กของ (Packing Slip Printing)</h3> <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">สร้างเอกสารส่งพัสดุพร้อมพิมพ์ลงกระดาษได้ทันที</p> </div> </div> <ul class="step-list"> <li>ในหน้า <span class="guide-badge">จัดการออเดอร์ & ใบแพ็กของ</span> สามารถกดปุ่ม <strong>"พิมพ์ใบแพ็กสินค้า (Print Packing Slip)"</strong></li> <li>ระบบถูกออกแบบมาเป็นพิเศษสำหรับ Print CSS โดยจะซ่อนเมนูและตกแต่งรูปแบบเอกสารให้เหมาะกับกระดาษ A4 หรือใบปะหน้าพัสดุโดยอัตโนมัติ</li> </ul> </div> </div> <!-- SECTION 4: FAQ --> <div id="section-faq" class="manual-section"> <div class="faq-item open"> <div class="faq-question" onclick="toggleFaq(this)"> <span>❓ ฉันสามารถชำระเงินผ่านช่องทางใดได้บ้าง?</span> <span class="faq-icon">▼</span> </div> <div class="faq-answer"> ระบบรองรับการชำระเงินผ่าน <strong>พร้อมเพย์ (PromptPay QR Code)</strong> รองรับทุกแอปพลิเคชันธนาคารในประเทศไทย โดยลูกค้าสามารถสแกน QR Code ในขั้นตอนเช็คเอาต์และแนบรูปภาพสลิปเพื่อยืนยันคำสั่งซื้อได้ทันที </div> </div> <div class="faq-item"> <div class="faq-question" onclick="toggleFaq(this)"> <span>❓ หากสินค้าที่ต้องการหมดสต็อก จะสั่งซื้อได้หรือไม่?</span> <span class="faq-icon">▼</span> </div> <div class="faq-answer"> หากตัวเลือกสีหรือขนาดนั้นๆ มีจำนวนสต็อกเป็น 0 ปุ่มเพิ่มลงตะกร้าจะไม่สามารถกดเลือกได้ แนะนำให้กด ❤️ บันทึกไว้ในรายการสินค้าที่ถูกใจ เพื่อรอการเติมสต็อกสินค้าจากทางร้าน </div> </div> <div class="faq-item"> <div class="faq-question" onclick="toggleFaq(this)"> <span>❓ ร้านค้าจะทราบได้อย่างไรว่ามีออเดอร์ใหม่เข้ามา?</span> <span class="faq-icon">▼</span> </div> <div class="faq-answer"> ผู้ขายสามารถเข้าสู่ <span class="guide-badge">แดชบอร์ดผู้ขาย</span> เพื่อดูรายการคำสั่งซื้อล่าสุดที่มีสถานะ "รอตรวจสอบ" พร้อมคลิกดูสลิปและดำเนินการจัดส่งสินค้าได้ทันที </div> </div> <div class="faq-item"> <div class="faq-question" onclick="toggleFaq(this)"> <span>❓ จะเพิ่มรูปภาพสินค้าอย่างไรให้แสดงผลสวยงาม?</span> <span class="faq-icon">▼</span> </div> <div class="faq-answer"> แนะนำให้ใช้รูปภาพสินค้าความละเอียดคมชัด อัตราส่วน 3:4 หรือ 1:1 พื้นหลังสะอาดเรียบร้อย โดยระบบรองรับไฟล์รูปภาพ .jpg, .png, .webp </div> </div> <div class="faq-item"> <div class="faq-question" onclick="toggleFaq(this)"> <span>❓ หากแนบสลิปผิด หรือต้องการแก้ไขคำสั่งซื้อ ต้องทำอย่างไร?</span> <span class="faq-icon">▼</span> </div> <div class="faq-answer"> หากคำสั่งซื้อยังอยู่ในสถานะ "รอตรวจสอบ" ท่านสามารถติดต่อเจ้าหน้าที่หรือผู้ขายพร้อมแจ้งหมายเลขคำสั่งซื้อ (Order ID) เพื่อทำการตรวจสอบและแก้ไขข้อมูลให้ถูกต้อง </div> </div> </div> </div> <!-- Script ควบคุม Tab และการค้นหา --> <script> function switchTab(tabName) { // ซ่อนทุก Section document.querySelectorAll('.manual-section').forEach(el => el.classList.remove('active')); document.querySelectorAll('.manual-tab-btn').forEach(el => el.classList.remove('active')); const targetSection = document.getElementById('section-' + tabName); const targetBtn = document.getElementById('tab-' + tabName + '-btn'); if (targetSection) targetSection.classList.add('active'); if (targetBtn) targetBtn.classList.add('active'); } function toggleFaq(element) { const parent = element.parentElement; parent.classList.toggle('open'); } function filterManualCards() { const query = document.getElementById('manual-search').value.toLowerCase().trim(); const cards = document.querySelectorAll('.guide-card, .faq-item'); if (query === '') { cards.forEach(card => card.style.display = ''); return; } // ถ้ามีการค้นหา ให้แสดงทุก section เพื่อให้เห็นผลการค้นหา document.querySelectorAll('.manual-section').forEach(sec => sec.classList.add('active')); cards.forEach(card => { const text = card.textContent.toLowerCase(); if (text.includes(query)) { card.style.display = ''; } else { card.style.display = 'none'; } }); } </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.23 | proxy | phpinfo | Settings