# Comparison Pages Migration Guide **Last Updated:** 2025-11-20 Guide for updating old design comparison pages (like `compare_flairhr.php`) to the new card-based design (like `compare_awork.php`, `compare_askdante.php`, etc.). ## Overview **Old Design:** Table-based comparison layout **New Design:** Card-based OMR-style comparison grid with enhanced features ## Key Differences ### Layout Structure **Old Design:** - Uses HTML `` element - Simple 3-column table (Feature | Ordio | Competitor) - Basic styling with `comparison-table` class **New Design:** - Uses card-based grid layout (`comparison-grid`) - Two side-by-side cards (`ordio-card` and `personio-card`) - Enhanced features: ratings, pricing, expandable details - Height synchronization between columns ### Visual Design **Old Design:** - Flat table layout - Basic checkmarks and text - Minimal visual hierarchy **New Design:** - Card-based with shadows and borders - Star ratings with distribution charts - Circular rating indicators - Pricing cards - Expandable detail sections - Better visual hierarchy ## Migration Checklist ### 1. Update Comparison Section Structure **Replace:** ```php
Funktion ordio {competitor}
``` **With:** ```php
``` ### 2. Add Ordio Column Content **Required Sections:** 1. **Header with Logo and Rating** ```php
Ordio
``` 2. **Ordio Comparison Content Include** ```php ``` 3. **Star Rating Distribution** - Copy from `compare_awork.php` lines 722-791 - Update rating percentages and counts 4. **Ratings Section (Einschätzungen Reviewer)** - Copy from `compare_awork.php` lines 794-871 - Update rating values 5. **Pricing Section** - Copy from `compare_awork.php` lines 874-914 - Update pricing if needed 6. **CTA Buttons** ```php
Pläne ansehen
``` ### 3. Update Competitor Column **Structure:** ```php

{Competitor description}

``` **Key Elements:** 1. **Header Background Color** - Use `bg-gray-600` or competitor brand color - Match competitor branding if known 2. **Competitor Logo** ```php {competitor} ``` 3. **Competitor Rating** - Update star rating display - Update rating value and count 4. **Expandable Details** - Copy structure from `compare_awork.php` lines 980-1065 - Update with competitor-specific features ### 4. Update CSS Include **Ensure comparison-pages.css is included:** ```php ``` ### 5. Add Alpine.js Support **Ensure Alpine.js is loaded** (should be included via `head.php`): ```php ``` **Add Alpine.js data attributes:** ```php
``` ### 6. Update Section Wrapper **Old:** ```php
``` **New:** ```php
``` ### 7. Update Comparison Section Header **Add:** ```php
Vergleich

Ordio vs. {Competitor}
Funktionsvergleich im Überblick

``` ### 8. Verify Image Assets **Check for required images:** ```bash ls -la v2/img/alternativen/{competitor}-vergleich-logo-*.webp ``` **If missing, generate variants:** ```bash node scripts/generate_responsive_logos.js ``` ### 9. Update Schema **Ensure Table schema includes Product schemas:** ```json { "@type": "Table", "mainEntity": [ { "@type": "Product", "name": "Ordio", "aggregateRating": { ... }, "offers": { ... } }, { "@type": "Product", "name": "{Competitor}", "aggregateRating": { ... }, "offers": { ... } } ] } ``` ### 10. Test and Validate **Testing Checklist:** - [ ] Page loads without errors - [ ] Comparison grid displays correctly - [ ] Columns have equal heights - [ ] Expandable sections work - [ ] Ratings display correctly - [ ] Images load with correct srcset - [ ] Responsive design works (mobile/tablet/desktop) - [ ] Schema validates (Google Rich Results Test) - [ ] No console errors - [ ] Performance acceptable (LCP < 2.5s) ## Code Comparison Examples ### Example 1: Feature Row **Old Design:** ```php
``` **New Design:** Features are now displayed in expandable sections within cards, not as table rows. See `ordio_comparison_content.php` for Ordio features and competitor column for competitor features. ### Example 2: Comparison Container **Old Design:** ```php
Schichtplanung Inklusive Feature description
``` **New Design:** ```php
``` ## Common Issues and Solutions ### Issue: Columns Not Equal Height **Solution:** Ensure Alpine.js height synchronization is working: ```php
``` Check that components dispatch `height-changed` events. ### Issue: Expandable Sections Not Working **Solution:** Ensure Alpine.js is loaded and `x-data` attributes are correct: ```php
...
``` ### Issue: Images Not Displaying **Solution:** Verify image paths and variants exist: ```bash ls -la v2/img/alternativen/{competitor}-vergleich-logo-*.webp ``` Generate variants if missing: ```bash node scripts/generate_responsive_logos.js ``` ### Issue: Styling Looks Broken **Solution:** Ensure `comparison-pages.css` is included: ```php ``` ## Step-by-Step Migration Process 1. **Backup existing page** ```bash cp v2/pages/compare_{competitor}.php v2/pages/compare_{competitor}.php.backup ``` 2. **Choose and copy the appropriate template** Choose based on whether the competitor needs a Details section: - **`compare_template_details.php`** - Use when competitor has detailed features/integrations to showcase - **`compare_template_nodetails.php`** - Use when competitor is well-known or doesn't need detailed feature breakdown ```bash # For pages with Details section: cp v2/pages/compare_template_details.php v2/pages/compare_{competitor}_new.php # OR for pages without Details section: cp v2/pages/compare_template_nodetails.php v2/pages/compare_{competitor}_new.php ``` 3. **Update competitor-specific content** - Meta tags - Schema data - Competitor name and description - Competitor logo paths (change `template_details-vergleich-logo-160w.webp` or `template_nodetails-vergleich-logo-160w.webp` to `{competitor}-vergleich-logo-160w.webp`) - Competitor ratings and pricing - If using Details template: Update Details section (features, integrations, special characteristics, button text) - FAQ content 4. **Test locally** ```bash php -S localhost:8003 -t . # Visit http://localhost:8003/v2/pages/compare_{competitor}_new.php ``` 5. **Validate schema** - Copy JSON-LD from page - Test with Google Rich Results Test 6. **Check performance** - Run Lighthouse audit - Verify LCP < 2.5s - Check CLS < 0.1 7. **Replace old file** ```bash mv v2/pages/compare_{competitor}_new.php v2/pages/compare_{competitor}.php ``` 8. **Test on production** - Verify page loads correctly - Check all images load - Test responsive design - Verify schema markup ## Reference Files **New Design Examples:** - `v2/pages/compare_awork.php` - `v2/pages/compare_askdante.php` - `v2/pages/compare_7shifts.php` - `v2/pages/compare_clockin.php` - `v2/pages/compare_clockify.php` **Old Design Examples:** - `v2/pages/compare_flairhr.php` **Component Files:** - `v2/components/ordio_comparison_content.php` - `v2/base/compare_carousel.php` - `v2/data/ordio_comparison_data.php` - `v2/data/tools_data.php` **CSS:** - `v2/css/comparison-pages.css` ## Additional Resources - [Comparison Pages Structure Reference](COMPARISON_PAGES_STRUCTURE.md) - [Comparison Pages Quick Reference](COMPARISON_PAGES_ai//QUICK_REFERENCE.md) - [Comparison Pages Guide](COMPARISON_PAGES_GUIDE.md)