# 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