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

Add new configurator fields

Browse Source
This commit is contained in:
Roman Pyrih
2025-01-20 10:55:48 +01:00
parent 9f55863e44
commit 553ffbac98
7 changed files with 690 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
konfigurator-mail.php
View File

@@ -3,7 +3,7 @@ session_start();
require_once 'phpmailer/class.phpmailer.php'; require_once 'phpmailer/class.phpmailer.php';
require_once 'phpmailer/class.smtp.php'; require_once 'phpmailer/class.smtp.php';
function send_email( $email, $reply, $subject, $text ) function send_email( $email, $reply, $subject, $text, $attachment = null )
{ {
$mail = new PHPMailer; $mail = new PHPMailer;
$mail -> IsSMTP(); $mail -> IsSMTP();
@@ -27,40 +27,60 @@ function send_email( $email, $reply, $subject, $text )
$mail -> isHTML( true ); $mail -> isHTML( true );
$mail -> Subject = $subject; $mail -> Subject = $subject;
$mail -> Body = $text; $mail -> Body = $text;
if ($attachment && isset($attachment['tmp_name']) && file_exists($attachment['tmp_name'])) {
$mail->addAttachment($attachment['tmp_name'], $attachment['name']);
}
return $mail -> send(); return $mail -> send();
} }
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$configData = json_decode($_POST['configData'], true);
$data = json_decode(file_get_contents('php://input'), true); $file = isset($_FILES['attachment']) ? $_FILES['attachment'] : null;
$configData = $data['configData'];
$to = 'kontakt@ostal.pl'; $to = 'kontakt@ostal.pl';
$subject = 'ostal.pl - Konfigurator'; $subject = 'ostal.pl - Konfigurator';
$message = '<p>' . $configData['step_1'] . '</p>'; $message = '<p>' . $configData['step_1'] . '</p>';
$message .= '<p>Wymiary</p>'; $message .= '<p>Wymiary</p>';
$message .= '<ul>'; $message .= '<ul>';
$message .= '<li>Długość: ' . $configData['step_2']['height'] . 'mm </li>'; if (isset($configData['step_2']['width']) && $configData['step_2']['width']) {
$message .= '<li>Szerokość: ' . $configData['step_2']['length'] . 'mm </li>'; $message .= '<li>Szerokość X : ' . $configData['step_2']['width'] . 'mm </li>';
$message .= '<li>Wysokość: ' . $configData['step_2']['width'] . 'mm </li>'; }
$message .= '</ul>'; if (isset($configData['step_2']['length']) && $configData['step_2']['length']) {
$message .= '<li>Głębokość Y : ' . $configData['step_2']['length'] . 'mm </li>';
}
if (isset($configData['step_2']['height']) && $configData['step_2']['height']) {
$message .= '<li>Wysokość Z : ' . $configData['step_2']['height'] . 'mm </li>';
}
if (isset($configData['step_2']['entry']) && $configData['step_2']['entry']) {
$message .= '<li>Wjazd: ' . $configData['step_2']['entry'] . '</li>';
}
$message .= '</ul>';
$message .= '<p>' . $configData['step_3'] . '</p>'; $message .= '<p>' . $configData['step_3'] . '</p>';
$message .= '<p>Dane kontaktowe</p>'; if (isset($configData['step_3_extra']) && $configData['step_3_extra']) {
$message .= '<ul>'; $message .= '<p>' . $configData['step_3_extra'] . '</p>';
$message .= '<li>Miejsce montażu: ' . $configData['step_4']['miejsce_montazu'] . '</li>'; }
$message .= '<li>Imię: ' . $configData['step_4']['name'] . '</li>';
$message .= '<li>E-mail: ' . $configData['step_4']['email'] . '</li>';
$message .= '<li>Telefon: ' . $configData['step_4']['phone'] . '</li>';
$message .= '</ul>';
if ( send_email( $to, $configData['step_4']['email'], $subject, $message, $headers ) ) $message .= '<p>Dane kontaktowe</p>';
{ $message .= '<ul>';
// send_email( 'biuro@project-pro.pl', $configData['step_4']['email'], $subject, $message, $headers ); $message .= '<li>Miejsce montażu: ' . $configData['step_4']['miejsce_montazu'] . '</li>';
$_SESSION["configurator_sended"] = true; $message .= '<li>Imię: ' . $configData['step_4']['name'] . '</li>';
echo json_encode(array('status' => 'ok', 'message' => 'Wiadmość wysłana')); $message .= '<li>E-mail: ' . $configData['step_4']['email'] . '</li>';
$message .= '<li>Telefon: ' . $configData['step_4']['phone'] . '</li>';
$message .= '</ul>';
if (send_email($to, $configData['step_4']['email'], $subject, $message, $file)) {
$_SESSION["configurator_sended"] = true;
echo json_encode(['status' => 'ok', 'message' => 'Wiadmość wysłana']);
} else {
echo json_encode(['status' => 'error', 'message' => 'Wystąpił błąd podczas wysyłania wiadomości']);
}
exit(); exit();
} else { } else {
echo json_encode(array('status' => 'error', 'message' => 'Wystąpił błąd')); echo json_encode(['status' => 'error', 'message' => 'Nieprawidłowe żądanie']);
exit(); exit();
} }

2
wp-content/themes/ostal_WP/css/custom.css
View File

@@ -1 +1 @@
#home-page-seo .wrapper{padding-top:75px;padding-bottom:0}#home-page-seo .wrapper h2{margin-left:0;max-width:100%}#garden-page-seo .wrapper{padding-top:0;padding-bottom:75px}#garden-page-seo .wrapper h2{margin-left:0;max-width:100%}.pagination{display:flex;align-items:center;margin:25px 0 50px;justify-content:center;width:100%;font-size:16px;gap:10px}.pagination a{font-size:16px}/*# sourceMappingURL=custom.css.map */ #home-page-seo .wrapper{padding-top:75px;padding-bottom:0}#home-page-seo .wrapper h2{margin-left:0;max-width:100%}#garden-page-seo .wrapper{padding-top:0;padding-bottom:75px}#garden-page-seo .wrapper h2{margin-left:0;max-width:100%}.pagination{display:flex;align-items:center;margin:25px 0 50px;justify-content:center;width:100%;font-size:16px;gap:10px}.pagination a{font-size:16px}.c-select p{margin-bottom:5px !important}.c-select select{border:1px solid #88b14b;padding:10px;width:100%}/*# sourceMappingURL=custom.css.map */

2
wp-content/themes/ostal_WP/css/custom.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["custom.scss"],"names":[],"mappings":"AACE,wBACE,gBAAA,CACA,gBAAA,CAEA,2BACE,aAAA,CACA,cAAA,CAMJ,0BACE,aAAA,CACA,mBAAA,CAEA,6BACE,aAAA,CACA,cAAA,CAKN,YACE,YAAA,CACA,kBAAA,CACA,kBAAA,CACA,sBAAA,CACA,UAAA,CACA,cAAA,CACA,QAAA,CAEA,cACE,cAAA","file":"custom.css","sourcesContent":["#home-page-seo {\r\n .wrapper {\r\n padding-top: 75px;\r\n padding-bottom: 0;\r\n\r\n h2 {\r\n margin-left: 0;\r\n max-width: 100%;\r\n }\r\n }\r\n}\r\n\r\n#garden-page-seo {\r\n .wrapper {\r\n padding-top: 0;\r\n padding-bottom: 75px;\r\n\r\n h2 {\r\n margin-left: 0;\r\n max-width: 100%;\r\n }\r\n }\r\n}\r\n\r\n.pagination {\r\n display: flex;\r\n align-items: center;\r\n margin: 25px 0 50px;\r\n justify-content: center;\r\n width: 100%;\r\n font-size: 16px;\r\n gap: 10px;\r\n\r\n a {\r\n font-size: 16px;\r\n }\r\n}"]} {"version":3,"sources":["custom.scss"],"names":[],"mappings":"AACC,wBACC,gBAAA,CACA,gBAAA,CAEA,2BACC,aAAA,CACA,cAAA,CAMF,0BACC,aAAA,CACA,mBAAA,CAEA,6BACC,aAAA,CACA,cAAA,CAKH,YACC,YAAA,CACA,kBAAA,CACA,kBAAA,CACA,sBAAA,CACA,UAAA,CACA,cAAA,CACA,QAAA,CAEA,cACC,cAAA,CAKD,YACC,4BAAA,CAED,iBACC,wBAAA,CACA,YAAA,CACA,UAAA","file":"custom.css"}

65
wp-content/themes/ostal_WP/css/custom.scss
View File

@@ -1,37 +1,48 @@
#home-page-seo { #home-page-seo {
.wrapper { .wrapper {
padding-top: 75px; padding-top: 75px;
padding-bottom: 0; padding-bottom: 0;
h2 { h2 {
margin-left: 0; margin-left: 0;
max-width: 100%; max-width: 100%;
} }
} }
} }
#garden-page-seo { #garden-page-seo {
.wrapper { .wrapper {
padding-top: 0; padding-top: 0;
padding-bottom: 75px; padding-bottom: 75px;
h2 { h2 {
margin-left: 0; margin-left: 0;
max-width: 100%; max-width: 100%;
} }
} }
} }
.pagination { .pagination {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 25px 0 50px; margin: 25px 0 50px;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
gap: 10px; gap: 10px;
a { a {
font-size: 16px; font-size: 16px;
} }
} }
.c-select {
p {
margin-bottom: 5px !important;
}
select {
border: 1px solid #88b14b;
padding: 10px;
width: 100%;
}
}

497
wp-content/themes/ostal_WP/custom.css
View File

File diff suppressed because one or more lines are too long

2
wp-content/themes/ostal_WP/custom.css.map
View File

File diff suppressed because one or more lines are too long

138
wp-content/themes/ostal_WP/page-2101.php
View File

@@ -77,20 +77,38 @@
</div> </div>
<div class="slide-data"> <div class="slide-data">
<img :src="acfData.acf.step_2.image" alt=""> <img :src="acfData.acf.step_2.image" alt="">
<ul class="calc-texts" v-if="isLoaded"> <ul class="calc-texts" v-if="isLoaded && this.selected_option_1 !== 2">
<li> <li>
<p>{{ acfData.acf.step_2.width }} ( od 2m do 7m ):<br><span>{{ configData.step_2.width / 1000 }}m</span></p> <p>{{ acfData.acf.step_2.width }} ( od 2m do 7m ):<br><span v-if="configData.step_2.width">{{ configData.step_2.width / 1000 }}m</span></p>
<input v-model="configData.step_2.width" ref="rangeWidth" type="range" name="width" id="width" min="2000" max="7000" step="500"> <input v-model="configData.step_2.width" ref="rangeWidth" type="range" name="width" id="width" value="2000" min="2000" max="7000" step="500">
</li> </li>
<li> <li>
<p>{{ acfData.acf.step_2.length }} ( od 2m do 7m ):<br><span>{{ configData.step_2.length / 1000 }}m</span></p> <p>{{ acfData.acf.step_2.length }} ( od 2m do 7m ):<br><span v-if="configData.step_2.length">{{ configData.step_2.length / 1000 }}m</span></p>
<input v-model="configData.step_2.length" type="range" name="length" id="length" min="2000" max="7000" step="500"> <input v-model="configData.step_2.length" type="range" name="length" id="length" min="2000" max="7000" step="500">
</li> </li>
<li> <li>
<p>{{ acfData.acf.step_2.height }} ( do 2,8m lub do 3,5m ):<br><span>{{ configData.step_2.height / 1000 }}m</span></p> <p>{{ acfData.acf.step_2.height }} ( do 2,8m lub do 3,5m ):<br><span v-if="configData.step_2.height">{{ configData.step_2.height / 1000 }}m</span></p>
<input v-model="configData.step_2.height" ref="rangeHeight" type="range" name="height" id="height" min="2800" max="3500" step="100"> <input v-model="configData.step_2.height" ref="rangeHeight" type="range" name="height" id="height" min="2800" max="3500" step="100">
</li> </li>
</ul> </ul>
<!-- Second variant -->
<ul class="calc-texts" v-if="isLoaded && this.selected_option_1 === 2">
<li>
<p>{{ acfData.acf.step_2.width }} ( od 5m do 7,5m ):<br><span v-if="configData.step_2.width">{{ configData.step_2.width / 1000 }}m</span></p>
<input v-model="configData.step_2.width" ref="rangeWidth" type="range" name="width" id="width" min="5000" max="7500" step="500">
</li>
<li>
<p>{{ acfData.acf.step_2.length }} ( od 2,5m do 7,5m ):<br><span v-if="configData.step_2.length">{{ configData.step_2.length / 1000 }}m</span></p>
<input v-model="configData.step_2.length" type="range" name="length" id="length" min="2500" max="7500" step="500">
</li>
<li class="c-select">
<p>Wjazd standardowy lub wjazd boczny</p>
<select v-model="configData.step_2.entry">
<option value="Standardowy od niskiej albo wysokiej strony">Standardowy od niskiej albo wysokiej strony</option>
<option value="Boczny z bocznej skośnej strony dachu">Boczny z bocznej skośnej strony dachu</option>
</select>
</li>
</ul>
</div> </div>
</div> </div>
@@ -129,14 +147,42 @@
<div class="calc-box--title"> <div class="calc-box--title">
<h2>Krok 3</h2> <h2>Krok 3</h2>
</div> </div>
<ul class="calc-radio" v-if="isLoaded"> <ul class="calc-radio" v-if="isLoaded && this.selected_option_1 !== 2">
<li v-for="(step, index) in acfData_step_3" :key="index" @click="setStep_3(step.text, index)" :class="{ selected: index === selected_option_3 }"> <li
v-for="(step, index) in acfData_step_3"
:key="index"
@click="setStep_3(step.text, index, step.extra_option)"
:class="{ selected: index === selected_option_3 || (step.extra_option && this.configData.step_3_extra) }"
>
<div class="radio"></div> <div class="radio"></div>
<div class="radio-text"> <div class="radio-text">
<div class="radio-title">{{ step.text }}</div> <div class="radio-title">{{ step.text }}</div>
</div> </div>
</li> </li>
</ul> </ul>
<!-- Second variant -->
<ul class="calc-radio" v-if="isLoaded && this.selected_option_1 === 2">
<li
v-for="(step, index) in acfData_step_3"
:key="index"
@click="setStep_3(step.text, index, step.extra_option)"
:class="{ selected: index === selected_option_3 || (step.extra_option && this.configData.step_3_extra) }"
>
<div class="radio"></div>
<div class="radio-text">
<div class="radio-title">{{ step.text }}</div>
</div>
</li>
</ul>
<ul class="calc-texts" v-if="isLoaded && this.selected_option_1 === 2">
<li class="c-select">
<p>Klient prywatny , klient biznesowy</p>
<select v-model="configData.step_3_extra">
<option value="Prywatny">Prywatny</option>
<option value="Biznesowy B2B">Biznesowy B2B</option>
</select>
</li>
</ul>
</div> </div>
<div v-if="windowWidth > 1000"> <div v-if="windowWidth > 1000">
@@ -200,6 +246,10 @@
<p>{{acfData.acf.step_4.phone}}</p> <p>{{acfData.acf.step_4.phone}}</p>
<input v-model="configData.step_4.phone" type="tel" name="phone" id="calc_phone" class="input" require> <input v-model="configData.step_4.phone" type="tel" name="phone" id="calc_phone" class="input" require>
</li> </li>
<li>
<p>{{acfData.acf.step_4.attachment}}</p>
<input type="file" ref="fileInput" name="attachment" id="calc_attachment" class="input">
</li>
</ul> </ul>
<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">Wyślij</button>
@@ -290,16 +340,13 @@
configData: { configData: {
step_1: '', step_1: '',
step_2: { step_2: {},
length: 2000,
width: 2000,
height: 2500
},
step_3: '', step_3: '',
step_3_extra: '',
step_4: { step_4: {
name: '', name: '',
email: '', email: '',
phone: '' phone: '',
} }
} }
} }
@@ -315,9 +362,6 @@
console.error('Error fetching data:', error); console.error('Error fetching data:', error);
this.isLoaded = true; this.isLoaded = true;
} }
console.log(this.acfData);
}, },
methods: { methods: {
setStep_1(value, index) { setStep_1(value, index) {
@@ -327,6 +371,8 @@
this.updateStep3Content(); this.updateStep3Content();
}, },
updateStep2Content() { updateStep2Content() {
this.configData.step_2 = {};
// Tutaj umieszczasz logikę, która zmienia zawartość kroku 2 w zależności od wyboru w kroku 1. // Tutaj umieszczasz logikę, która zmienia zawartość kroku 2 w zależności od wyboru w kroku 1.
// Przykład: zmiana obrazka w kroku 2 na podstawie wyboru // Przykład: zmiana obrazka w kroku 2 na podstawie wyboru
if (this.selected_option_1 === 0) { // Zakładając, że pierwsza opcja w kroku 1 zmienia obraz na 'obrazek1.webp' if (this.selected_option_1 === 0) { // Zakładając, że pierwsza opcja w kroku 1 zmienia obraz na 'obrazek1.webp'
@@ -340,6 +386,9 @@
}, },
updateStep3Content() { updateStep3Content() {
this.configData.step_3 = {};
this.configData.step_3_extra = '';
if (this.selected_option_1 === 0) { if (this.selected_option_1 === 0) {
this.acfData_step_3 = this.acfData.acf.step_3.items_1 this.acfData_step_3 = this.acfData.acf.step_3.items_1
} else if (this.selected_option_1 === 1) { } else if (this.selected_option_1 === 1) {
@@ -349,9 +398,14 @@
} }
}, },
setStep_3(value, index) { setStep_3(value, index, extra_option = false) {
this.configData.step_3 = value if (!extra_option) {
this.selected_option_3 = index this.configData.step_3 = value
this.selected_option_3 = index
this.configData.step_3_extra = ''
} else {
this.configData.step_3_extra = value
}
}, },
swipeSlide(refName, percent, progress) { swipeSlide(refName, percent, progress) {
const myDiv = this.$refs.calcBar; const myDiv = this.$refs.calcBar;
@@ -370,22 +424,34 @@
sendEmail() { sendEmail() {
if (this.checkFields()) { if (this.checkFields()) {
const url = '/konfigurator-mail.php'; const url = '/konfigurator-mail.php';
const data = {
configData: this.configData, const formData = new FormData();
};
formData.append('configData', JSON.stringify(this.configData));
const file = this.$refs.fileInput?.files[0];
if (file) {
formData.append('attachment', file);
}
// const data = {
// configData: this.configData,
// };
this.isSended = true this.isSended = true
const options = { // const options = {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify(data),
// };
fetch(url, {
method: 'POST', method: 'POST',
headers: { body: formData
'Content-Type': 'application/json', })
},
body: JSON.stringify(data),
};
fetch(url, options)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
this.isSended = false this.isSended = false
@@ -466,6 +532,16 @@
return this.configData return this.configData
} }
}, },
watch: {
configData: {
deep: true,
handler() {
console.log('configData changed:\n', JSON.stringify(this.configData, null, 2));
}
}
},
beforeDestroy() { beforeDestroy() {
window.removeEventListener('resize', this.getWindowWidth); window.removeEventListener('resize', this.getWindowWidth);
}, },