fix(products): align all-products images with product-page heroes + drop dates
## all-products.astro Remove 2 broken product links (Poloplast, PVC + fittings) and align the remaining 24 products with the header main menu (BaseLayout.astro): - Reorganise categories to match the 7 header categories (ท่อพีพีอาร์, เครื่องเชื่อมท่อ, ระบบน้ำ, อุปกรณ์ปรับอากาศ, อุปกรณ์ดับเพลิง, ฉนวนหุ้มท่อ, ระบบรั้ว) instead of the old ad-hoc split - Add Ball Jet to "อุปกรณ์ปรับอากาศ" so the page matches the menu - Re-point 6 product images to each product page's actual hero/feature image so the cards show what the linked page shows: - HDPE, Syler, HDPE welding, PPR welding, Ball Jet, Vineman ## index.astro (homepage) Drop the <time>...</time> block from the "บทความล่าสุด" article cards to match the blog index (no dates, just tag chips).
This commit is contained in:
hermes
@@ -1,61 +1,66 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
// Categories match the main menu in BaseLayout.astro (header dropdown order)
|
||||
const products = [
|
||||
// ท่อพีพีอาร์
|
||||
// ท่อพีพีอาร์ (6 items - matches main menu)
|
||||
{ name: "ไทยพีพีอาร์", href: "/ท่อ-ppr-thai-ppr", image: "/images/products-cropped/ppr-pipe_000C.jpg", category: "ท่อพีพีอาร์" },
|
||||
{ name: "ท่อ PPR ตราช้าง", href: "/ท่อ-ppr-scg", image: "/images/products-cropped/ppr-scg.jpg", category: "ท่อพีพีอาร์" },
|
||||
{ name: "ท่อ PP-R Poloplast", href: "/pp-r-poloplast", image: "/images/poloplast/POLOPLAST_001.png", category: "ท่อพีพีอาร์" },
|
||||
{ name: "ท่อ HDPE", href: "/ท่อ-hdpe", image: "/images/products-misc/HDPE.jpg", category: "ท่อพีพีอาร์" },
|
||||
|
||||
// ท่อ UPVC/Specialty
|
||||
{ name: "ท่อ UPVC", href: "/ท่อ-upvc", image: "/images/products-cropped/upvc-pipe_000C.jpg", category: "ท่อ UPVC/Specialty" },
|
||||
{ name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-misc/SYLER01.jpg", category: "ท่อ UPVC/Specialty" },
|
||||
{ name: "ท่อ PVC และข้อต่อ", href: "/ท่อ-pvc-และข้อต่อ", image: "/images/products-cropped/pvc-pipe_000C.jpg", category: "ท่อ UPVC/Specialty" },
|
||||
{ name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/XYLENT_001.png", category: "ท่อ UPVC/Specialty" },
|
||||
|
||||
// เครื่องเชื่อมท่อ
|
||||
{ name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/products-misc/HDPE.jpg", category: "เครื่องเชื่อมท่อ" },
|
||||
{ name: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr", image: "/images/products-misc/ppr0001.jpg", category: "เครื่องเชื่อมท่อ" },
|
||||
{ name: "ท่อ HDPE", href: "/ท่อ-hdpe", image: "/images/products-cropped/hdpe001.png", category: "ท่อพีพีอาร์" },
|
||||
{ name: "ท่อ UPVC", href: "/ท่อ-upvc", image: "/images/products-cropped/upvc-pipe_000C.jpg", category: "ท่อพีพีอาร์" },
|
||||
{ name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-cropped/syler-pipe-cold-water.jpg", category: "ท่อพีพีอาร์" },
|
||||
{ name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/XYLENT_001.png", category: "ท่อพีพีอาร์" },
|
||||
|
||||
// เครื่องเชื่อมท่อ (4 items)
|
||||
{ name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/HDPE-welding-crop.jpg", category: "เครื่องเชื่อมท่อ" },
|
||||
{ name: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr", image: "/images/products-misc/ppr-welding-machine-main.jpg", category: "เครื่องเชื่อมท่อ" },
|
||||
{ name: "Pipe Coupling", href: "/pipe-coupling", image: "/images/pipe-coupling/BG-SMC02.png", category: "เครื่องเชื่อมท่อ" },
|
||||
{ name: "เม็กกรู๊ฟ คับปลิ้ง", href: "/เม็กกรู๊ฟ-คับปลิ้ง", image: "/images/products-misc/MECH_001.jpg", category: "เครื่องเชื่อมท่อ" },
|
||||
|
||||
// วาล์ว
|
||||
{ name: "วาล์ว Valve", href: "/วาล์ว-valve", image: "/images/products-cropped/valve_000C.jpg", category: "วาล์ว" },
|
||||
{ name: "DURGO วาล์วเติมอากาศ", href: "/durgo-avvs", image: "/images/products-cropped/durgo_000C.jpg", category: "วาล์ว" },
|
||||
|
||||
// ปั๊มและระบบน้ำ
|
||||
{ name: "ปั๊มน้ำ Water Pump", href: "/water-pump", image: "/images/products-cropped/water-pump_000C.jpg", category: "ปั๊มและระบบน้ำ" },
|
||||
{ name: "ระบบกรองน้ำ", href: "/water-treatment", image: "/images/products-cropped/water-treatment_000C.jpg", category: "ปั๊มและระบบน้ำ" },
|
||||
|
||||
|
||||
// ระบบน้ำ (3 items)
|
||||
{ name: "วาล์ว Valve", href: "/วาล์ว-valve", image: "/images/products-cropped/valve_000C.jpg", category: "ระบบน้ำ" },
|
||||
{ name: "ปั๊มน้ำ Water Pump", href: "/water-pump", image: "/images/products-cropped/water-pump_000C.jpg", category: "ระบบน้ำ" },
|
||||
{ name: "ระบบกรองน้ำ", href: "/water-treatment", image: "/images/products-cropped/water-treatment_000C.jpg", category: "ระบบน้ำ" },
|
||||
|
||||
// อุปกรณ์ปรับอากาศ (3 items)
|
||||
{ name: "กริลแอร์", href: "/grilles", image: "/images/products-cropped/grilles_000C.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
||||
|
||||
// ฉนวนและรั้ว
|
||||
{ name: "Armaflex", href: "/armflex", image: "/images/armflex/armaflex-sheet-roll.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "Aeroflex", href: "/aeroflex", image: "/images/aeroflex/aerocel-d-al-real.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "Maxflex", href: "/maxflex", image: "/images/maxflex/maxflex-fsk-foil.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "เทอร์โมเบรค Thermobreak", href: "/เทอร์โมเบรค-thermobreak", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนและรั้ว" },
|
||||
{ name: "Realflex", href: "/realflex", image: "/images/products-cropped/realflex_000C.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "ตู้ดับเพลิง", href: "/ตู้ดับเพลิง", image: "/images/products-cropped/extinguishers_000C.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "รั้วเทวดา", href: "/รั้วเทวดา", image: "/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "ระบบรั้วไวน์แมน", href: "/ระบบรั้วไวน์แมน", image: "/images/products-cropped/vineman_000C.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "DURGO วาล์วเติมอากาศ", href: "/durgo-avvs", image: "/images/products-cropped/durgo_000C.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
||||
{ name: "หัวจ่าย Ball Jet", href: "/หัวจ่าย-ball-jet", image: "/images/ball-jet/ball-jet-main-hd.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
||||
|
||||
// อุปกรณ์ดับเพลิง (2 items)
|
||||
{ name: "ตู้ดับเพลิง", href: "/ตู้ดับเพลิง", image: "/images/products-cropped/extinguishers_000C.jpg", category: "อุปกรณ์ดับเพลิง" },
|
||||
{ name: "Realflex", href: "/realflex", image: "/images/products-cropped/realflex_000C.jpg", category: "อุปกรณ์ดับเพลิง" },
|
||||
|
||||
// ฉนวนหุ้มท่อ (4 items)
|
||||
{ name: "Armaflex", href: "/armflex", image: "/images/armflex/armaflex-sheet-roll.jpg", category: "ฉนวนหุ้มท่อ" },
|
||||
{ name: "Aeroflex", href: "/aeroflex", image: "/images/aeroflex/aerocel-d-al-real.jpg", category: "ฉนวนหุ้มท่อ" },
|
||||
{ name: "Maxflex", href: "/maxflex", image: "/images/maxflex/maxflex-fsk-foil.jpg", category: "ฉนวนหุ้มท่อ" },
|
||||
{ name: "เทอร์โมเบรค Thermobreak", href: "/เทอร์โมเบรค-thermobreak", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนหุ้มท่อ" },
|
||||
|
||||
// ระบบรั้ว (2 items)
|
||||
{ name: "รั้วเทวดา", href: "/รั้วเทวดา", image: "/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg", category: "ระบบรั้ว" },
|
||||
{ name: "ระบบรั้วไวน์แมน", href: "/ระบบรั้วไวน์แมน", image: "/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg", category: "ระบบรั้ว" },
|
||||
];
|
||||
|
||||
// Get unique categories based on Header structure
|
||||
// Categories match main menu in BaseLayout.astro
|
||||
const categories = [
|
||||
{ name: "ท่อพีพีอาร์", id: "ppr" },
|
||||
{ name: "เครื่องเชื่อมท่อ", id: "welding" },
|
||||
{ name: "ระบบน้ำ", id: "water" },
|
||||
{ name: "อุปกรณ์ปรับอากาศ", id: "ac" },
|
||||
{ name: "อุปกรณ์ดับเพลิง", id: "fire" },
|
||||
{ name: "ฉนวนหุ้มท่อ", id: "insulation" },
|
||||
{ name: "ระบบรั้ว", id: "fence" },
|
||||
];
|
||||
|
||||
// Compute counts dynamically
|
||||
const categoryCounts = {};
|
||||
products.forEach(p => {
|
||||
categoryCounts[p.category] = (categoryCounts[p.category] || 0) + 1;
|
||||
});
|
||||
|
||||
const categories = [
|
||||
{ name: "ท่อพีพีอาร์", id: "ppr", count: 4 },
|
||||
{ name: "ท่อ UPVC/Specialty", id: "upvc", count: 4 },
|
||||
{ name: "เครื่องเชื่อมท่อ", id: "welding", count: 4 },
|
||||
{ name: "วาล์ว", id: "valve", count: 2 },
|
||||
{ name: "ปั๊มและระบบน้ำ", id: "pump", count: 2 },
|
||||
{ name: "อุปกรณ์ปรับอากาศ", id: "ac", count: 1 },
|
||||
{ name: "ฉนวนและรั้ว", id: "fence", count: 8 },
|
||||
];
|
||||
// Map category name to filter id
|
||||
const categoryIdMap = Object.fromEntries(categories.map(c => [c.name, c.id]));
|
||||
---
|
||||
|
||||
<BaseLayout title="สินค้าทั้งหมด - ดีล พลัส เทค" description="สินค้าระบบน้ำคุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ">
|
||||
@@ -83,7 +88,7 @@ const categories = [
|
||||
</button>
|
||||
{categories.map(cat => (
|
||||
<button data-filter={cat.id} class="filter-btn px-4 py-2 bg-neutral-100 text-neutral-700 hover:bg-primary-100 hover:text-primary-700 rounded-full text-sm font-medium transition-colors">
|
||||
{cat.name} ({cat.count})
|
||||
{cat.name} ({categoryCounts[cat.name] || 0})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -95,18 +100,10 @@ const categories = [
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="products-grid">
|
||||
{products.map(product => (
|
||||
<a
|
||||
href={product.href}
|
||||
<a
|
||||
href={product.href}
|
||||
class="product-card group bg-white rounded-xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all"
|
||||
data-category={
|
||||
product.category === "ท่อพีพีอาร์" ? "ppr" :
|
||||
product.category === "ท่อ UPVC/Specialty" ? "upvc" :
|
||||
product.category === "เครื่องเชื่อมท่อ" ? "welding" :
|
||||
product.category === "วาล์ว" ? "valve" :
|
||||
product.category === "ปั๊มและระบบน้ำ" ? "pump" :
|
||||
product.category === "อุปกรณ์ปรับอากาศ" ? "ac" :
|
||||
"fence"
|
||||
}
|
||||
data-category={categoryIdMap[product.category]}
|
||||
>
|
||||
<div class="aspect-square img-hover bg-neutral-100 overflow-hidden">
|
||||
<img
|
||||
@@ -142,11 +139,11 @@ const categories = [
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const productCards = document.querySelectorAll('.product-card');
|
||||
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const filter = btn.getAttribute('data-filter');
|
||||
|
||||
|
||||
// Update active state
|
||||
filterBtns.forEach(b => {
|
||||
b.classList.remove('bg-primary-600', 'text-white', 'active');
|
||||
@@ -154,7 +151,7 @@ const categories = [
|
||||
});
|
||||
btn.classList.add('bg-primary-600', 'text-white', 'active');
|
||||
btn.classList.remove('bg-neutral-100', 'text-neutral-700');
|
||||
|
||||
|
||||
// Filter products with animation
|
||||
productCards.forEach((card, index) => {
|
||||
if (filter === 'all' || card.getAttribute('data-category') === filter) {
|
||||
|
||||
@@ -339,9 +339,6 @@ const articles = (await getCollection('blog')).sort(
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-500 mb-3">
|
||||
<time datetime={article.data.published_at.toISOString().slice(0, 10)}>
|
||||
{article.data.published_at.toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
</time>
|
||||
{article.data.tags?.[0] && (
|
||||
<span class="px-2.5 py-0.5 bg-primary-50 text-primary-600 rounded-full text-xs font-medium">{article.data.tags[0]}</span>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user