# Comparison Template V2 E2E Testing & Analysis


**Last Updated:** 2025-11-20

## Phase 1: Discovery & Baseline Establishment

### 1.1 Template Structure Analysis

#### Template File: `compare_template_v2.php` (218 lines)

**Sections & Components:**

1. **Head Section** (lines 74-101)

   - Base head include (`../base/head.php`)
   - Dynamic meta tags via `$pageGenerator->generateMetaTags()`
   - Comparison pages CSS (minified, print media trick)
   - Resource hints (preconnect, dns-prefetch)
   - Preload LCP image (competitor logo)
   - Schema.org JSON-LD via `$schemaGenerator->generate()`

2. **Body Structure** (lines 104-215)

   - Alpine.js data binding: `x-data="{ modelOpen: false, mobileNaviModelOpen: false, modalContentTitle: '', modalContentButton: '' }"`
   - Header include (`../base/header.php` with `$headerwidth = "w-full"`)

3. **Main Content Sections** (in order):

   - **Hero Section** (line 113-117): Component `../components/comparison/hero.php`
   - **Company Logos Section** (lines 119-128): Static logos slider with `../components/company_logos.php`
   - **Comparison Section** (lines 130-167):
     - Section header with "Vergleich" badge
     - H2: "Ordio vs. {competitor} - Funktionsvergleich im Überblick"
     - Descriptive text before grid
     - Comparison grid component `../components/comparison/grid.php`
   - **Legal Notice** (lines 169-173): Component `../components/comparison/legal_notice.php`
   - **All-in-one Section** (lines 175-179): Component `../components/comparison/all_in_one.php`
   - **Ordio Features Section** (line 182): Component `../components/comparison/ordio_features.php`
   - **Testimonials Section** (line 185): Component `../components/comparison/testimonials.php`
   - **Comparison Carousel** (lines 187-191): Base component `../base/compare_carousel.php`
   - **FAQ Section** (line 194): Generated via `$pageGenerator->generateFAQ()`

4. **Footer** (lines 198-205)

   - Footer include with standard config

5. **Scripts** (lines 207-214)
   - Comparison pages JavaScript (minified, deferred)
   - Lead capture popup component
   - Lead capture triggers JavaScript

#### Required Variables & Data Flow:

**Initialization (lines 19-69):**

- `$competitorSlug`: Extracted from URL or `$_GET['competitor']`
- `$competitor`: Loaded via `getCompetitorData($competitorSlug)` from `competitors_data.php`
- `$pageGenerator`: Instance of `ComparisonPageGenerator($competitor)`
- `$schemaGenerator`: Instance of `SchemaGenerator($competitor)`
- `$ordioRating`: Hardcoded rating data (4.9/5, 54 reviews)
- `$competitorRating`: Derived from `$competitor` data with fallbacks

**Component Dependencies:**

1. **Hero Component** (`hero.php`):

   - Requires: `$competitor`, `$generator`
   - Uses: `$competitor['name']`, `$competitor['category']`, `$competitor['focus']`
   - Includes: CTA buttons component

2. **Grid Component** (`grid.php`):

   - Requires: `$competitor`, `$ordioRating`, `$competitorRating`, `$ordioData`, `$hasDetails`
   - Includes: `ordio_comparison_content.php`, `ratings.php`, `detailed_ratings.php`, `pricing.php`, `competitor_details.php`

3. **Other Components**:
   - `legal_notice.php`: Requires `$competitorSlug`
   - `all_in_one.php`: Requires `$competitorName`
   - `ordio_features.php`: No required variables (static)
   - `testimonials.php`: No required variables (static)

#### Component File Locations:

- `v2/components/comparison/hero.php`
- `v2/components/comparison/grid.php`
- `v2/components/comparison/legal_notice.php`
- `v2/components/comparison/all_in_one.php`
- `v2/components/comparison/ordio_features.php`
- `v2/components/comparison/testimonials.php`
- `v2/components/comparison/ratings.php` (included by grid)
- `v2/components/comparison/detailed_ratings.php` (included by grid)
- `v2/components/comparison/pricing.php` (included by grid)
- `v2/components/comparison/competitor_details.php` (included by grid)
- `v2/components/company_logos.php`
- `v2/components/ordio_comparison_content.php`
- `v2/base/compare_carousel.php`
- `v2/base/header.php`
- `v2/base/footer.php`
- `v2/base/include_ctabuttons.php`
- `v2/components/lead-capture-popup.php`

#### Helper Classes:

- `ComparisonPageGenerator`: Generates meta tags and FAQ
- `SchemaGenerator`: Generates JSON-LD schema markup

### 1.2 Actual Page Structure Analysis

#### Actual Page: `compare_personio.php` (~2331 lines)

**Sections & Structure:**

1. **Head Section** (lines 8-274)

   - Static meta tags (title, description, keywords, OG tags, Twitter cards)
   - Inline JSON-LD schema (WebPage, Article, Table, SoftwareApplication, BreadcrumbList, FAQPage)
   - CSS loading with print media trick
   - Preload LCP image

2. **Body Structure** (lines 276-2331)
   - Header include
   - **Hero Section** (lines 285-597): Inline HTML, not component-based
   - **Company Logos Section** (lines 599-652): Inline logos slider
   - **Comparison Section** (lines 654-1161): Inline comparison grid with OMR-style layout
   - **All-in-one Section** (lines 1192-1641): Inline feature showcase
   - **Ordio Verteiler Section** (lines 1643-1801): Additional section (NOT in template V2)
   - **Testimonials Section** (lines 1804-1942): Inline testimonials
   - **FAQ Section** (lines 1948-2044): Static HTML `<details>` elements
   - Footer include
   - Inline JavaScript for scroll animations

**Key Differences from Template V2:**

1. **Hero Section**: Actual pages use inline HTML, template uses `hero.php` component
2. **Comparison Grid**: Actual pages have inline grid code (~500 lines), template uses `grid.php` component
3. **FAQ**: Actual pages use static HTML, template uses `$pageGenerator->generateFAQ()`
4. **Schema**: Actual pages have inline JSON-LD, template uses `SchemaGenerator` class
5. **Meta Tags**: Actual pages have static tags, template uses `ComparisonPageGenerator`
6. **Additional Section**: Actual pages have "Ordio Verteiler Section" (lines 1643-1801) - NOT in template V2
7. **JavaScript**: Actual pages have inline scroll animation scripts, template uses external JS files

#### Actual Page: `compare_planday.php` (~2368 lines)

Similar structure to `compare_personio.php`:

- Inline hero section
- Inline comparison grid
- Static FAQ
- Inline schema
- Additional sections not in template

#### Actual Page: `compare_clockin.php` (~2464 lines)

Similar structure:

- Inline hero section
- Inline comparison grid
- Static FAQ
- Inline schema
- Additional sections not in template

**Common Pattern Across Actual Pages:**

- All use inline code instead of components
- All have static FAQ sections
- All have inline schema markup
- All have additional sections not present in template V2
- All have inline JavaScript for animations

### 1.3 Component Inventory

**All components verified:**

- ✅ `hero.php` - Exists, properly structured
- ✅ `grid.php` - Exists, properly structured
- ✅ `legal_notice.php` - Exists, properly structured
- ✅ `all_in_one.php` - Exists, properly structured
- ✅ `ordio_features.php` - Exists, properly structured
- ✅ `testimonials.php` - Exists, properly structured
- ✅ `ratings.php` - Referenced by grid
- ✅ `detailed_ratings.php` - Referenced by grid
- ✅ `pricing.php` - Referenced by grid
- ✅ `competitor_details.php` - Referenced by grid

**Component Dependencies Verified:**

- All components have proper error handling
- Fallback values provided where needed
- Variable existence checks in place

---

## Phase 2: Code-Level Comparison

**To be completed...**

---

## Findings Summary

**Status:** Phase 1.1 Complete - Template structure documented
**Next Steps:** Analyze actual comparison pages, compare code structures