Add winter season promotional section and update project inquiry form
- Introduced a winter header and benefits section on page-2101.php to promote early bookings for spring-summer 2026. - Enhanced the project inquiry form with additional fields and updated budget ranges for better user experience. - Improved styling and layout for collaboration steps on page-2598.php, including hover effects and responsive design adjustments. - Updated text content for clarity and consistency across both pages.
This commit is contained in:
@@ -27,6 +27,63 @@
|
||||
<?php if (have_posts()) : ?>
|
||||
<div id="app">
|
||||
<div class="page-data post">
|
||||
|
||||
<!-- Zimowy nagłówek i sekcje -->
|
||||
<div v-if="isWinterSeason" class="winter-header" style="text-align: center; margin-bottom: 40px; padding: 30px; background: linear-gradient(135deg, #88b14b 0%, #6a8f3a 100%); border-radius: 12px; color: white;">
|
||||
<h2 style="font-size: 28px; font-weight: 700; margin-bottom: 10px; color: white;">Przyjmujemy zamówienia na realizacje wiosna-lato 2026</h2>
|
||||
<p style="font-size: 18px; margin: 0; color: rgba(255,255,255,0.95);">Zarezerwuj termin i cenę już teraz.</p>
|
||||
</div>
|
||||
|
||||
<div v-if="isWinterSeason" class="winter-benefits" style="background-color: #f8f9fa; padding: 40px 30px; border-radius: 12px; margin-bottom: 40px; border: 2px solid #88b14b;">
|
||||
<h3 style="font-size: 24px; font-weight: 700; margin-bottom: 25px; color: #333; text-align: center;">Dlaczego warto zamówić zimą?</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px;">
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px;">
|
||||
<span style="color: #88b14b; font-size: 24px; flex-shrink: 0;">✓</span>
|
||||
<span style="font-size: 16px; color: #333;">Gwarancja ceny przed sezonem</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px;">
|
||||
<span style="color: #88b14b; font-size: 24px; flex-shrink: 0;">✓</span>
|
||||
<span style="font-size: 16px; color: #333;">Priorytetowy termin montażu</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px;">
|
||||
<span style="color: #88b14b; font-size: 24px; flex-shrink: 0;">✓</span>
|
||||
<span style="font-size: 16px; color: #333;">Spokojne przygotowanie projektu</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px;">
|
||||
<span style="color: #88b14b; font-size: 24px; flex-shrink: 0;">✓</span>
|
||||
<span style="font-size: 16px; color: #333;">Brak kolejek produkcyjnych</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background-color: white; padding: 25px; border-radius: 8px; margin-bottom: 25px; border-left: 4px solid #88b14b;">
|
||||
<p style="font-size: 16px; margin: 0; color: #666;">Podpisz umowę zimą – zarezerwuj termin realizacji na wiosnę.</p>
|
||||
</div>
|
||||
|
||||
<div style="background: linear-gradient(135deg, #88b14b 0%, #6a8f3a 100%); padding: 25px; border-radius: 8px; color: white;">
|
||||
<h4 style="font-size: 18px; font-weight: 600; margin-bottom: 15px; color: white;">ZIMOWY BONUS</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li style="margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px;">
|
||||
<span style="font-size: 20px; flex-shrink: 0;">🎁</span>
|
||||
<span style="font-size: 15px;">Darmowy upgrade szyby z ochroną przeciwsłoneczną gratis.</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px;">
|
||||
<span style="font-size: 20px; flex-shrink: 0;">🎁</span>
|
||||
<span style="font-size: 15px;">Darmowa konsultacja projektowa</span>
|
||||
</li>
|
||||
<li style="display: flex; align-items: flex-start; gap: 10px;">
|
||||
<span style="font-size: 20px; flex-shrink: 0;">🎁</span>
|
||||
<span style="font-size: 15px;">Priorytetowy termin montażu</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 25px; padding: 20px; background-color: #fff3cd; border-radius: 8px; border: 2px dashed #88b14b;">
|
||||
<p style="font-size: 18px; font-weight: 600; margin: 0; color: #333;">
|
||||
⏰ Dostępne terminy realizacji na sezon 2026: <span style="color: #88b14b; font-size: 24px;">{{ availableSlots }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="calc-container">
|
||||
<div class="calc-bar-fix">
|
||||
<div id="calc-bar" ref="calcBar">
|
||||
@@ -150,6 +207,15 @@
|
||||
<div class="calc-box--title">
|
||||
<h2>Krok 3</h2>
|
||||
</div>
|
||||
|
||||
<div v-if="selected_option_1 === 0" style="margin-top: 20px; margin-bottom: 30px;">
|
||||
<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px; color: #333;">Orientacyjny budżet realizacji</h3>
|
||||
<p style="font-size: 14px; line-height: 1.6; color: #666; margin-bottom: 20px;">
|
||||
Na podstawie wybranego typu konstrukcji i podanych wymiarów możemy pokazać orientacyjny budżet realizacji.<br><br>
|
||||
Każdy ogród zimowy projektujemy indywidualnie, dlatego podane kwoty mają charakter przykładowy i służą jedynie do wstępnej oceny, czy inwestycja mieści się w zakładanym budżecie.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="calc-radio" v-if="isLoaded && this.selected_option_1 !== 2">
|
||||
<li
|
||||
v-for="(step, index) in acfData_step_3"
|
||||
@@ -187,53 +253,66 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs_examples" v-if="selected_option_1 === 0" style="margin-top: 50px;">
|
||||
<h3>Przykłady cen ogrodu zimowego 4x5m</h3>
|
||||
<div class="tabs_examples-nav">
|
||||
<button :class="{ active: activeExampleTab === 'standard' }" @click="activeExampleTab = 'standard'">Standard</button>
|
||||
<button :class="{ active: activeExampleTab === 'comfort' }" @click="activeExampleTab = 'comfort'">Comfort</button>
|
||||
<button :class="{ active: activeExampleTab === 'premium' }" @click="activeExampleTab = 'premium'">Premium</button>
|
||||
<div class="price_examples" v-if="selected_option_1 === 0" style="margin-top: 20px;">
|
||||
<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #333;">PRZYKŁADY CEN</h3>
|
||||
|
||||
<div class="price_example-item" style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #88b14b;">
|
||||
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333;">Przykład 1 Ogród zimowy 4 x 5 m (ok. 20 m2)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: #666;">
|
||||
<li style="margin-bottom: 5px;">- dach jednospadowy</li>
|
||||
<li style="margin-bottom: 5px;">- szyby zespolone jednokomorowe Ug=1,1</li>
|
||||
<li style="margin-bottom: 5px;">- markiza dachowa zewnętrzna w cenie.</li>
|
||||
</ul>
|
||||
<p style="font-size: 15px; font-weight: 600; color: #88b14b; margin-top: 15px;">Orientacyjny budżet realizacji 120 000 – 150 000 zł netto</p>
|
||||
</div>
|
||||
<div class="tabs_examples-content">
|
||||
<!-- Standard -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'standard'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-1.png" alt="Ogród zimowy Standard 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Classic 1 Standard.<br>Cena brutto 114.390,00 zł (z VAT 8%)</h4>
|
||||
<p>- Szyby izolacyjne Ug=1,1 na dachu i ścianach.<br>
|
||||
- 1 szt. drzwi tarasowe uchylno-przesuwnymi PSK na frontowej ścianie.<br>
|
||||
- Bez osłon przeciwsłonecznych. (w zacienione miejsca)</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comfort -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'comfort'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-2.png" alt="Ogród zimowy Comfort 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Classic 2 Comfort.<br>Cena brutto 142.819,00 zł (z VAT 8%)</h4>
|
||||
<p>- Szyby izolacyjne Ug=1,1 na dachu i ścianach.<br>
|
||||
- 2 szt. drzwi tarasowych uchylno-przesuwnymi PSK na ścianie frontowej i ścianie bocznej.<br>
|
||||
- Komplet osłon przeciwsłonecznych na dachu. 2 osłony Veranda ster. Elektr + pilot.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'premium'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-3.png" alt="Ogród zimowy Premium 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Classic 3 Premium.<br>Cena brutto 203.550,00 zł (z VAT 8%)</h4>
|
||||
<p>- Szyby Energooszczędne Ug=0,5 na dachu i ścianach.<br>
|
||||
- 1 szt. drzwi tarasowych uchylno-przesuwnymi PSK na frontowej ścianie + 1 szt. drzwi unoszono przesuwne HS na bocznej ścianie.<br>
|
||||
- Komplet osłon przeciwsłonecznych na dachu. 2 osłony Veranda ster. Elektr. + pilot + czujnik słoneczno-wiatrowy.<br>
|
||||
- Osłony przeciwsłoneczne ścian żaluzje C80 sterowane ele. + pilot.<br>
|
||||
- Okno HS w dachu przesuwane, sterowane ele.<br>
|
||||
- oświetlenie punktowe LED z pilotem.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price_example-item" style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #88b14b;">
|
||||
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333;">Przykład 2 Ogród zimowy 3 x 4 m (ok. 12 m2)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: #666;">
|
||||
<li style="margin-bottom: 5px;">- dach jednospadowy</li>
|
||||
<li style="margin-bottom: 5px;">- szyby zespolone jednokomorowe Ug=1,1</li>
|
||||
<li style="margin-bottom: 5px;">- markiza zewnętrzna.</li>
|
||||
</ul>
|
||||
<p style="font-size: 15px; font-weight: 600; color: #88b14b; margin-top: 15px;">Orientacyjny budżet realizacji 80 000 – 100 000 zł netto</p>
|
||||
</div>
|
||||
|
||||
<div class="price_example-item" style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #88b14b;">
|
||||
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333;">Przykład 3 Ogród zimowy 5 x 6 m (ok. 30 m2)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: #666;">
|
||||
<li style="margin-bottom: 5px;">- Dach jednospadowy lub wielospadowy.</li>
|
||||
<li style="margin-bottom: 5px;">- większe przeszklenia szyby Ug=1,1</li>
|
||||
<li style="margin-bottom: 5px;">- markiza zewnętrzna.</li>
|
||||
</ul>
|
||||
<p style="font-size: 15px; font-weight: 600; color: #88b14b; margin-top: 15px;">Orientacyjny budżet realizacji 170 000 – 210 000 zł netto</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 30px; padding: 20px; background-color: #fff; border-radius: 8px;">
|
||||
<p style="font-size: 15px; line-height: 1.6; color: #333; margin-bottom: 20px; font-weight: 500;">
|
||||
Większość naszych realizacji mieści się w powyższych zakresach po dopasowaniu projektu do potrzeb i budżetu klienta.
|
||||
</p>
|
||||
|
||||
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 15px; color: #333;">Ostateczna cena zależy m.in. od:</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0 0 25px 0; font-size: 14px; color: #666;">
|
||||
<li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
|
||||
<span style="position: absolute; left: 0; color: #88b14b;">•</span> bryły i rodzaju dachu
|
||||
</li>
|
||||
<li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
|
||||
<span style="position: absolute; left: 0; color: #88b14b;">•</span> ilości i rodzaju przeszkleń
|
||||
</li>
|
||||
<li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
|
||||
<span style="position: absolute; left: 0; color: #88b14b;">•</span> systemów otwierania
|
||||
</li>
|
||||
<li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
|
||||
<span style="position: absolute; left: 0; color: #88b14b;">•</span> dodatkowego wyposażenia
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="https://ostal.pl/kontakt/"
|
||||
style="display: inline-block; background-color: #88b14b; color: white; padding: 15px 30px; border-radius: 6px; text-decoration: none; font-size: 16px; font-weight: 600; text-align: center; transition: background-color 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
|
||||
onmouseover="this.style.backgroundColor='#6a8f3a'"
|
||||
onmouseout="this.style.backgroundColor='#88b14b'">
|
||||
Porozmawiajmy o Twoim projekcie
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -282,25 +361,36 @@
|
||||
<div class="calc-box--title">
|
||||
<h2>Krok 4</h2>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px; margin-bottom: 30px;">
|
||||
<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px; color: #333;">Wyślij zapytanie o swój projekt</h3>
|
||||
<p style="font-size: 14px; line-height: 1.6; color: #666; margin-bottom: 10px;">
|
||||
Na podstawie podanych informacji przygotujemy wstępne dopasowanie projektu oraz orientacyjny budżet realizacji.
|
||||
</p>
|
||||
<p style="font-size: 14px; line-height: 1.6; color: #666;">
|
||||
Realizacje całorocznych ogrodów zimowych rozpoczynają się od około 100 000 zł netto.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="calc-texts" v-if="isLoaded">
|
||||
<li>
|
||||
<p>{{acfData.acf.step_4.miejsce_montazu}}</p>
|
||||
<input v-model="configData.step_4.miejsce_montazu" type="text" name="miejsce_montazu" id="calc_miejsce_montazu" class="input" require>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{acfData.acf.step_4.name}}</p>
|
||||
<p>Imię i nazwisko</p>
|
||||
<input v-model="configData.step_4.name" type="text" name="name" id="calc_name" class="input" require>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{acfData.acf.step_4.email}}</p>
|
||||
<p>Email</p>
|
||||
<input v-model="configData.step_4.email" type="email" name="email" id="calc_email" class="input" require>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{acfData.acf.step_4.phone}}</p>
|
||||
<p>Telefon</p>
|
||||
<input v-model="configData.step_4.phone" type="tel" name="phone" id="calc_phone" class="input" require>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{acfData.acf.step_4.attachment}}</p>
|
||||
<p>Miejsce montażu i kod pocztowy</p>
|
||||
<input v-model="configData.step_4.miejsce_montazu" type="text" name="miejsce_montazu" id="calc_miejsce_montazu" class="input" require>
|
||||
</li>
|
||||
<li>
|
||||
<p>Załącznik (opcjonalnie)</p>
|
||||
<div class="file-upload-area"
|
||||
:class="{ 'dragover': isDragOver }"
|
||||
@dragover.prevent="isDragOver = true"
|
||||
@@ -344,58 +434,27 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul v-if="selected_option_1 === 0" class="calc-texts" style="margin-top: 20px;">
|
||||
<li class="c-datepicker">
|
||||
<p>Planowany termin montażu</p>
|
||||
<div class="datepicker-wrapper">
|
||||
<div class="datepicker-input" @click="showDatepicker = !showDatepicker">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#88b14b" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</svg>
|
||||
<span :class="{ placeholder: !configData.step_4.planned_date }">
|
||||
{{ configData.step_4.planned_date || 'Wybierz datę' }}
|
||||
</span>
|
||||
<svg class="datepicker-chevron" :class="{ open: showDatepicker }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="datepicker-calendar" v-if="showDatepicker">
|
||||
<div class="datepicker-header">
|
||||
<button type="button" @click.stop="dpPrevMonth">‹</button>
|
||||
<span>{{ dpMonthName }} {{ dpYear }}</span>
|
||||
<button type="button" @click.stop="dpNextMonth">›</button>
|
||||
</div>
|
||||
<div class="datepicker-weekdays">
|
||||
<span>Pn</span><span>Wt</span><span>Śr</span><span>Cz</span><span>Pt</span><span>Sb</span><span>Nd</span>
|
||||
</div>
|
||||
<div class="datepicker-days">
|
||||
<span v-for="blank in dpFirstDayOffset" class="datepicker-day empty"></span>
|
||||
<span
|
||||
v-for="day in dpDaysInMonth"
|
||||
:key="day"
|
||||
class="datepicker-day"
|
||||
:class="{
|
||||
selected: dpIsSelected(day),
|
||||
disabled: dpIsDisabled(day),
|
||||
today: dpIsToday(day)
|
||||
}"
|
||||
@click.stop="dpSelectDay(day)"
|
||||
>{{ day }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="calc-texts" style="margin-top: 30px;">
|
||||
<li class="c-select">
|
||||
<p>Planowany termin realizacji:</p>
|
||||
<select v-model="configData.step_4.planned_season">
|
||||
<option value="">-- Wybierz --</option>
|
||||
<option value="Wiosna">Wiosna</option>
|
||||
<option value="Lato">Lato</option>
|
||||
<option value="Jesień">Jesień</option>
|
||||
<option value="Zima">Zima</option>
|
||||
<option value="Jeszcze nie wiem">Jeszcze nie wiem</option>
|
||||
</select>
|
||||
</li>
|
||||
<li class="c-select">
|
||||
<p>Orientacyjny budżet</p>
|
||||
<p>Budżet inwestycji:</p>
|
||||
<select v-model="configData.step_4.budget_range">
|
||||
<option value="">-- Wybierz --</option>
|
||||
<option value="100.000 zł - 150.000 zł">100.000 zł - 150.000 zł</option>
|
||||
<option value="150.000 zł - 200.000 zł">150.000 zł - 200.000 zł</option>
|
||||
<option value="250.000 zł - 300.000 zł">250.000 zł - 300.000 zł</option>
|
||||
<option value="Pow. 300.000 zł">Pow. 300.000 zł</option>
|
||||
<option value="do 100 tyś.">do 100 tyś.</option>
|
||||
<option value="100-150 tyś.">100-150 tyś.</option>
|
||||
<option value="150-200 tyś.">150-200 tyś.</option>
|
||||
<option value="Powyżej 200 tyś.">Powyżej 200 tyś.</option>
|
||||
<option value="Chcę omówić">Chcę omówić</option>
|
||||
</select>
|
||||
</li>
|
||||
<li class="c-select">
|
||||
@@ -408,7 +467,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="selected_option_1 === 0" class="checkboxes-confirm" style="margin-top: 20px;">
|
||||
<div v-if="selected_option_1 === 0" class="checkboxes-confirm" style="margin-top: 30px;">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; cursor: pointer;">
|
||||
<input type="checkbox" v-model="configData.step_4.confirm_budget" style="margin-top: 4px; flex-shrink: 0;">
|
||||
<span style="font-size: 14px;">Rozumiem, że realizacje całorocznych ogrodów zimowych zaczynają się od około 120 000 zł netto.</span>
|
||||
@@ -419,7 +478,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="btn_send btn btn-primary" type="submit" @click="sendEmail()" :disabled="isSended">Wyślij</button>
|
||||
<button class="btn_send btn btn-primary" type="submit" @click="sendEmail()" :disabled="isSended" style="margin-top: 30px;">Wyślij zapytanie i sprawdź budżet projektu</button>
|
||||
</div>
|
||||
|
||||
<div v-if="windowWidth > 1000">
|
||||
@@ -495,13 +554,11 @@
|
||||
selected_option_3: null,
|
||||
progressBar: 25,
|
||||
windowWidth: 0,
|
||||
activeExampleTab: 'standard',
|
||||
showDatepicker: false,
|
||||
dpMonth: new Date().getMonth(),
|
||||
dpYear: new Date().getFullYear(),
|
||||
uploadedFiles: [],
|
||||
isDragOver: false,
|
||||
fileError: '',
|
||||
isWinterSeason: false,
|
||||
availableSlots: 8,
|
||||
|
||||
acfData: {
|
||||
acf: {}
|
||||
@@ -521,7 +578,8 @@
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
planned_date: '',
|
||||
miejsce_montazu: '',
|
||||
planned_season: '',
|
||||
budget_range: '',
|
||||
is_owner: '',
|
||||
confirm_budget: false,
|
||||
@@ -531,6 +589,7 @@
|
||||
}
|
||||
},
|
||||
async beforeMount() {
|
||||
this.checkWinterSeason();
|
||||
this.getWindowWidth();
|
||||
try {
|
||||
const res = await fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/pages/<?php echo get_the_ID() ?>`);
|
||||
@@ -543,6 +602,12 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkWinterSeason() {
|
||||
const now = new Date();
|
||||
const month = now.getMonth(); // 0-11 (0 = styczeń, 11 = grudzień)
|
||||
// Sezon zimowy: listopad (10), grudzień (11), styczeń (0), luty (1), marzec (2), kwiecień (3)
|
||||
this.isWinterSeason = month >= 10 || month <= 3;
|
||||
},
|
||||
setStep_1(value, index) {
|
||||
this.configData.step_1 = value
|
||||
this.selected_option_1 = index
|
||||
@@ -667,19 +732,16 @@
|
||||
return true;
|
||||
};
|
||||
|
||||
return checkFields(configData, ['step_3_extra', 'planned_date', 'budget_range', 'is_owner', 'confirm_budget', 'confirm_deposit']);
|
||||
return checkFields(configData, ['step_3_extra', 'confirm_budget', 'confirm_deposit']);
|
||||
},
|
||||
|
||||
|
||||
checkFields() {
|
||||
const basicFieldsFilled = this.areAllFieldsFilled(this.configData);
|
||||
|
||||
// Dla ogrodów zimowych (selected_option_1 === 0) wymagaj dodatkowych pól i checkboxów
|
||||
// Dla ogrodów zimowych (selected_option_1 === 0) wymagaj checkboxów
|
||||
if (this.selected_option_1 === 0) {
|
||||
if (!this.configData.step_4.planned_date ||
|
||||
!this.configData.step_4.budget_range ||
|
||||
!this.configData.step_4.is_owner ||
|
||||
!this.configData.step_4.confirm_budget ||
|
||||
if (!this.configData.step_4.confirm_budget ||
|
||||
!this.configData.step_4.confirm_deposit) {
|
||||
return false;
|
||||
}
|
||||
@@ -720,36 +782,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
dpPrevMonth() {
|
||||
if (this.dpMonth === 0) { this.dpMonth = 11; this.dpYear--; }
|
||||
else { this.dpMonth--; }
|
||||
},
|
||||
dpNextMonth() {
|
||||
if (this.dpMonth === 11) { this.dpMonth = 0; this.dpYear++; }
|
||||
else { this.dpMonth++; }
|
||||
},
|
||||
dpSelectDay(day) {
|
||||
if (this.dpIsDisabled(day)) return;
|
||||
const d = String(day).padStart(2, '0');
|
||||
const m = String(this.dpMonth + 1).padStart(2, '0');
|
||||
this.configData.step_4.planned_date = `${d}.${m}.${this.dpYear}`;
|
||||
this.showDatepicker = false;
|
||||
},
|
||||
dpIsSelected(day) {
|
||||
const d = String(day).padStart(2, '0');
|
||||
const m = String(this.dpMonth + 1).padStart(2, '0');
|
||||
return this.configData.step_4.planned_date === `${d}.${m}.${this.dpYear}`;
|
||||
},
|
||||
dpIsDisabled(day) {
|
||||
const date = new Date(this.dpYear, this.dpMonth, day);
|
||||
const today = new Date();
|
||||
today.setHours(0,0,0,0);
|
||||
return date < today;
|
||||
},
|
||||
dpIsToday(day) {
|
||||
const now = new Date();
|
||||
return day === now.getDate() && this.dpMonth === now.getMonth() && this.dpYear === now.getFullYear();
|
||||
},
|
||||
handleFileDrop(e) {
|
||||
this.isDragOver = false;
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
@@ -833,26 +865,10 @@
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.getWindowWidth);
|
||||
this.getWindowWidth();
|
||||
document.addEventListener('click', (e) => {
|
||||
if (this.showDatepicker && !e.target.closest('.datepicker-wrapper')) {
|
||||
this.showDatepicker = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
debug() {
|
||||
return this.configData
|
||||
},
|
||||
dpMonthName() {
|
||||
const names = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'];
|
||||
return names[this.dpMonth];
|
||||
},
|
||||
dpDaysInMonth() {
|
||||
return new Date(this.dpYear, this.dpMonth + 1, 0).getDate();
|
||||
},
|
||||
dpFirstDayOffset() {
|
||||
const d = new Date(this.dpYear, this.dpMonth, 1).getDay();
|
||||
return d === 0 ? 6 : d - 1;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user