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):

<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

<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:

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

Create the product page in src/pages/
Add hero section with the "ราคาสินค้า" button using data-price-button class="hidden"
Add the PDF section with id="pricelist" at the appropriate location
Copy PDF to public/documents/
The button will automatically appear when the page loads

Testing

After adding a PDF section, verify:

Navigate to the product page
The "ราคาสินค้า" button should be visible in the hero section
Click the button — it should scroll to the #pricelist section
The PDF link should open correctly

For pages without PDF:

Navigate to a product page without a #pricelist section
The "ราคาสินค้า" button should not be visible

5.0 KiB Raw Permalink Blame History