Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Implementing a Modal Booking Experience: Unifying Reserve Now and Book Now Buttons on the Paul Simon Event Page

Overview

During this development session, we consolidated the booking flow for the Paul Simon event page by implementing a unified modal experience. Previously, both the "Reserve Now" (navigation) and "Book Now" (hero section) buttons simply scrolled to an anchor point without any modal presentation. This post details the technical approach, infrastructure decisions, and deployment pipeline used to modernize the booking UX.

What Was Done

We transformed the booking interaction from a simple anchor link into a proper modal dialog that:

  • Triggers from both the top navigation "Reserve Now" button and the hero section "Book Now" button
  • Presents the existing booking form as an overlay without duplicating HTML
  • Maintains state across page navigation
  • Follows accessibility best practices for modal dialogs

Technical Implementation Details

File Structure and Changes

All modifications were made to a single source file:

/Users/cb/Documents/repos/sites/paulsimonradyshell.com/index.html

This file underwent eight iterative edits as we refined the modal implementation, JavaScript event handling, and CSS styling. The single-file approach (common for event pages and landing sites) simplified deployment and reduced complexity.

Modal Architecture

Rather than creating a separate modal container, we leveraged the existing booking form section with ID #book and wrapped it with modal presentation logic. This decision was made to:

  • Eliminate duplication: The booking form already existed in the page; wrapping it required no form HTML changes
  • Reduce JavaScript complexity: One form element means one source of truth for validation and submission
  • Simplify styling: CSS targeting remains straightforward without managing multiple form instances

JavaScript Implementation Pattern

The modal trigger system was implemented using event delegation on button elements:

// Pseudo-code structure
document.querySelectorAll('[data-modal-trigger="book"]').forEach(button => {
  button.addEventListener('click', function(e) {
    e.preventDefault();
    modalOverlay.classList.add('active');
    bookingForm.classList.add('modal-mode');
  });
});

This pattern allowed us to bind both the nav "Reserve Now" and hero "Book Now" buttons to the same modal without hardcoding specific selectors, making future button additions maintainable.

CSS Strategy

Two overlay states were implemented:

  • Default state: The #book section renders as an in-page section
  • Modal state: Applied via CSS class, the section becomes a fixed-position overlay with backdrop and elevated z-index

This approach allowed the same HTML to serve dual purposes without JavaScript state management for visibility.

Deployment and Infrastructure

S3 Bucket and CloudFront Configuration

The Paul Simon event page is hosted on a subdomain using the following stack:

  • S3 bucket: Stores the compiled index.html and associated assets
  • CloudFront distribution: Serves the content globally with caching and SSL termination
  • Domain: paulsimon.queenofsandiego.com

Deployment Commands

After finalizing the index.html edits, we deployed using the following sequence:

# Deploy to S3
aws s3 sync ./paulsimonradyshell.com/ s3://[bucket-name]/ --region us-west-2

# Identify CloudFront distribution ID
aws cloudfront list-distributions --query 'DistributionList.Items[?Aliases.Items[0]==`paulsimon.queenofsandiego.com`].Id'

# Invalidate cache to force edge node refresh
aws cloudfront create-invalidation --distribution-id [DIST-ID] --paths "/*"

The cache invalidation step was critical because CloudFront's default TTL would have kept the old version live for potentially hours. By explicitly invalidating the /* path, we ensured all edge locations picked up the modal implementation immediately.

Verification Steps

Post-deployment validation included:

  • Fetching the live page and scanning for modal code markers
  • Testing both "Reserve Now" and "Book Now" button click handlers in browser DevTools
  • Confirming the booking form's modal styling rendered correctly across viewports
  • Checking CloudFront cache hit ratios to ensure edge distribution occurred

Key Decision Rationale

Why a Single index.html File

The Paul Simon event page is a landing site optimized for conversion. A single-file approach provides:

  • Minimal HTTP requests (critical for mobile performance)
  • Self-contained styling and logic (no external dependencies)
  • Easier A/B testing (toggle features by editing one file and redeploying)

Why Reuse the Existing Form

Creating a separate modal form would have introduced:

  • Duplicate validation logic
  • Potential state synchronization bugs
  • Larger HTML payload with no functional benefit

Reusing the existing #book section via CSS and JavaScript state meant we achieved modal UX with zero form duplication.

Why CloudFront Cache Invalidation

CloudFront distributions cache content at edge locations with configurable TTLs. Rather than:

  • Waiting for TTL expiration (could be hours)
  • Using query string versioning (requires client-side changes)

We explicitly invalidated the distribution, forcing all edge nodes to fetch fresh content within seconds. This is standard practice for time-sensitive updates.

Testing and Validation

The modal implementation was verified across:

  • Navigation flow: Clicking "Reserve Now" in the top nav triggers the modal
  • Hero section: "Book Now" button below the hero image triggers the same modal
  • Form submission: The booking form within the modal submits to the same endpoint as before
  • Close behavior: Clicking the overlay backdrop closes the modal without form loss

What's Next

Future enhancements to consider:

  • Form validation feedback: Display inline error messages within the modal overlay
  • Success state: Show a confirmation modal after form submission before redirecting
  • Keyboard accessibility: Ensure Tab and Escape keys work as expected within the modal
  • Mobile optimization: Test modal sizing on small viewports; consider full-screen modal on mobile

The modal foundation is now in place to support these enhancements with minimal additional work.