Flyer System

Private, print-friendly flyer pages for physical marketing campaigns.

Features

• ✅ Not indexed by search engines (noindex meta tags)
• ✅ Print-optimized design with proper page breaks and colors
• ✅ Dynamic deals from database with fallback data
• ✅ QR codes for WhatsApp and Telegram channels
• ✅ Urgency messaging with countdown timers
• ✅ One-click printing with optimized layout

Current Flyers

v1 - Thanksgiving Campaign

URL: /flyers/v1 Theme: “See All These Deals You Missed” Target: General audience, Thanksgiving urgency Layout: 2-column grid, 6 deals, WhatsApp + Telegram CTAs

Creating New Flyer Versions

Quick Method: Duplicate and Modify

1. Copy an existing flyer:

   cp www/src/pages/flyers/v1.astro www/src/pages/flyers/v2.astro

2. Important: Update imports to use relative paths (not @/ aliases):

   import { CHANNELS } from "../../config/channels";

3. Update the content:

   • Change headline and messaging
   • Adjust color scheme (search for #ff4444 and replace)
   • Modify deal count (change slice(0, 6) to your desired number)
   • Update urgency messaging and countdown dates

4. Test locally:

   cd www && npm run dev
   # Visit http://localhost:4323/flyers/v2

5. Print test:

   • Click the “Print Flyer” button
   • Check margins, colors, and page breaks
   • Adjust CSS in @media print section if needed

Design Variations

v2 Ideas - Category-Specific:

• Electronics flyer: Tech deals only
• Fashion flyer: Clothing and accessories
• Home & Kitchen: Household items
• Seasonal: Christmas, Black Friday, etc.

v3 Ideas - Layout Variations:

• Single column (more detail per deal)
• 3-column grid (more deals, smaller images)
• Featured deal + grid (hero deal + 8 smaller deals)

v4 Ideas - Audience-Specific:

• College students: Budget-friendly essentials
• Parents: Family and kids products
• Fitness enthusiasts: Sports and wellness

Customization Options

Change Color Scheme

Find and replace these colors in the flyer:

• Primary: #ff4444 (red)
• Primary Dark: #cc0000 (dark red)
• WhatsApp: #25D366 (green)
• Telegram: #0088cc (blue)

Adjust Deal Count

In the frontmatter section:

deals = apiDeals.slice(0, 6); // Change 6 to desired number

Modify Grid Layout

In the CSS section:

.deals-grid {
  grid-template-columns: repeat(2, 1fr); /* Change 2 to 1 or 3 */
  gap: 1rem;
}

Add Custom Filters

Query specific deal types in flyer-deals.ts:

// Example: Electronics only
WHERE rd.deal_state = 'AVAILABLE'
  AND pc.primary_category = 'Electronics'
  AND rd.discount_percent >= 30

API Endpoint

Endpoint: /api/deals/flyer-deals Returns: JSON array of high-value deals (30%+ discount) Cache: 1 hour (3600 seconds) Limit: 12 deals (modify in query)

Response Format

{
  "id": "RF_ABC123",
  "title": "Product Title",
  "brand": "Brand Name",
  "salePrice": 79.98,
  "regularPrice": 149.99,
  "discountPercent": 47,
  "imageUrl": "https://...",
  "productUrl": "https://..."
}

Print Optimization Tips

Best Practices

1. Test on actual printer: Colors and margins vary by printer
2. Use standard paper: Letter size (8.5” x 11”)
3. High-quality paper: Use cardstock or glossy for durability
4. Color printing: Essential for QR codes and branding
5. Check QR codes: Scan with phone before mass printing

Print CSS

The flyer uses special print styles:

@media print {
  @page {
    margin: 0.5in;
    size: letter portrait;
  }

  body {
    print-color-adjust: exact; /* Preserve colors */
  }

  .no-print {
    display: none; /* Hide print button */
  }
}

Distribution Strategy

Physical Locations

• Coffee shops and cafes bulletin boards
• College campus common areas
• Apartment complex mailrooms
• Gym and fitness center boards
• Library community boards
• Grocery store bulletin boards

QR Code Best Practices

• Test first: Scan before printing
• Minimum size: 1.5” x 1.5” for easy scanning
• High contrast: Black QR on white background
• Error correction: Built into QR generator
• Clear instructions: “Scan with phone camera”

Analytics Tracking

To track flyer performance, add UTM parameters to channel URLs:

const whatsappUrl = `${CHANNELS.whatsapp.url}?utm_source=flyer&utm_campaign=v1_thanksgiving`;
const telegramUrl = `${CHANNELS.telegram.url}?utm_source=flyer&utm_campaign=v1_thanksgiving`;

Future Enhancements

• A/B testing different layouts
• Personalized QR codes per location
• Dynamic urgency based on actual events
• Multi-language support
• Location-specific deals
• Seasonal theme templates

Need Help?

Questions or issues? Check:

• Main docs: /docs/
• Database schema: /docs/schema.md
• Deal scoring: /docs/deal-scoring-system.md