Project-Pro/carei.pagedev.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(07-hero-search-form): Mini formularz rezerwacji w hero z pre-fill do modala

Browse Source 
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>
This commit is contained in:
Jacek Pyziak
2026-04-01 13:50:22 +02:00
parent 1dbb8ab5da
commit 92a58cb2e2
9 changed files with 945 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
wp-content/plugins/carei-reservation/assets/css/carei-reservation.css
View File

@@ -23,13 +23,14 @@
/* ═══════════════════════════════════════════
Trigger Button
═══════════════════════════════════════════ */
.carei-reservation-trigger {
.carei-reservation-trigger,
button.carei-reservation-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background-color: var(--carei-red);
color: var(--carei-white);
background-color: var(--carei-blue);
color: var(--carei-white) !important;
font-family: var(--carei-font);
font-weight: 600;
font-size: 14px;
@@ -40,9 +41,10 @@
text-decoration: none;
line-height: 1;
}
.carei-reservation-trigger:hover {
background-color: var(--carei-red-hover);
color: var(--carei-white);
.carei-reservation-trigger:hover,
button.carei-reservation-trigger:hover {
background-color: #1e1660;
color: var(--carei-white) !important;
}
.carei-reservation-trigger svg {
width: 16px;
@@ -76,13 +78,20 @@
max-width: 800px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
padding: 40px 48px;
overflow: hidden;
position: relative;
font-family: var(--carei-font);
transform: scale(0.95) translateY(10px);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.carei-modal__scroll {
overflow-y: auto;
overflow-x: hidden;
padding: 40px 48px;
flex: 1;
min-height: 0;
}
.carei-modal-overlay.is-open .carei-modal {
transform: scale(1) translateY(0);
@@ -115,13 +124,17 @@
}
/* Scrollbar styling */
.carei-modal::-webkit-scrollbar {
.carei-modal__scroll {
scrollbar-width: thin;
scrollbar-color: var(--carei-border) transparent;
}
.carei-modal__scroll::-webkit-scrollbar {
width: 6px;
}
.carei-modal::-webkit-scrollbar-track {
.carei-modal__scroll::-webkit-scrollbar-track {
background: transparent;
}
.carei-modal::-webkit-scrollbar-thumb {
.carei-modal__scroll::-webkit-scrollbar-thumb {
background: var(--carei-border);
border-radius: 3px;
}
@@ -575,11 +588,14 @@
.carei-form__extra-price {
font-weight: 400;
font-size: 14px;
color: var(--carei-gray);
color: #505050;
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
.carei-form__extra-price strong {
color: inherit;
}
.carei-form__checkbox-label--abroad {
align-items: center;
@@ -763,7 +779,7 @@
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
padding: 16px 48px;
background-color: var(--carei-red);
color: var(--carei-white);
font-family: var(--carei-font);
@@ -894,10 +910,11 @@
max-width: 100%;
max-height: 100vh;
height: 100%;
border-radius: var(--carei-radius-lg) var(--carei-radius-lg) 0 0;
padding: 32px 24px;
border-radius: 0;
}
.carei-modal__scroll {
padding: 32px 24px;
}
.carei-form__row {
grid-template-columns: 1fr;
}
@@ -930,7 +947,7 @@
.carei-form__row--top {
grid-template-columns: 1fr;
}
.carei-modal {
.carei-modal__scroll {
padding: 24px 16px;
}
}
@@ -1156,3 +1173,233 @@
.carei-success__close:hover {
background: var(--carei-red-hover);
}
/* ═══════════════════════════════════════════
Search Form (Hero Mini Form)
═══════════════════════════════════════════ */
.carei-search-form {
background: var(--carei-bg);
border-radius: 14px;
border: 1px solid rgba(47, 36, 130, 0.1);
padding: 28px 24px 24px;
max-width: 422px;
font-family: var(--carei-font);
box-shadow: 0 4px 24px rgba(47, 36, 130, 0.08);
}
.carei-search-form__title {
font-family: var(--carei-font);
font-weight: 700;
font-size: 18px;
color: var(--carei-blue);
text-align: center;
margin: 0 0 20px;
line-height: 1.3;
}
.carei-search-form__title span {
color: var(--carei-red);
}
.carei-search-form__fields {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.carei-search-form__row {
display: flex;
gap: 10px;
}
.carei-search-form__row > .carei-search-form__field {
flex: 1;
min-width: 0;
}
.carei-search-form__field--full {
width: 100%;
}
/* Select wrap */
.carei-search-form__select-wrap {
position: relative;
display: flex;
align-items: center;
background: var(--carei-white);
border-radius: var(--carei-radius);
border: 1px solid #E0E0E0;
height: var(--carei-input-h);
transition: border-color 0.2s;
}
.carei-search-form__select-wrap:focus-within {
border-color: var(--carei-blue);
}
.carei-search-form__select-wrap select {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
font-family: var(--carei-font);
font-size: 14px;
color: var(--carei-gray);
padding: 0 32px 0 16px;
width: 100%;
height: 100%;
cursor: pointer;
outline: none;
}
.carei-search-form__select-wrap--icon select {
padding-left: 38px;
}
.carei-search-form__select-arrow {
position: absolute;
right: 12px;
pointer-events: none;
color: var(--carei-blue);
}
.carei-search-form__pin-icon {
position: absolute;
left: 14px;
pointer-events: none;
color: var(--carei-gray);
}
/* Date wrap */
.carei-search-form__date-wrap {
position: relative;
display: flex;
align-items: center;
background: var(--carei-white);
border-radius: var(--carei-radius);
border: 1px solid #E0E0E0;
height: var(--carei-input-h);
transition: border-color 0.2s;
}
.carei-search-form__date-wrap:focus-within {
border-color: var(--carei-blue);
}
.carei-search-form__date-icon {
position: absolute;
left: 14px;
pointer-events: none;
color: var(--carei-gray);
}
.carei-search-form__date-label {
position: absolute;
left: 38px;
font-family: var(--carei-font);
font-size: 14px;
color: var(--carei-placeholder);
pointer-events: none;
transition: opacity 0.2s;
}
.carei-search-form__date-wrap.has-value .carei-search-form__date-label {
opacity: 0;
}
.carei-search-form__input--date {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
font-family: var(--carei-font);
font-size: 14px;
color: var(--carei-gray);
padding: 0 12px 0 38px;
width: 100%;
height: 100%;
outline: none;
}
.carei-search-form__date-wrap:not(.has-value) .carei-search-form__input--date {
color: transparent;
}
.carei-search-form__date-wrap:not(.has-value) .carei-search-form__input--date::-webkit-datetime-edit {
color: transparent;
-webkit-user-select: none;
user-select: none;
}
.carei-search-form__input--date::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* Checkbox */
.carei-search-form__checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: var(--carei-font);
font-size: 14px;
color: var(--carei-gray);
padding: 4px 0;
}
.carei-search-form__checkbox-label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.carei-search-form__checkbox-box {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
border: 2px solid #D0D0D0;
background: var(--carei-white);
flex-shrink: 0;
transition: background-color 0.2s, border-color 0.2s;
}
.carei-search-form__checkbox-box svg {
display: none;
}
.carei-search-form__checkbox-label input[type="checkbox"]:checked + .carei-search-form__checkbox-box {
background: var(--carei-blue);
border-color: var(--carei-blue);
}
.carei-search-form__checkbox-label input[type="checkbox"]:checked + .carei-search-form__checkbox-box svg {
display: block;
}
/* Submit button */
.carei-search-form__submit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 20px;
background: var(--carei-red);
color: var(--carei-white);
font-family: var(--carei-font);
font-weight: 600;
font-size: 15px;
border: none;
border-radius: var(--carei-radius);
cursor: pointer;
transition: background-color 0.2s;
line-height: 1;
}
.carei-search-form__submit:hover {
background: var(--carei-red-hover);
}
.carei-search-form__submit svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Responsive */
@media (max-width: 767px) {
.carei-search-form {
max-width: 100%;
padding: 20px 16px 16px;
}
}
@media (max-width: 400px) {
.carei-search-form__row {
flex-direction: column;
}
}

165
wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
View File

@@ -388,11 +388,11 @@
card.className = 'carei-form__extra-card';
card.innerHTML =
'<label class="carei-form__checkbox-label carei-form__checkbox-label--card">' +
'<input type="checkbox" name="extras[]" value="' + escAttr(item.id || item.code) + '" data-price="' + price + '" data-name="' + escAttr(item.name) + '" data-unit="' + escAttr(item.unit || 'szt.') + '">' +
'<input type="checkbox" name="extras[]" value="' + escAttr(item.id || item.code) + '" data-price="' + price + '" data-name="' + escAttr(toSentenceCase(item.name)) + '" data-unit="' + escAttr(item.unit || 'szt.') + '">' +
'<span class="carei-form__checkbox-box"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>' +
'<span class="carei-form__extra-content"><strong>' + escHtml(item.name) + '</strong>' +
(item.description ? '<span class="carei-form__extra-desc">' + escHtml(item.description) + '</span>' : '') +
'<span class="carei-form__extra-price">' + escHtml(priceLabel) + '</span></span></label>';
'<span class="carei-form__extra-content"><strong>' + escHtml(toSentenceCase(item.name)) + '</strong>' +
(item.description ? '<span class="carei-form__extra-desc">' + escHtml(toSentenceCase(item.description)) + '</span>' : '') +
'<span class="carei-form__extra-price"><strong>' + escHtml(priceLabel) + '</strong></span></span></label>';
return card;
}
@@ -881,7 +881,11 @@
if (selectedExtras.length > 0) {
html += '<div style="margin-top:8px"><strong>Wybrane opcje:</strong></div><ul style="margin:4px 0 0 16px;padding:0;list-style:disc;">';
selectedExtras.forEach(function (ex) {
html += '<li>' + escHtml(ex.name) + ' — ' + fmtPrice(ex.priceAfterDiscount) + ' zł</li>';
var totalPrice = ex.priceAfterDiscount * (ex.amount || 1);
var priceInfo = ex.unit === 'doba' && ex.amount > 1
? fmtPrice(ex.priceAfterDiscount) + ' zł/doba × ' + ex.amount + ' = ' + fmtPrice(totalPrice) + ' zł'
: fmtPrice(totalPrice) + ' zł';
html += '<li>' + escHtml(toSentenceCase(ex.name)) + ' — ' + priceInfo + '</li>';
});
html += '</ul>';
}
@@ -899,7 +903,7 @@
summary.pricelist.forEach(function (item) {
var rowClass = item.addedBySystem ? ' class="carei-summary__auto-item"' : '';
html += '<tr' + rowClass + '>' +
'<td>' + escHtml(item.name) + (item.addedBySystem ? ' <small>(auto)</small>' : '') + '</td>' +
'<td>' + escHtml(toSentenceCase(item.name)) + (item.addedBySystem ? ' <small>(auto)</small>' : '') + '</td>' +
'<td>' + (item.amount || 1) + ' ' + escHtml(item.unit || '') + '</td>' +
'<td>' + fmtPrice(item.netValue) + '</td>' +
'<td>' + fmtPrice(item.grossValue) + '</td></tr>';
@@ -1078,11 +1082,160 @@
function escHtml(str) { var d = document.createElement('div'); d.textContent = str || ''; return d.innerHTML; }
function escAttr(str) { return (str || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
function toSentenceCase(str) { if (!str) return ''; var s = str.toLowerCase(); return s.charAt(0).toUpperCase() + s.slice(1); }
// ─── Search Form (Hero Mini Form) ──────────────────────────────
function initSearchForm() {
var searchForm = document.querySelector('.carei-search-form');
if (!searchForm) return;
var searchSegment = document.getElementById('carei-search-segment');
var searchDateFrom = document.getElementById('carei-search-date-from');
var searchDateTo = document.getElementById('carei-search-date-to');
var searchPickup = document.getElementById('carei-search-pickup');
var searchSameReturn = document.getElementById('carei-search-same-return');
var searchSubmit = document.getElementById('carei-search-submit');
var searchMapData = null;
// Ładowanie danych do mini formularza
function loadSearchData() {
Promise.all([
apiGet('car-classes-all'),
apiGet('segments-branches-map')
]).then(function (results) {
var classes = results[0];
searchMapData = results[1];
if (Array.isArray(classes) && classes.length > 0) {
var segments = classes.map(function (c) {
var val = typeof c === 'string' ? c : (c.name || c);
var label = typeof c === 'string' ? ('Segment ' + c) : (c.description || c.name || c);
return { value: val, label: label };
});
populateSelect(searchSegment, segments, 'Wybierz segment');
}
if (searchPickup) {
populateSelect(searchPickup, [], 'Najpierw wybierz segment');
searchPickup.disabled = true;
}
}).catch(function (err) {
console.error('Search form: failed to load data:', err);
});
}
// Zmiana segmentu → filtr lokalizacji
if (searchSegment) {
searchSegment.addEventListener('change', function () {
var sel = searchSegment.value;
if (!sel || !searchMapData || !searchPickup) return;
var segBranches = searchMapData.segmentToBranches[sel] || [];
var allBranches = searchMapData.branches || [];
var opts = [];
allBranches.forEach(function (b) {
if (segBranches.indexOf(b.name || '') !== -1) {
var label = b.description || b.name;
if (b.city) label += ' — ' + b.city;
opts.push({ value: b.name, label: label });
}
});
if (opts.length > 0) {
populateSelect(searchPickup, opts, 'Miejsce odbioru');
searchPickup.disabled = false;
} else {
populateSelect(searchPickup, [], 'Brak lokalizacji');
searchPickup.disabled = true;
}
});
}
// Date label behavior
[searchDateFrom, searchDateTo].forEach(function (input) {
if (!input) return;
var wrap = input.closest('.carei-search-form__date-wrap');
function updateLabel() {
if (wrap) wrap.classList.toggle('has-value', !!input.value);
}
updateLabel();
input.addEventListener('change', updateLabel);
input.addEventListener('input', updateLabel);
});
// Submit → otwórz modal z pre-fill
if (searchSubmit) {
searchSubmit.addEventListener('click', function () {
if (!overlay) return;
var valSegment = searchSegment ? searchSegment.value : '';
var valDateFrom = searchDateFrom ? searchDateFrom.value : '';
var valDateTo = searchDateTo ? searchDateTo.value : '';
var valPickup = searchPickup ? searchPickup.value : '';
var valSameReturn = searchSameReturn ? searchSameReturn.checked : true;
// Otwórz modal
openModal(searchSubmit);
// Pre-fill po załadowaniu danych modala
function prefillModal() {
// Segment
if (segmentSelect && valSegment) {
segmentSelect.value = valSegment;
segmentSelect.dispatchEvent(new Event('change'));
}
// Daty
if (dateFrom && valDateFrom) {
dateFrom.value = valDateFrom;
dateFrom.dispatchEvent(new Event('change'));
}
if (dateTo && valDateTo) {
dateTo.value = valDateTo;
dateTo.dispatchEvent(new Event('change'));
}
// Checkbox zwrotu
if (sameReturnCheck) {
sameReturnCheck.checked = valSameReturn;
sameReturnCheck.dispatchEvent(new Event('change'));
}
// Pickup — poczekaj aż lokalizacje się załadują po change segmentu
if (valPickup && pickupSelect) {
var attempts = 0;
var pickupInterval = setInterval(function () {
attempts++;
// Sprawdź czy opcja jest dostępna
var optExists = Array.prototype.slice.call(pickupSelect.options).some(function (o) {
return o.value === valPickup;
});
if (optExists) {
clearInterval(pickupInterval);
pickupSelect.value = valPickup;
pickupSelect.dispatchEvent(new Event('change'));
} else if (attempts > 30) {
clearInterval(pickupInterval);
}
}, 100);
}
}
// Daj czas na loadInitialData w openModal
setTimeout(prefillModal, 400);
});
}
loadSearchData();
}
// ─── Init ─────────────────────────────────────────────────────
function init() {
initRefs();
// Inicjalizuj search form niezależnie od modala
initSearchForm();
if (!overlay || !form) return;
initModal();

3
wp-content/plugins/carei-reservation/carei-reservation.php
View File

@@ -85,6 +85,9 @@ add_action( 'plugins_loaded', function () {
add_action( 'elementor/widgets/register', function ( $widgets_manager ) {
require_once CAREI_RESERVATION_PATH . 'includes/class-elementor-widget.php';
$widgets_manager->register( new Carei_Reservation_Widget() );
require_once CAREI_RESERVATION_PATH . 'includes/class-search-widget.php';
$widgets_manager->register( new Carei_Search_Widget() );
} );
/**

102
wp-content/plugins/carei-reservation/includes/class-search-widget.php Normal file
View File

@@ -0,0 +1,102 @@
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Elementor Widget: Carei Search Form — kompaktowy mini formularz do hero.
*/
class Carei_Search_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'carei-search-form';
}
public function get_title() {
return 'Carei Search Form';
}
public function get_icon() {
return 'eicon-search';
}
public function get_categories() {
return array( 'general' );
}
public function get_style_depends() {
return array( 'carei-reservation-css' );
}
public function get_script_depends() {
return array( 'carei-reservation-js' );
}
protected function register_controls() {}
protected function render() {
?>
<div class="carei-search-form">
<h2 class="carei-search-form__title">Wypełnij formularz rezerwacji<span>.</span></h2>
<div class="carei-search-form__fields">
<!-- Segment -->
<div class="carei-search-form__field carei-search-form__field--full">
<div class="carei-search-form__select-wrap">
<select id="carei-search-segment">
<option value="" disabled selected>Wybierz segment</option>
</select>
<svg class="carei-search-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
</div>
</div>
<!-- Daty -->
<div class="carei-search-form__row">
<div class="carei-search-form__field">
<div class="carei-search-form__date-wrap">
<svg class="carei-search-form__date-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3" width="11" height="10" rx="0.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 1.5v2M5 1.5v2M2.5 5.5h11" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
<label class="carei-search-form__date-label" for="carei-search-date-from">Od kiedy?</label>
<input type="datetime-local" id="carei-search-date-from" class="carei-search-form__input carei-search-form__input--date">
</div>
</div>
<div class="carei-search-form__field">
<div class="carei-search-form__date-wrap">
<svg class="carei-search-form__date-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3" width="11" height="10" rx="0.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 1.5v2M5 1.5v2M2.5 5.5h11" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
<label class="carei-search-form__date-label" for="carei-search-date-to">Do kiedy?</label>
<input type="datetime-local" id="carei-search-date-to" class="carei-search-form__input carei-search-form__input--date">
</div>
</div>
</div>
<!-- Miejsce odbioru -->
<div class="carei-search-form__field carei-search-form__field--full">
<div class="carei-search-form__select-wrap carei-search-form__select-wrap--icon">
<svg class="carei-search-form__pin-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
<select id="carei-search-pickup">
<option value="" disabled selected>Miejsce odbioru</option>
</select>
<svg class="carei-search-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
</div>
</div>
<!-- Checkbox zwrot -->
<div class="carei-search-form__field carei-search-form__field--full">
<label class="carei-search-form__checkbox-label">
<input type="checkbox" id="carei-search-same-return" checked>
<span class="carei-search-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-search-form__checkbox-text">Zwrot w tej samej lokalizacji</span>
</label>
</div>
</div>
<!-- Przycisk -->
<button type="button" class="carei-search-form__submit" id="carei-search-submit">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
Złóż zapytanie o rezerwację
</button>
</div>
<?php
}
}