File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090040/Shop/product.php

Back
<?php // NEXUS Commerce - Full Product Detail Page (หน้าแสดงรายละเอียดสินค้าฉบับเต็ม + ระบบเลือกตัวเลือกสินค้าแบบ Shopee) if (session_status() === PHP_SESSION_NONE) { session_start(); } $product_id = intval($_GET['id'] ?? 1); ?> <!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>รายละเอียดสินค้า \| SHOWPIPI Social Commerce</title> <link rel="stylesheet" href="assets/css/style.css"> <script src="https://unpkg.com/@phosphor-icons/web"></script> <style> /* Shopee-style Variant Selector Styling / .variant-group { margin-bottom: 1.25rem; } .variant-title { font-size: 0.88rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 6px; } .variant-options { display: flex; flex-wrap: wrap; gap: 0.6rem; } .variant-pill { background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 0.45rem 0.9rem; font-size: 0.85rem; color: var(--text-main); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; user-select: none; } .variant-pill:hover { border-color: var(--teal-accent); background: rgba(6, 182, 212, 0.08); } .variant-pill.active { border-color: var(--teal-accent); background: rgba(6, 182, 212, 0.18); color: #FFF; font-weight: 700; box-shadow: 0 0 12px rgba(6, 182, 212, 0.25); } .variant-pill.active::after { content: '✓'; font-weight: bold; color: var(--teal-accent); margin-left: 4px; } .variant-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; } .qty-picker { display: inline-flex; align-items: center; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border-glass); border-radius: 10px; overflow: hidden; } .qty-btn { background: transparent; border: none; color: #FFF; width: 36px; height: 36px; font-size: 1.1rem; cursor: pointer; transition: background 0.2s; } .qty-btn:hover { background: rgba(255, 255, 255, 0.1); } .qty-input { width: 44px; height: 36px; background: transparent; border: none; text-align: center; color: #FFF; font-weight: 700; font-size: 0.95rem; } .selected-summary-box { background: rgba(124, 58, 237, 0.1); border: 1px dashed var(--primary-purple); padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.85rem; color: var(--teal-accent); margin-bottom: 1.25rem; } .desc-box { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-glass); border-radius: 16px; padding: 1.75rem; white-space: pre-line; line-height: 1.8; font-size: 0.95rem; color: #E2E8F0; } .specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .spec-item { background: rgba(255, 255, 255, 0.04); padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; } .related-card { background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 14px; padding: 1rem; transition: all 0.2s ease; cursor: pointer; } .related-card:hover { transform: translateY(-4px); border-color: var(--teal-accent); box-shadow: 0 10px 25px rgba(6, 182, 212, 0.15); } </style> </head> <body> <!-- Navigation Bar --> <header class="nexus-navbar"> <a href="index.php" class="brand-logo"> <div class="brand-icon"><i class="ph ph-shopping-bag-open"></i></div> <span class="brand-badge">SHOWPIPI</span> </a> <div class="nav-actions" style="display:flex; align-items:center; gap:0.75rem;"> <button class="icon-btn" id="cartBtn" onclick="location.href='index.php?open_cart=1'" title="ตะกร้าสินค้า"> <i class="ph ph-shopping-bag"></i> </button> <!-- Red Cross Back Button --> <button onclick="if(document.referrer && document.referrer.includes(location.host)) { history.back(); } else { location.href='index.php'; }" style="background:rgba(244, 63, 94, 0.25); border:2px solid #F43F5E; color:#F43F5E; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.4rem; transition:all 0.2s ease; box-shadow:0 0 15px rgba(244,63,94,0.5);" title="ปิด / ย้อนกลับ" onmouseover="this.style.background='#F43F5E'; this.style.color='#FFF'; this.style.transform='scale(1.1) rotate(90deg)';" onmouseout="this.style.background='rgba(244, 63, 94, 0.25)'; this.style.color='#F43F5E'; this.style.transform='none';"> <i class="ph ph-x"></i> </button> </div> </header> <!-- Product Detail Container --> <main style="max-width:1300px; margin:2rem auto; padding:0 2rem;" id="productDetailContainer"> <div style="display:flex; justify-content:center; align-items:center; min-height:50vh;"> <i class="ph ph-planet" style="font-size:3rem; color:var(--primary-purple); animation:spin 1.5s linear infinite;"></i> </div> </main> <script> // State for variation selection let currentProduct = null; let selectedVariants = { color: null, size: null, switchOrEdition: null, qty: 1 }; let basePrice = 0; let priceOffsetTotal = 0; document.addEventListener('DOMContentLoaded', async () => { const productId = <?= $product_id ?>; const container = document.getElementById('productDetailContainer'); let p = null; let relatedProducts = []; try { const res = await fetch(`api/products.php?id=${productId}`); const data = await res.json(); if (data.status === 'success' && data.data) { p = data.data; } } catch (e) { console.warn('Failed to fetch product details', e); } if (!p) { container.innerHTML = `<div style="text-align:center; padding:4rem;"><h2>ไม่พบข้อมูลสินค้า</h2><a href="index.php" class="btn-primary" style="margin-top:1rem; display:inline-block;">กลับหน้าหลัก</a></div>`; return; } currentProduct = p; basePrice = p.price; // Fetch related products try { const relRes = await fetch(`api/products.php?category=${p.category_slug \|\| 'all'}`); const relData = await relRes.json(); if (relData.status === 'success') { relatedProducts = (relData.data \|\| []).filter(item => item.id !== p.id).slice(0, 4); } } catch (e) { console.warn('Related products fetch error', e); } document.title = `${p.title} \| NEXUS Social Shopping`; const galleryList = (Array.isArray(p.gallery) && p.gallery.length > 0) ? p.gallery : [p.image_url]; const specsObj = (typeof p.specs === 'object' && p.specs !== null) ? p.specs : {}; const aiSummary = (typeof p.ai_summary === 'object' && p.ai_summary !== null) ? p.ai_summary : {}; const variantsObj = (typeof p.variants === 'object' && p.variants !== null) ? p.variants : {}; // Auto-select defaults if (variantsObj.colors && variantsObj.colors.length > 0) selectedVariants.color = variantsObj.colors[0]; if (variantsObj.sizes && variantsObj.sizes.length > 0) selectedVariants.size = variantsObj.sizes[0]; if (variantsObj.switches && variantsObj.switches.length > 0) selectedVariants.switchOrEdition = variantsObj.switches[0]; if (variantsObj.editions && variantsObj.editions.length > 0) selectedVariants.switchOrEdition = variantsObj.editions[0]; container.innerHTML = ` <!-- Breadcrumb Navigation --> <div style="font-size:0.85rem; color:var(--text-muted); margin-bottom:1.5rem;"> <a href="index.php" style="color:var(--text-muted); text-decoration:none;">หน้าหลัก</a> / <span style="color:var(--teal-accent);">${p.category_name \|\| 'สินค้าทั่วไป'}</span> / <strong style="color:#FFF;">${p.title}</strong> </div> <div style="max-width:850px; margin:0 auto 3rem auto;"> <!-- Product Main Image Showcase --> <div class="glass-panel" style="padding:1.5rem; margin-bottom:1.5rem; text-align:center; position:relative; overflow:hidden;"> <div style="width:100%; max-height:420px; display:flex; justify-content:center; align-items:center;"> <img src="${p.image_url}" id="mainProdImg" style="max-width:100%; max-height:400px; object-fit:contain; border-radius:16px; transition:transform 0.3s ease;"> </div> ${galleryList.length > 1 ? ` <div style="display:flex; justify-content:center; gap:0.6rem; margin-top:1rem; flex-wrap:wrap;"> ${galleryList.map((img, i) => ` <img src="${img}" style="width:55px; height:55px; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid ${i === 0 ? 'var(--teal-accent)' : 'var(--border-glass)'};" onclick="document.querySelectorAll('.gallery-thumb').forEach(t => t.style.borderColor='var(--border-glass)'); this.style.borderColor='var(--teal-accent)'; document.getElementById('mainProdImg').src='${img}'" class="gallery-thumb"> `).join('')} </div> ` : ''} </div> <!-- Product Details, Shopee-style Variant Selector, Price, Actions --> <div> <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem; flex-wrap:wrap;"> <span style="font-size:0.78rem; background:rgba(6,182,212,0.15); color:var(--teal-accent); padding:4px 12px; border-radius:12px; font-weight:bold;"> <i class="ph ph-storefront"></i> ร้านค้า: ${p.store_name} </span> <span style="font-size:0.78rem; color:var(--gold-accent); font-weight:700;"><i class="ph ph-star-fill"></i> ${p.rating_avg} (${p.review_count \|\| 328} รีวิว)</span> <span style="font-size:0.78rem; color:var(--text-muted); font-weight:600;"><i class="ph ph-barcode"></i> SKU: <code>${p.sku \|\| 'NEX-PROD'}</code></span> <span style="font-size:0.78rem; color:var(--emerald-accent); font-weight:700; margin-left:auto;"><i class="ph ph-check-circle"></i> คลังมีพร้อมส่ง (${p.stock} ชิ้น)</span> </div> <h1 style="font-size:1.8rem; font-weight:800; line-height:1.3; margin-bottom:1rem; color:#FFF;">${p.title}</h1> <!-- Price Display Box --> <div style="background:rgba(255,255,255,0.03); border:1px solid var(--border-glass); padding:1.25rem; border-radius:16px; margin-bottom:1.5rem;"> <div style="display:flex; align-items:baseline; gap:1rem;"> <span class="current-price" id="displayPrice" style="font-size:2.4rem;">฿${numberFormat(p.price)}</span> ${p.original_price ? `<span class="original-price" style="font-size:1.2rem;">฿${numberFormat(p.original_price)}</span>` : ''} ${p.original_price ? ` <span style="font-size:0.8rem; background:rgba(244,63,94,0.15); color:var(--rose-accent); padding:4px 10px; border-radius:8px; font-weight:bold; margin-left:auto;"> ประหยัด ฿${numberFormat(p.original_price - p.price)} </span> ` : ''} </div> ${p.is_group_buy ? ` <div style="margin-top:0.75rem; font-size:0.85rem; color:var(--gold-accent); background:rgba(245,158,11,0.12); padding:8px 14px; border-radius:10px; border:1px solid rgba(245,158,11,0.3);"> <i class="ph ph-users-three"></i> เข้าร่วม <strong>Group Buy</strong> สั่งซื้อพร้อมเพื่อนรับราคาพิเศษเพียง <strong>฿${numberFormat(p.group_price)}</strong> </div> ` : ''} </div> <!-- Shopee-style Variant Selector Container --> <div class="glass-panel" style="padding:1.25rem; margin-bottom:1.5rem;"> <h3 style="font-size:1.05rem; font-weight:800; margin-bottom:1rem; color:#FFF; display:flex; align-items:center; gap:8px;"> <i class="ph ph-sliders-horizontal" style="color:var(--teal-accent);"></i> เลือกตัวเลือกสินค้า (Select Product Options) </h3> <!-- 1. Color Selector --> ${variantsObj.colors && variantsObj.colors.length > 0 ? ` <div class="variant-group"> <div class="variant-title"><i class="ph ph-palette"></i> ตัวเลือกสี (Color):</div> <div class="variant-options" id="colorOptions"> ${variantsObj.colors.map((c, idx) => ` <div class="variant-pill ${idx === 0 ? 'active' : ''}" onclick="selectColor(${idx}, '${c.name}', '${c.image \|\| p.image_url}')"> ${c.image ? `<img src="${c.image}" class="variant-thumb">` : ''} <span>${c.name}</span> </div> `).join('')} </div> </div> ` : ''} <!-- 2. Size / Model Selector --> ${variantsObj.sizes && variantsObj.sizes.length > 0 ? ` <div class="variant-group"> <div class="variant-title"><i class="ph ph-ruler"></i> ตัวเลือกไซส์ / ขนาด (Size):</div> <div class="variant-options" id="sizeOptions"> ${variantsObj.sizes.map((s, idx) => ` <div class="variant-pill ${idx === 0 ? 'active' : ''}" onclick="selectSize(${idx}, '${s.name}', ${s.price_offset \|\| 0})"> <span>${s.name}</span> ${s.price_offset ? `<span style="font-size:0.75rem; color:var(--teal-accent);">(+฿${s.price_offset})</span>` : ''} </div> `).join('')} </div> </div> ` : ''} <!-- 3. Switch / Edition Selector --> ${(variantsObj.switches \|\| variantsObj.editions) ? ` <div class="variant-group"> <div class="variant-title"><i class="ph ph-gear-six"></i> ตัวเลือกสวิตช์ / รุ่น (Model / Switch):</div> <div class="variant-options" id="switchOptions"> ${(variantsObj.switches \|\| variantsObj.editions).map((item, idx) => ` <div class="variant-pill ${idx === 0 ? 'active' : ''}" onclick="selectSwitchOrEdition(${idx}, '${item.name}', ${item.price_offset \|\| 0})"> <span>${item.name}</span> ${item.price_offset ? `<span style="font-size:0.75rem; color:var(--teal-accent);">(+฿${item.price_offset})</span>` : ''} </div> `).join('')} </div> </div> ` : ''} <!-- Quantity Picker --> <div class="variant-group" style="margin-bottom:0.5rem;"> <div class="variant-title"><i class="ph ph-hash"></i> จำนวน (Quantity):</div> <div style="display:flex; align-items:center; gap:1rem;"> <div class="qty-picker"> <button class="qty-btn" onclick="changeQty(-1)">-</button> <input type="text" class="qty-input" id="qtyInput" value="1" readonly> <button class="qty-btn" onclick="changeQty(1)">+</button> </div> <span style="font-size:0.8rem; color:var(--text-muted);">คลังมีสินค้าทั้งหมด ${p.stock} ชิ้น</span> </div> </div> <!-- Selected Summary Box --> <div class="selected-summary-box" id="selectedSummaryText" style="margin-top:1rem;"> <i class="ph ph-check-circle"></i> <strong>ตัวเลือกที่เลือก:</strong> กำลังโหลด... </div> </div> <!-- AI Summary Box --> <div class="glass-panel" style="padding:1.25rem; margin-bottom:1.5rem; border-left:4px solid var(--teal-accent);"> <h4 style="font-size:0.95rem; font-weight:700; color:var(--teal-accent); display:flex; align-items:center; gap:6px;"> <i class="ph ph-sparkle"></i> ข้อสรุปคำแนะนำจาก AI (AI Verdict) </h4> <p style="font-size:0.9rem; margin-top:0.5rem; color:var(--text-main); line-height:1.6;"> ${aiSummary.verdict \|\| 'สินค้าคุณภาพสูง คุ้มค่าแก่การซื้อ ได้รับคะแนนรีวิวดีเยี่ยมจากผู้ใช้งานจริง'} </p> </div> <!-- Action CTA Buttons --> <div style="display:flex; gap:1rem; margin-bottom:2rem;"> <button class="btn-primary" style="flex:1; padding:1rem; font-size:1.05rem;" onclick="addToCartDetailShopee()"> <i class="ph ph-shopping-bag-open"></i> ใส่ตะกร้าอัจฉริยะ (Smart Cart) </button> <button class="btn-glass" style="padding:1rem 1.5rem; font-size:1.05rem;" onclick="trackPriceDrop(${p.id})"> <i class="ph ph-bell"></i> จับตาราคาลด </button> </div> </div> </div> <!-- Section 1: Full Description --> <section style="margin-bottom:3rem;"> <h2 style="font-size:1.4rem; font-weight:800; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;"> <i class="ph ph-article" style="color:var(--teal-accent);"></i> รายละเอียดและคุณสมบัติสินค้าแบบเจาะลึก (Full Product Description) </h2> <div class="desc-box"> ${p.description \|\| 'ไม่มีข้อมูลรายละเอียดเพิ่มเติม'} </div> </section> <!-- Section 2: Detailed Specifications Grid --> <section style="margin-bottom:3rem;"> <h2 style="font-size:1.4rem; font-weight:800; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;"> <i class="ph ph-list-checks" style="color:var(--purple-accent);"></i> ข้อมูลจำเพาะและสเปกสินค้า (Technical Specifications) </h2> <div class="specs-grid"> ${Object.keys(specsObj).length > 0 ? Object.entries(specsObj).map(([k, v]) => ` <div class="spec-item"> <span style="color:var(--text-muted); font-weight:600;">${k}</span> <strong style="color:var(--teal-accent);">${v}</strong> </div> `).join('') : ` <div class="spec-item"><span>มาตรฐานการผลิต</span><strong>NEXUS Certified</strong></div> <div class="spec-item"><span>ระยะเวลาการรับประกัน</span><strong>1 ปีเต็ม</strong></div> `} </div> </section> <!-- Section 3: Verified Customer Reviews --> <section class="glass-panel" style="padding:2rem; margin-bottom:3rem;"> <h2 style="font-size:1.4rem; font-weight:800; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;"> <i class="ph ph-chats" style="color:var(--gold-accent);"></i> รีวิวจากผู้ใช้งานจริง (Verified Reviews & Feedback) </h2> <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:1.25rem; margin-bottom:1.5rem;"> <div style="background:rgba(255,255,255,0.03); padding:1.25rem; border-radius:14px; text-align:center;"> <span style="font-size:2.2rem; font-weight:900; color:var(--gold-accent);">${p.rating_avg} / 5.0</span> <p style="font-size:0.8rem; color:var(--text-muted); margin-top:4px;">คะแนนเฉลี่ยจากผู้ซื้อ ${p.review_count \|\| 328} คน</p> </div> <div style="background:rgba(255,255,255,0.03); padding:1.25rem; border-radius:14px; text-align:center;"> <span style="font-size:2.2rem; font-weight:900; color:var(--emerald-accent);">98%</span> <p style="font-size:0.8rem; color:var(--text-muted); margin-top:4px;">อัตราการสั่งซื้อซ้ำ (Repurchase Rate)</p> </div> <div style="background:rgba(255,255,255,0.03); padding:1.25rem; border-radius:14px; text-align:center;"> <span style="font-size:2.2rem; font-weight:900; color:var(--teal-accent);">100%</span> <p style="font-size:0.8rem; color:var(--text-muted); margin-top:4px;">สินค้าของแท้ การันตีโดย NEXUS</p> </div> </div> <div style="display:flex; flex-direction:column; gap:1rem;"> <div style="background:rgba(255,255,255,0.02); border:1px solid var(--border-glass); padding:1.25rem; border-radius:14px;"> <div style="display:flex; justify-content:space-between; margin-bottom:0.5rem;"> <div> <strong style="color:var(--teal-accent);">Somchai R. (ผู้ยืนยันการซื้อจริง)</strong> <span style="font-size:0.75rem; background:rgba(16,185,129,0.15); color:var(--emerald-accent); padding:2px 8px; border-radius:6px; margin-left:8px;">Verified Buyer</span> </div> <span style="font-size:0.8rem; color:var(--gold-accent);">★★★★★ ใช้งานแล้ว 30 วัน</span> </div> <p style="font-size:0.88rem; color:var(--text-main); line-height:1.6;">สินค้าตรงปก เลือกสีและไซส์ได้ตามต้องการ แพ็คเกจดีมากครับ!</p> </div> </div> </section> <!-- Section 4: Related Products Recommendations --> ${relatedProducts.length > 0 ? ` <section style="margin-bottom:3rem;"> <h2 style="font-size:1.4rem; font-weight:800; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;"> <i class="ph ph-squares-four" style="color:var(--teal-accent);"></i> สินค้าอื่นๆ ที่คุณอาจสนใจ (Recommended Products) </h2> <div style="display:grid; grid-template-columns: repeat(4, 1fr); gap:1.25rem;"> ${relatedProducts.map(rel => ` <div class="related-card" onclick="location.href='product.php?id=${rel.id}'"> <img src="${rel.image_url}" style="width:100%; height:140px; object-fit:cover; border-radius:10px; margin-bottom:0.75rem;"> <h4 style="font-size:0.88rem; font-weight:700; line-height:1.4; height:2.8em; overflow:hidden; text-overflow:ellipsis;">${rel.title}</h4> <div style="display:flex; justify-content:space-between; align-items:center; margin-top:0.75rem;"> <strong class="current-price" style="font-size:1.1rem;">฿${numberFormat(rel.price)}</strong> <span style="font-size:0.75rem; color:var(--gold-accent);"><i class="ph ph-star-fill"></i> ${rel.rating_avg}</span> </div> </div> `).join('')} </div> </section> ` : ''} `; // 360 Rotator Drag Logic const rotatorContainer = document.getElementById('rotator360Box'); const rotatorImg = document.getElementById('mainProdImg'); let isDragging = false; let startX = 0; let rotateDeg = 0; rotatorContainer?.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); window.addEventListener('mouseup', () => { isDragging = false; }); rotatorContainer?.addEventListener('mousemove', (e) => { if (!isDragging) return; const delta = e.clientX - startX; rotateDeg += delta 0.5; startX = e.clientX; rotatorImg.style.transform = `rotateY(${rotateDeg}deg) scale(1.05)`; }); updateSelectedSummary(); }); // Variant selector handlers function selectColor(idx, colorName, imageUrl) { const parent = document.getElementById('colorOptions'); if (parent) { const pills = parent.querySelectorAll('.variant-pill'); pills.forEach((p, i) => p.classList.toggle('active', i === idx)); } selectedVariants.color = { name: colorName, image: imageUrl }; if (imageUrl) { document.getElementById('mainProdImg').src = imageUrl; } updateSelectedSummary(); } function selectSize(idx, sizeName, priceOffset = 0) { const parent = document.getElementById('sizeOptions'); if (parent) { const pills = parent.querySelectorAll('.variant-pill'); pills.forEach((p, i) => p.classList.toggle('active', i === idx)); } selectedVariants.size = { name: sizeName, priceOffset: priceOffset }; updateSelectedSummary(); } function selectSwitchOrEdition(idx, name, priceOffset = 0) { const parent = document.getElementById('switchOptions'); if (parent) { const pills = parent.querySelectorAll('.variant-pill'); pills.forEach((p, i) => p.classList.toggle('active', i === idx)); } selectedVariants.switchOrEdition = { name: name, priceOffset: priceOffset }; updateSelectedSummary(); } function changeQty(delta) { let newQty = selectedVariants.qty + delta; if (newQty < 1) newQty = 1; if (currentProduct && newQty > currentProduct.stock) newQty = currentProduct.stock; selectedVariants.qty = newQty; document.getElementById('qtyInput').value = newQty; updateSelectedSummary(); } function updateSelectedSummary() { let totalOffset = 0; let parts = []; if (selectedVariants.color) parts.push(`สี: ${selectedVariants.color.name \|\| selectedVariants.color}`); if (selectedVariants.size) { parts.push(`ไซส์: ${selectedVariants.size.name \|\| selectedVariants.size}`); if (selectedVariants.size.priceOffset) totalOffset += selectedVariants.size.priceOffset; } if (selectedVariants.switchOrEdition) { parts.push(`รุ่น/สวิตช์: ${selectedVariants.switchOrEdition.name \|\| selectedVariants.switchOrEdition}`); if (selectedVariants.switchOrEdition.priceOffset) totalOffset += selectedVariants.switchOrEdition.priceOffset; } parts.push(`จำนวน: ${selectedVariants.qty} ชิ้น`); const summaryBox = document.getElementById('selectedSummaryText'); if (summaryBox) { summaryBox.innerHTML = `<i class="ph ph-check-circle"></i> <strong>ตัวเลือกที่เลือก:</strong> ${parts.join(' \| ')}`; } const priceBox = document.getElementById('displayPrice'); if (priceBox && currentProduct) { const finalUnitPrice = basePrice + totalOffset; priceBox.textContent = `฿${numberFormat(finalUnitPrice * selectedVariants.qty)}`; } } function addToCartDetailShopee() { if (!currentProduct) return; let cart = []; try { cart = JSON.parse(localStorage.getItem('nexus_cart') \|\| '[]'); } catch(e) {} let totalOffset = 0; let variantParts = []; if (selectedVariants.color) variantParts.push(`สี: ${selectedVariants.color.name \|\| selectedVariants.color}`); if (selectedVariants.size) { variantParts.push(`ไซส์: ${selectedVariants.size.name \|\| selectedVariants.size}`); if (selectedVariants.size.priceOffset) totalOffset += selectedVariants.size.priceOffset; } if (selectedVariants.switchOrEdition) { variantParts.push(`รุ่น: ${selectedVariants.switchOrEdition.name \|\| selectedVariants.switchOrEdition}`); if (selectedVariants.switchOrEdition.priceOffset) totalOffset += selectedVariants.switchOrEdition.priceOffset; } const itemPrice = basePrice + totalOffset; const itemTitle = currentProduct.title; const itemImg = (selectedVariants.color && selectedVariants.color.image) ? selectedVariants.color.image : currentProduct.image_url; const newItem = { id: currentProduct.id, title: itemTitle, price: itemPrice, image_url: itemImg, qty: selectedVariants.qty, selectedVariantText: variantParts.join(' \| ') \|\| 'รุ่นมาตรฐาน' }; cart.push(newItem); localStorage.setItem('nexus_cart', JSON.stringify(cart)); alert(`เพิ่มสินค้าเข้าตะกร้าเรียบร้อยแล้ว!\n${variantParts.join(' \| ')}`); window.location.href = 'index.php?open_cart=1'; } function trackPriceDrop(id) { alert('ระบบบันทึกการจับตาราคาลดเรียบร้อยแล้ว จะแจ้งเตือนทันทีเมื่อมีการปรับลดราคา!'); } function numberFormat(num) { return new Intl.NumberFormat().format(num \|\| 0); } </script> </body> </html>

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