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>
12 KiB
12 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous
| phase | plan | type | wave | depends_on | files_modified | autonomous | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| 07-hero-search-form | 01 | execute | 1 |
|
false |
Purpose
Użytkownik widzi formularz już na hero — nie musi szukać przycisku rezerwacji. Skraca ścieżkę konwersji i daje natychmiastowe CTA.
Output
- Nowy plik:
class-search-widget.php(widget Elementor) - Rozszerzony CSS: style mini formularza
- Rozszerzony JS: logika prefill + otwarcie modala z danymi z mini formularza
- Rejestracja widgetu w
carei-reservation.php
Source Files
@wp-content/plugins/carei-reservation/carei-reservation.php @wp-content/plugins/carei-reservation/includes/class-elementor-widget.php @wp-content/plugins/carei-reservation/assets/js/carei-reservation.js @wp-content/plugins/carei-reservation/assets/css/carei-reservation.css
<acceptance_criteria>
AC-1: Widget renderuje mini formularz
Given strona z osadzonym widgetem "Carei Search Form" w Elementorze
When strona się ładuje
Then widoczny jest kompaktowy formularz z polami: segment (select), daty od/do, miejsce odbioru (select), checkbox "Zwrot w tej samej lokalizacji", przycisk "Złóż zapytanie o rezerwację"
AC-2: Selecty ładują dane z API
Given mini formularz jest widoczny na stronie
When strona się załadowała
Then select segmentu zawiera segmenty z API (segments-branches-map)
And select lokalizacji filtruje się po wybranym segmencie
AC-3: Przycisk otwiera modal z pre-wypełnionymi danymi
Given użytkownik wypełnił mini formularz (segment, daty, lokalizacja)
When kliknie "Złóż zapytanie o rezerwację"
Then otwiera się istniejący modal rezerwacji
And pola segment, data od, data do, miejsce odbioru są automatycznie wypełnione wartościami z mini formularza
And checkbox zwrotu jest zsynchronizowany
And extras/pricelist ładują się automatycznie (jak po ręcznym wypełnieniu)
AC-4: Design zgodny z Figmą
Given mini formularz jest renderowany
When wyświetla się na desktop
Then tło #EDEDF3, zaokrąglone rogi 14px, border #2F2482/10%
And pola mają białe tło, zaokrąglone rogi
And przycisk jest czerwony (#FF0000) z białym tekstem, pełna szerokość
And font Albert Sans, tytuł bold fioletowy (#2F2482)
</acceptance_criteria>
Task 1: Widget Elementor + HTML mini formularza wp-content/plugins/carei-reservation/includes/class-search-widget.php, wp-content/plugins/carei-reservation/carei-reservation.php 1. Utworzyć `class-search-widget.php` z klasą `Carei_Search_Widget extends \Elementor\Widget_Base`: - name: `carei-search-form` - title: `Carei Search Form` - icon: `eicon-search` - categories: `['general']` - style/script depends: te same co główny widget (carei-reservation-css, carei-reservation-js) - Brak kontrolek Elementor (formularz jest statyczny)2. Metoda `render()` generuje HTML:
- Container `div.carei-search-form` z tłem
- Tytuł: `<h2 class="carei-search-form__title">Wypełnij formularz rezerwacji<span>.</span></h2>`
- Select segmentu: `<select id="carei-search-segment">` z placeholder "Wybierz segment" i ikoną strzałki
- Wiersz z dwoma polami daty: `<input type="datetime-local" id="carei-search-date-from">` i `id="carei-search-date-to"` z ikonkami kalendarza i labelami "Od kiedy?" / "Do kiedy?"
- Select lokalizacji: `<select id="carei-search-pickup">` z ikoną pinu i placeholder "Miejsce odbioru"
- Checkbox: `<input type="checkbox" id="carei-search-same-return" checked>` z label "Zwrot w tej samej lokalizacji"
- Przycisk: `<button type="button" class="carei-search-form__submit" id="carei-search-submit">` z tekstem "Złóż zapytanie o rezerwację"
3. Zarejestrować widget w `carei-reservation.php`:
- Dodać `require_once` w callbacku `elementor/widgets/register`
- `$widgets_manager->register( new Carei_Search_Widget() );`
Avoid: Duplikowanie modala — mini formularz NIE zawiera modala. Modal jest renderowany przez istniejący widget Carei Reservation, który musi być obecny na tej samej stronie.
2. Funkcja `initSearchForm()`:
- Pobrać referencje do elementów: `carei-search-segment`, `carei-search-date-from`, `carei-search-date-to`, `carei-search-pickup`, `carei-search-same-return`
- Załadować dane API (segments-branches-map) — REUŻYĆ istniejącą logikę `loadInitialData`, ale populować selecty mini formularza
- Podpiąć event na zmianę segmentu → filtrowanie lokalizacji (jak w głównym formularzu)
- Podpiąć event na `#carei-search-submit` click:
a) Zebrać wartości z mini formularza
b) Znaleźć overlay modala: `document.querySelector('[data-carei-modal]')`
c) Wywołać `openModal()` (istniejąca funkcja)
d) Po otwarciu modala (setTimeout ~100ms po openModal) ustawić wartości w głównym formularzu:
- `segmentSelect.value = searchSegment` + dispatch 'change' event
- `dateFrom.value = searchDateFrom` + dispatch 'change'
- `dateTo.value = searchDateTo` + dispatch 'change'
- `pickupSelect` — poczekać aż lokalizacje się załadują po change segmentu, potem ustawić wartość
- `sameReturnCheck.checked = searchSameReturn`
e) Triggerować `loadExtras()` jeśli wszystkie wymagane pola wypełnione
3. Problem z timingiem: po ustawieniu segmentu, lokalizacje ładują się asynchronicznie. Rozwiązanie:
- Dodać callback/promise lub event `carei:branches-loaded` który dispatch-uje się po załadowaniu lokalizacji
- W prefill poczekać na ten event, potem ustawić pickupSelect.value
4. Osobna inicjalizacja dat w mini formularzu — labelki "Od kiedy?"/"Do kiedy?" zachowują się jak placeholdery (widoczne gdy puste).
Avoid:
- Nie duplikować fetchowania API — jeśli dane już załadowane (dataLoaded=true), reużyć cache
- Nie łamać istniejącej logiki modala — openModal() musi działać normalnie gdy wywoływana z przycisku `data-carei-open-modal`
1. Container `.carei-search-form`:
- background: #EDEDF3
- border-radius: 14px
- border: 1px solid rgba(47, 36, 130, 0.1)
- padding: ~24px 28px
- max-width: 422px (z Figmy: width 422px)
- box-shadow: subtletny drop shadow
2. Tytuł `.carei-search-form__title`:
- font-family: 'Albert Sans', sans-serif
- font-weight: 700
- color: #2F2482
- text-align: center
- span (kropka): color: #FF0000
3. Pola formularza `.carei-search-form__field`:
- background: #fff
- border-radius: 8px
- border: 1px solid #E0E0E0
- padding: 12px 16px
- font-size: 14px
- Selecty: appearance: none + custom arrow icon
- Daty: dwa pola obok siebie (flex row, gap)
4. Checkbox `.carei-search-form__checkbox`:
- Styl jak w głównym formularzu (custom checkbox box z SVG checkmark)
- Kolor checked: #2F2482
5. Przycisk `.carei-search-form__submit`:
- background: #FF0000
- color: #fff
- border-radius: 8px
- width: 100%
- padding: 14px
- font-weight: 600
- ikona strzałki przed tekstem
- hover: lekkie przyciemnienie
6. Responsive:
- Na mobile (< 768px): max-width: 100%, padding zmniejszony
- Pola dat: mogą być w kolumnie na bardzo wąskich ekranach (< 400px)
Avoid: Nie modyfikować istniejących styli modala/formularza — dodać TYLKO nowe reguły z prefiksem `.carei-search-form`
DO NOT CHANGE
- includes/class-elementor-widget.php — HTML modala pozostaje bez zmian
- includes/class-softra-api.php — logika API bez zmian
- includes/class-rest-proxy.php — endpointy REST bez zmian
- includes/class-admin-panel.php — panel admina bez zmian
SCOPE LIMITS
- Mini formularz NIE ma własnego modala — korzysta z modala renderowanego przez istniejący widget
- Brak walidacji w mini formularzu — walidacja jest w głównym formularzu
- Brak pól danych osobowych w mini formularzu — tylko dane wynajmu
- Nie dodawać nowych zależności npm/composer
<success_criteria>
- Widget osadzony w Elementorze renderuje mini formularz
- Dane z mini formularza poprawnie przenoszone do modala
- Design zgodny z Figmą
- Istniejąca funkcjonalność modala nienaruszona </success_criteria>