Jacek Pyziak
92a58cb2e2
Phase 7 complete: - Nowy widget Elementor "Carei Search Form" do osadzenia w hero - Pola: segment, daty od/do, lokalizacja, checkbox zwrotu - Po kliknięciu przycisku otwiera modal z pre-wypełnionymi danymi - Design zgodny z Figmą (tło #EDEDF3, przycisk czerwony, tytuł fioletowy) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
123 lines
4.4 KiB
Markdown
123 lines
4.4 KiB
Markdown
---
|
|
phase: 07-hero-search-form
|
|
plan: 01
|
|
subsystem: ui
|
|
tags: [elementor, widget, vanilla-js, css]
|
|
|
|
requires:
|
|
- phase: 01-reservation-form-plugin
|
|
provides: plugin bootstrap, API proxy, Elementor widget infrastructure
|
|
- phase: 02-form-ui-step1
|
|
provides: modal form UI, segments/branches data loading
|
|
provides:
|
|
- Carei Search Form Elementor widget (mini formularz hero)
|
|
- Pre-fill modal z danymi z mini formularza
|
|
affects: []
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns: [search-form-prefill-via-setTimeout-polling]
|
|
|
|
key-files:
|
|
created:
|
|
- wp-content/plugins/carei-reservation/includes/class-search-widget.php
|
|
modified:
|
|
- wp-content/plugins/carei-reservation/carei-reservation.php
|
|
- wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
|
|
- wp-content/plugins/carei-reservation/assets/css/carei-reservation.css
|
|
|
|
key-decisions:
|
|
- "Calendar picker: opacity:0 stretched over input instead of display:none — preserves native click-to-open"
|
|
- "Search form loads API data independently — not dependent on modal being present"
|
|
|
|
patterns-established:
|
|
- "Mini form prefill: collect values → openModal() → setTimeout prefill → poll for async-loaded options"
|
|
|
|
duration: ~30min
|
|
started: 2026-04-01T13:00:00Z
|
|
completed: 2026-04-01T13:45:00Z
|
|
---
|
|
|
|
# Phase 7 Plan 01: Hero Search Form Summary
|
|
|
|
**Kompaktowy widget Elementor "Carei Search Form" w hero z pre-fill do istniejącego modala rezerwacji**
|
|
|
|
## Performance
|
|
|
|
| Metric | Value |
|
|
|--------|-------|
|
|
| Duration | ~30min |
|
|
| Tasks | 4 completed (3 auto + 1 checkpoint) |
|
|
| Files modified | 4 (1 created, 3 modified) |
|
|
|
|
## Acceptance Criteria Results
|
|
|
|
| Criterion | Status | Notes |
|
|
|-----------|--------|-------|
|
|
| AC-1: Widget renderuje mini formularz | Pass | Segment, daty, lokalizacja, checkbox, przycisk |
|
|
| AC-2: Selecty ładują dane z API | Pass | Segmenty i lokalizacje filtrowane po segmencie |
|
|
| AC-3: Przycisk otwiera modal z pre-fill | Pass | Segment, daty, lokalizacja przenoszone do modala |
|
|
| AC-4: Design zgodny z Figmą | Pass | Tło #EDEDF3, pola białe, przycisk czerwony, tytuł fioletowy |
|
|
|
|
## Accomplishments
|
|
|
|
- Nowy widget Elementor "Carei Search Form" do osadzenia w hero
|
|
- Pola mini formularza automatycznie przenoszone do modala rezerwacji po kliknięciu przycisku
|
|
- Niezależne ładowanie danych API (nie wymaga wcześniejszego otwarcia modala)
|
|
|
|
## Files Created/Modified
|
|
|
|
| File | Change | Purpose |
|
|
|------|--------|---------|
|
|
| `includes/class-search-widget.php` | Created | Widget Elementor z HTML mini formularza |
|
|
| `carei-reservation.php` | Modified | Rejestracja nowego widgetu |
|
|
| `assets/js/carei-reservation.js` | Modified | initSearchForm() — ładowanie danych, prefill, otwarcie modala |
|
|
| `assets/css/carei-reservation.css` | Modified | Style .carei-search-form (tło, pola, przycisk, responsive) |
|
|
|
|
## Decisions Made
|
|
|
|
| Decision | Rationale | Impact |
|
|
|----------|-----------|--------|
|
|
| Osobne ładowanie API w search form | Niezależność od modala — dane dostępne od razu po załadowaniu strony | Dwa requesty API przy page load (zamiast lazy) |
|
|
| Polling na pickup options po prefill | Lokalizacje ładują się async po zmianie segmentu — nie ma eventa | setInterval z max 30 prób (3s timeout) |
|
|
|
|
## Deviations from Plan
|
|
|
|
### Summary
|
|
|
|
| Type | Count | Impact |
|
|
|------|-------|--------|
|
|
| Auto-fixed | 1 | Niezbędny fix CSS |
|
|
|
|
**Total impact:** Fix CSS kalendarza — konieczny dla UX
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. CSS calendar picker indicator**
|
|
- **Found during:** Checkpoint (human-verify)
|
|
- **Issue:** `display:none` na ikonkach kalendarza blokowało otwarcie date picker
|
|
- **Fix:** Zmiana na `opacity:0` + stretch na cały input (wzorzec z głównego formularza)
|
|
- **Files:** carei-reservation.css
|
|
- **Verification:** Kliknięcie w pole daty otwiera picker
|
|
|
|
**2. CSS datetime placeholder selectable**
|
|
- **Found during:** Checkpoint (human-verify)
|
|
- **Issue:** Placeholder "--" w pustych polach dat był zaznaczalny
|
|
- **Fix:** Dodanie `user-select:none` + `color:transparent` na `::-webkit-datetime-edit`
|
|
- **Verification:** Placeholder niewidoczny i niezaznaczalny
|
|
|
|
## Next Phase Readiness
|
|
|
|
**Ready:**
|
|
- Mini formularz działa i jest osadzony w hero
|
|
- Modal rezerwacji przyjmuje pre-fill z zewnętrznego źródła
|
|
|
|
**Concerns:**
|
|
- Dwa niezależne requesty API (search form + modal) — mogą powodować podwójne obciążenie przy jednoczesnym ładowaniu
|
|
|
|
**Blockers:** None
|
|
|
|
---
|
|
*Phase: 07-hero-search-form, Plan: 01*
|
|
*Completed: 2026-04-01*
|