Add new configurator fields
This commit is contained in:
Roman Pyrih
@@ -77,20 +77,38 @@
|
||||
</div>
|
||||
<div class="slide-data">
|
||||
<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>
|
||||
<p>{{ acfData.acf.step_2.width }} ( od 2m do 7m ):<br><span>{{ 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">
|
||||
<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" value="2000" min="2000" max="7000" step="500">
|
||||
</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">
|
||||
</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">
|
||||
</li>
|
||||
</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>
|
||||
|
||||
@@ -129,14 +147,42 @@
|
||||
<div class="calc-box--title">
|
||||
<h2>Krok 3</h2>
|
||||
</div>
|
||||
<ul class="calc-radio" v-if="isLoaded">
|
||||
<li v-for="(step, index) in acfData_step_3" :key="index" @click="setStep_3(step.text, index)" :class="{ selected: index === selected_option_3 }">
|
||||
<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>
|
||||
<!-- 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 v-if="windowWidth > 1000">
|
||||
@@ -200,6 +246,10 @@
|
||||
<p>{{acfData.acf.step_4.phone}}</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>
|
||||
<input type="file" ref="fileInput" name="attachment" id="calc_attachment" class="input">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn_send btn btn-primary" type="submit" @click="sendEmail()" :disabled="isSended">Wyślij</button>
|
||||
@@ -290,16 +340,13 @@
|
||||
|
||||
configData: {
|
||||
step_1: '',
|
||||
step_2: {
|
||||
length: 2000,
|
||||
width: 2000,
|
||||
height: 2500
|
||||
},
|
||||
step_2: {},
|
||||
step_3: '',
|
||||
step_3_extra: '',
|
||||
step_4: {
|
||||
name: '',
|
||||
email: '',
|
||||
phone: ''
|
||||
phone: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -315,9 +362,6 @@
|
||||
console.error('Error fetching data:', error);
|
||||
this.isLoaded = true;
|
||||
}
|
||||
|
||||
console.log(this.acfData);
|
||||
|
||||
},
|
||||
methods: {
|
||||
setStep_1(value, index) {
|
||||
@@ -327,6 +371,8 @@
|
||||
this.updateStep3Content();
|
||||
},
|
||||
updateStep2Content() {
|
||||
this.configData.step_2 = {};
|
||||
|
||||
// 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
|
||||
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() {
|
||||
this.configData.step_3 = {};
|
||||
this.configData.step_3_extra = '';
|
||||
|
||||
if (this.selected_option_1 === 0) {
|
||||
this.acfData_step_3 = this.acfData.acf.step_3.items_1
|
||||
} else if (this.selected_option_1 === 1) {
|
||||
@@ -349,9 +398,14 @@
|
||||
}
|
||||
},
|
||||
|
||||
setStep_3(value, index) {
|
||||
this.configData.step_3 = value
|
||||
this.selected_option_3 = index
|
||||
setStep_3(value, index, extra_option = false) {
|
||||
if (!extra_option) {
|
||||
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) {
|
||||
const myDiv = this.$refs.calcBar;
|
||||
@@ -370,22 +424,34 @@
|
||||
sendEmail() {
|
||||
if (this.checkFields()) {
|
||||
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
|
||||
|
||||
const options = {
|
||||
// const options = {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
// body: JSON.stringify(data),
|
||||
// };
|
||||
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
};
|
||||
|
||||
|
||||
fetch(url, options)
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.isSended = false
|
||||
@@ -466,6 +532,16 @@
|
||||
return this.configData
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
configData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
console.log('configData changed:\n', JSON.stringify(this.configData, null, 2));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.getWindowWidth);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user