Part 1: Source code - Astro project structure and components
This commit is contained in:
Kunthawat Greethong
131
PROJECT_PDF_GUIDE.md
Normal file
131
PROJECT_PDF_GUIDE.md
Normal file
@@ -0,0 +1,131 @@
|
||||
# PDF Section Pattern for Product Pages
|
||||
|
||||
This guide explains how to add price PDF sections to product pages. The "ราคาสินค้า" (Price) button automatically appears based on whether a `#pricelist` section exists on the page.
|
||||
|
||||
## Auto-Detection Behavior
|
||||
|
||||
The hero section includes a "ราคาสินค้า" button that is **hidden by default** (`hidden` class). JavaScript in `BaseLayout.astro` automatically:
|
||||
|
||||
- **Shows** the button if `#pricelist` section exists on the page
|
||||
- **Hides** the button if `#pricelist` section does not exist
|
||||
|
||||
This means you only need to add the PDF section — the button visibility is handled automatically.
|
||||
|
||||
---
|
||||
|
||||
## Adding PDF to Existing Product
|
||||
|
||||
### Step 1: Add PDF file
|
||||
|
||||
Copy the PDF file to `public/documents/` directory.
|
||||
|
||||
### Step 2: Add PDF section with `id="pricelist"`
|
||||
|
||||
Add this section to the product page (typically at the bottom, before the contact CTA):
|
||||
|
||||
```astro
|
||||
<section id="pricelist" class="py-16 px-4 bg-gradient-to-br from-primary-700 to-primary-600">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-2xl font-bold text-white mb-6">ดาวน์โหลดราคาสินค้า</h2>
|
||||
<a href="/documents/YOUR_FILE.pdf" target="_blank" class="inline-flex items-center gap-4 p-6 bg-white rounded-xl hover:bg-neutral-100 transition-colors group">
|
||||
<svg class="w-12 h-12 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z"/>
|
||||
</svg>
|
||||
<div class="text-left">
|
||||
<div class="font-semibold text-neutral-900 group-hover:text-primary-600 transition-colors">Product Name Price List</div>
|
||||
<div class="text-sm text-neutral-500">PDF - ดาวน์โหลดราคา</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### Step 3: Ensure button has correct attributes
|
||||
|
||||
The hero button must have:
|
||||
- `href="#pricelist"` — scrolls to the PDF section
|
||||
- `data-price-button` — tells JavaScript this is the price button
|
||||
- `class="hidden"` — starts hidden, JS will remove this if section exists
|
||||
|
||||
```astro
|
||||
<a href="#pricelist" data-price-button class="hidden bg-white text-primary-700 hover:bg-primary-50 py-3 px-6 rounded-xl font-semibold flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
ราคาสินค้า
|
||||
</a>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Products with PDF Sections (4 pages)
|
||||
|
||||
| Product | Route | PDF File |
|
||||
|---------|------|----------|
|
||||
| เทอร์โมเบรค Thermobreak | `/เทอร์โมเบรค-thermobreak` | `2026-New Update Thermobreak Price List.pdf` |
|
||||
| เครื่องเชื่อม HDPE | `/เครื่องเชื่อม-hdpe` | `Price List HDPE.pdf` |
|
||||
| ฉนวนหุ้มท่อ | `/ฉนวนหุ้มท่อ` | `16 Price List Armaflex 2567.pdf` |
|
||||
| เม็ดกรู๊ฟ คับปลิ้ง | `/เม็กกรู๊ฟ-คับปลิ้ง` | `Price List MECH_V13-2021 [260864](1).pdf` |
|
||||
|
||||
---
|
||||
|
||||
## Products WITHOUT PDF Sections
|
||||
|
||||
These pages do NOT have a `#pricelist` section, so the "ราคาสินค้า" button will remain hidden:
|
||||
|
||||
- `/water-pump`
|
||||
- `/water-treatment`
|
||||
- `/วาล์ว-valve`
|
||||
- `/durgo-avvs`
|
||||
- `/อุปกรณ์ปรับอากาศ`
|
||||
- `/grilles`
|
||||
- `/realflex`
|
||||
- `/อุปกรณ์ดับเพลิง`
|
||||
- `/รั้วเทวดา`
|
||||
- `/ระบบรั้วไวน์แมน`
|
||||
- And all other product pages not listed above
|
||||
|
||||
---
|
||||
|
||||
## JavaScript Implementation
|
||||
|
||||
The auto-detection script is in `src/layouts/BaseLayout.astro`:
|
||||
|
||||
```typescript
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const priceButton = document.querySelector('[data-price-button]');
|
||||
if (!priceButton) return;
|
||||
const hasPricelist = document.getElementById('pricelist') !== null;
|
||||
if (hasPricelist) {
|
||||
priceButton.classList.remove('hidden');
|
||||
priceButton.removeAttribute('disabled');
|
||||
} else {
|
||||
priceButton.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Adding New Product with PDF
|
||||
|
||||
1. Create the product page in `src/pages/`
|
||||
2. Add hero section with the "ราคาสินค้า" button using `data-price-button class="hidden"`
|
||||
3. Add the PDF section with `id="pricelist"` at the appropriate location
|
||||
4. Copy PDF to `public/documents/`
|
||||
5. The button will automatically appear when the page loads
|
||||
|
||||
---
|
||||
|
||||
## Testing
|
||||
|
||||
After adding a PDF section, verify:
|
||||
|
||||
1. Navigate to the product page
|
||||
2. The "ราคาสินค้า" button should be visible in the hero section
|
||||
3. Click the button — it should scroll to the `#pricelist` section
|
||||
4. The PDF link should open correctly
|
||||
|
||||
For pages without PDF:
|
||||
1. Navigate to a product page without a `#pricelist` section
|
||||
2. The "ราคาสินค้า" button should not be visible
|
||||
Reference in New Issue
Block a user