WordPress_Themes/Rogers_Motors_Theme
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

plugin and theme sync

Browse Source
This commit is contained in:
Prospect
2024-03-25 02:27:05 -04:00
parent c3179e074e
commit 7d46673042
13 changed files with 358 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
autocart_assets/js/AppointmentForm.js
View File

@@ -1,6 +1,15 @@
class AppointmentForm {
constructor(vehicle) {
this.vehicle = vehicle;
this.inputs = [
'name',
'email',
'phone',
'preferred-contact',
'message',
'agreeToOffersCheckbox',
'privacyPolicyCheckbox',
];
this.initForm();
this.modalDiv = null;
this.name = 'appointmentForm';
@@ -21,6 +30,7 @@ class AppointmentForm {
},
];
let checkboxes = ``;
const vehicleInput = `<input type="hidden" name="vehicle" id="vehicle" value='${JSON.stringify(this.vehicle)}'>`;
inputIds.forEach((input) => {
checkboxes += `
<div class=" mdc-form-field flex flex-row flex-nowrap w-full my-2 lg:my-0 ${input.name} hover:text-red-500">
@@ -38,38 +48,41 @@ class AppointmentForm {
</div>`;
});
this.modalDiv.innerHTML = `
<form class="p-4 md:p-5">
<div class="grid gap-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
<input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Jane Doe" required="">
</div>
<div class="col-span-2">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="jane@gmail.com" required="">
</div>
<div class="col-span-2 ">
<label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone</label>
<input type="tel" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="(123) 456-7890" required="">
</div>
<div class="col-span-2 ">
<label for="preferred-contact" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Preferred Contact Method</label>
<select id="preferred-contact" name="preferred-contact" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<option selected="">---</option>
<option value="Call">Call</option>
<option value="Email">Email</option>
<option value="Text">Text</option>
</select>
</div>
<div class="col-span-2">
<label for="message" name="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Product Description</label>
<textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="I am interested in..."></textarea>
</div>
</div>
${checkboxes}
<button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300" id="send-button">Send</button>
<form class="p-4 md:p-5" id="appointmentForm">
<div class="grid gap-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
<input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Jane Doe" required>
<div id="nameError" class="text-red-500 hidden">Please enter your name.</div>
</div>
<div class="col-span-2">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="jane@gmail.com" required>
<div id="emailError" class="text-red-500 hidden">Please enter a valid email address.</div>
</div>
<div class="col-span-2 ">
<label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone</label>
<input type="tel" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="(123) 456-7890" required>
<div id="phoneError" class="text-red-500 hidden">Please enter a valid phone number.</div>
</div>
<div class="col-span-2 ">
<label for="preferred-contact" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Preferred Contact Method</label>
<select id="preferred-contact" name="preferred-contact" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<option selected disabled>---</option>
<option value="Call">Call</option>
<option value="Email" selected>Email</option>
<option value="Text">Text</option>
</select>
<div id="preferredContactError" class="text-red-500 hidden">Please select a preferred contact method.</div>
</div>
<div class="col-span-2">
<label for="message" name="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Product Description</label>
<textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="I am interested in..."></textarea>
</div>
</div>
${vehicleInput}
${checkboxes}
<button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300 finance-view-only" id="send-button">Send</button>
</form>
`;
@@ -104,27 +117,56 @@ class AppointmentForm {
return this.modalDiv;
}
initializeFormEventListeners(modalDiv) {
const formInputs = [
'name',
'email',
'phone',
'preferred-contact',
'message',
'agreeToOffersCheckbox',
'privacyPolicyCheckbox',
];
formInputs.forEach((id) => {
const inputElement = modalDiv.querySelector(`#${id}`);
if (inputElement) {
inputElement.addEventListener('input', () => {
this.saveFormValues(); // Save form values whenever an input changes
});
}
let self = this;
self.inputs.forEach(id => {
const inputElement = modalDiv.querySelector(`#${id}`);
if (inputElement) {
inputElement.addEventListener('input', () => {
self.saveFormValues(); // Save form values whenever an input changes
});
}
});
}
const sendButton = modalDiv.querySelector('#send-button');
if (sendButton) {
sendButton.addEventListener('click', function(e) {
e.preventDefault();
if (self.validateForm()) {
console.log('Form submitted successfully');
}else{
return
}
const formData = {};
[...['loanTerm', 'intRate', 'downPayment', 'tradeValue', 'paymentFrequency', 'rate', 'customRateValue'],...self.inputs].forEach(inputID => {
const inputElement = document.getElementById(inputID);
if (inputElement) {
formData[inputID] = postDetails.hasOwnProperty(inputID) ? postDetails[inputID] : null;
}
});
// AJAX request
jQuery.ajax({
type: 'POST',
url: ajax_object.ajax_url,
data: {
action: 'send_appointment_data',
appointment_data: formData,
nonce: ajax_object.appointment_nonce
},
success: function(response) {
alert('Appointment data sent successfully!');
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
}
});
});
}
}
initializeFormInputs() {
const storedValues =
@@ -133,7 +175,7 @@ class AppointmentForm {
const inputElement = document.getElementById(key);
if (inputElement) {
inputElement.value = storedValues[key];
inputElement.dispatchEvent(new Event('input')); // Dispatch input event
inputElement.dispatchEvent(new Event('input'));
}
}
}
@@ -142,13 +184,11 @@ class AppointmentForm {
this.checkboxes = modalDiv.querySelectorAll('.mdc-checkbox');
if (this.checkboxes) {
this.checkboxes.forEach((checkbox, index) => {
// Initialize the MDCCheckbox with the actual checkbox element
const checkboxElement = checkbox.querySelector(
`.mdc-checkbox__native-control.${inputIds[index].name}`
);
const checkboxInstance = new mdc.checkbox.MDCCheckbox(checkbox);
// If the checkbox is found, initialize the form field as well
if (checkboxElement) {
const formFieldInstance = new mdc.formField.MDCFormField(
modalDiv.querySelector(`.mdc-form-field.${inputIds[index].name}`)
@@ -164,18 +204,10 @@ class AppointmentForm {
}
saveFormValues() {
const formInputs = [
'name',
'email',
'phone',
'preferred-contact',
'message',
'agreeToOffersCheckbox',
'privacyPolicyCheckbox',
];
const formValues = {};
formInputs.forEach((input) => {
this.inputs.forEach((input) => {
const inputElement = document.getElementById(input);
if (inputElement) {
formValues[input] = inputElement.value;
@@ -184,5 +216,22 @@ class AppointmentForm {
localStorage.setItem(`autocart_${this.name}`, JSON.stringify(formValues));
}
validateForm() {
let isValid = true;
this.inputs.forEach((id) => {
const inputElement = document.getElementById(id);
const errorElement = document.getElementById(`${id}Error`);
if (inputElement && !inputElement.checkValidity()) {
isValid = false;
errorElement.classList.remove('hidden');
} else {
errorElement.classList.add('hidden');
}
});
return isValid;
}
}

139
autocart_assets/js/FinanceForm.js
View File

@@ -1,9 +1,18 @@
class FinanceForm {
constructor(vehicle, notifyParentCallback) {
constructor(vehicle,appointmentForm, notifyParentCallback) {
this.notifyParentCallback = notifyParentCallback;
this.inputs = [
'loanTerm',
'intRate',
'downPayment',
'tradeValue',
'paymentFrequency',
'rate',
'customRateValue',
];
this.modalDiv = null;
this.name = 'financeForm';
this.appointmentForm = appointmentForm;
this.frequencyMap = {
12: 'Monthly',
26: 'Bi-Weekly',
@@ -62,12 +71,37 @@ class FinanceForm {
// Initialize the form
this.initForm();
// this.initializeFormInputs();
this.initializeFormInputs();
}
generateLoanTermOptions(vehicleAge) {
const defaultOptions = [
{ year: 2, terms: [12, 24, 36, 48, 60, 72, 84, 96] },
{ year: 5, terms: [12, 24, 36, 48, 60, 72, 84] },
{ year: 7, terms: [12, 24, 36, 48, 60, 72] },
{ year: 8, terms: [12, 24, 36, 48, 60] },
{ year: 10, terms: [12, 24, 36, 48] }
];
const selectedOptions = defaultOptions.find(option => vehicleAge <= option.year);
if (selectedOptions) {
const optionsHTML = selectedOptions.terms.map(term => `<option value="${term}">${term} Month Term</option>`).join('\n');
return optionsHTML;
} else {
return '';
}
}
initForm() {
// console.log('initForm')
this.modalDiv = document.createElement('div');
const currentYear = new Date().getFullYear();
const vehicleYear = this.vehicle.year;
const vehicleAge = currentYear - vehicleYear;
const loanTermOptions = this.generateLoanTermOptions(vehicleAge);
// const modalDiv = document.createElement('div');
this.modalDiv.innerHTML = `
<div class="bg-white rounded-md grid lg:grid-cols-6 gap-4">
@@ -90,8 +124,8 @@ class FinanceForm {
<div class="tab-content" data-content="tab1">
<h4 class="text-xl mb-2">Let’s Structure a Deal That Works For You</h4>
<p class="mb-4">
<h4 class="text-xl mb-2 finance-view-only">Let’s Structure a Deal That Works For You</h4>
<p class="mb-4 finance-view-only">
We understand that purchasing a vehicle is a big decision, so we want you to be paying a price that you’re comfortable with.
<strong>Let’s structure a deal that works for you below:</strong>
</p>
@@ -128,13 +162,7 @@ class FinanceForm {
<div>
<label for="loanTerm" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Loan Term</label>
<select name="loanTerm" id="loanTerm" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required="">
<option value="12" selected>12 Month Term</option>
<option value="24">24 Month Term</option>
<option value="36">36 Month Term</option>
<option value="48">48 Month Term</option>
<option value="60">60 Month Term</option>
<option value="72">72 Month Term</option>
<option value="84">84 Month Term</option>
${loanTermOptions}
</select>
</div>
<div>
@@ -169,9 +197,9 @@ class FinanceForm {
</div>
<div class="tab-content hidden" data-content="tab2">
<h4 class="text-xl mb-2">Let’s Structure a Deal That Works For You</h4>
<h4 class="text-xl mb-2 finance-view-only">Let’s Structure a Deal That Works For You</h4>
<p class="mb-4">
<p class="mb-4 finance-view-only">
We understand that purchasing a vehicle is a big decision, so we want you to be paying a price that you’re comfortable with.
<strong>Let’s structure a deal that works for you below:</strong>
</p>
@@ -257,22 +285,23 @@ class FinanceForm {
</span>
</p>
</div>
<button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300" id="next-step">next step</button>
<button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300" id="next-step">Next Step</button>
</div>
</div>
</div>
</div>
`;
const formContainer = this.modalDiv.querySelector(
'#appointmentFormContainer'
);
formContainer.appendChild(appointmentForm.initForm());
this.initializeTabNavigation(this.modalDiv);
this.initializeFormEventListeners(this.modalDiv);
return this.modalDiv;
}
const formContainer = this.modalDiv.querySelector(
'#appointmentFormContainer'
);
formContainer.appendChild(this.appointmentForm.initForm());
this.initializeTabNavigation(this.modalDiv);
this.initializeFormEventListeners(this.modalDiv);
return this.modalDiv;
}
// initializeFormInputs() {
// const storedValues = JSON.parse(localStorage.getItem(`autocart_${this.name}`)) || {};
@@ -290,24 +319,33 @@ class FinanceForm {
// }
initializeFormInputs() {
const storedValues =
JSON.parse(localStorage.getItem(`autocart_${this.name}`)) || {};
const storedValues = JSON.parse(localStorage.getItem(`autocart_${this.name}`)) || {};
const selectElements = document.querySelectorAll('select');
for (const key in storedValues) {
const inputElement = document.getElementById(key);
if (inputElement) {
inputElement.value = storedValues[key];
inputElement.dispatchEvent(new Event('input')); // Dispatch input event
}
const inputElement = document.getElementById(key);
if (inputElement) {
inputElement.value = storedValues[key];
if (inputElement.tagName.toLowerCase() === 'select') {
const optionValues = Array.from(inputElement.options).map(option => option.value);
const selectedValue = storedValues[key];
if (!optionValues.includes(selectedValue)) {
const closestValue = optionValues.reduce((a, b) => Math.abs(b - selectedValue) < Math.abs(a - selectedValue) ? b : a);
inputElement.value = closestValue;
}
}
inputElement.dispatchEvent(new Event('input'));
}
}
this.updateView();
}
}
calculatePayments() {
var vehiclePrice = this.vehicle.advertise_price;
this.loanTerm = document.getElementById('loanTerm').value;
this.paymentFrequency = document.getElementById('paymentFrequency').value;
this.intRate =
document.getElementById('rate').value == 'default-rate'
this.intRate = document.getElementById('rate').value == 'default-rate'
? 7.99
: document.getElementById('customRateValue').value;
this.downPayment = document.getElementById('downPayment').value;
@@ -347,11 +385,14 @@ class FinanceForm {
updateView() {
['default-rate', 'custom-rate'].forEach((el) => {
document.getElementById(el).classList.add('hidden');
document.getElementById(el)?.classList?.add('hidden');
});
document
if(document.getElementById('rate')){
document
.getElementById(document.getElementById('rate').value)
.classList.remove('hidden');
}
if (document.querySelectorAll('.loanTermSpan').length) {
document.querySelectorAll('.loanTermSpan').forEach((el) => {
@@ -448,17 +489,9 @@ class FinanceForm {
}
initializeFormEventListeners(modalDiv) {
const formInputs = [
'loanTerm',
'intRate',
'downPayment',
'tradeValue',
'paymentFrequency',
'rate',
'customRateValue',
];
formInputs.forEach((id) => {
this.inputs.forEach((id) => {
const inputElement = modalDiv.querySelector(`#${id}`);
if (inputElement) {
inputElement.addEventListener('input', () => {
@@ -470,18 +503,10 @@ class FinanceForm {
}
saveFormValues() {
const formInputs = [
'loanTerm',
'intRate',
'downPayment',
'tradeValue',
'paymentFrequency',
'rate',
'customRateValue',
];
const formValues = {};
formInputs.forEach((input) => {
this.inputs.forEach((input) => {
const inputElement = document.getElementById(input);
if (inputElement) {
formValues[input] = inputElement.value;

2
autocart_assets/js/Modal.js
View File

@@ -93,6 +93,6 @@ class Modal {
}
}
document.addEventListener('DOMContentLoaded', function () {
console.log('modal is here');
});

8
autocart_assets/templates/search-form.php
View File

@@ -78,7 +78,7 @@ $carMakes = [
<div>
<label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_model">Model</label>
<select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_model" name="vehicle_search_model">
<option value="" disabled="" selected="">Select Model</option>
<option value="" disabled="" selected="">All Models</option>
<!-- <option value="Camry">Camry</option>
<option value="Accord">Accord</option>
<option value="F-150">F-150</option>
@@ -101,7 +101,7 @@ $carMakes = [
<div>
<label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_body_type">Body Type</label>
<select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_body_type" name="vehicle_search_body_type">
<option value="" disabled="" selected="">Select Body Type</option>
<option value="" disabled="" selected="">All Body Types</option>
<!-- <option value="Sedan">Sedan</option>
<option value="SUV">SUV</option>
<option value="Truck">Truck</option>
@@ -113,7 +113,7 @@ $carMakes = [
<div>
<label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_transmission">Transmission</label>
<select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_transmission" name="vehicle_search_transmission">
<option value="" disabled="" selected="">Select Transmission</option>
<option value="" disabled="" selected="">All Transmissions</option>
<!-- <option value="Automatic">Automatic</option>
<option value="Manual">Manual</option>
<option value="CVT">CVT</option> -->
@@ -123,7 +123,7 @@ $carMakes = [
<div>
<label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_trim">Trim</label>
<select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_trim" name="vehicle_search_trim">
<option value="" disabled="" selected="">Select Trim</option>
<option value="" disabled="" selected="">All Trims</option>
<!-- <option value="LE">LE</option>
<option value="EX">EX</option>
<option value="XLT">XLT</option>

79
autocart_assets/templates/single-appointment.php Normal file
View File

@@ -0,0 +1,79 @@
<?php
/*
Template Name: Appointment Page
*/
get_header();
// The Loop
if (have_posts()) {
while (have_posts()) {
the_post();
$post_meta = get_post_meta(get_the_ID(), '', true);
?>
<main id="content-container" class="overflow-scroll no-scrollbar">
<div class="max-w-7xl mx-auto">
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<div id="appointment-body"></div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
let rawVehicleDetails = <?php echo json_encode($post_meta); ?>;
let postDetails = {};
for (let key in rawVehicleDetails) {
if (rawVehicleDetails.hasOwnProperty(key)) {
if (key === 'vehicle' && rawVehicleDetails[key][0]) {
postDetails[key] = JSON.parse(rawVehicleDetails[key][0]);
} else {
postDetails[key] = rawVehicleDetails[key][0] || null;
}
}
}
const appointmentForm = new AppointmentForm(postDetails.vehicle);
if(appointmentForm){
const financeForm = new FinanceForm(postDetails.vehicle, appointmentForm, ()=>{});
const appointmentBody = document.querySelector('#appointment-body');
let userForm = financeForm.initForm();
const elementsToRemove = userForm.querySelectorAll('.finance-view-only');
elementsToRemove.forEach(element => {
element.remove();
});
appointmentBody.appendChild(userForm);
const allInputs = [...appointmentForm.inputs, ...financeForm.inputs ]
allInputs.forEach(input=>{
const inputElement = userForm.querySelector(`#${input}`);
if (inputElement) {
inputElement.value = postDetails[input] || 0;
inputElement.dispatchEvent(new Event('input'));
inputElement.disabled = true;
}
})
financeForm.updateView();
}
});
</script>
<?php
}
} else {
echo 'Appointment not found.';
}
get_footer();

38
autocart_assets/templates/single-vehicle.php
View File

@@ -106,9 +106,16 @@ if ($vehicle_id) {
if (!is_wp_error($similar_vehicles_response) && wp_remote_retrieve_response_code($similar_vehicles_response) === 200) {
$similar_vehicles = json_decode(wp_remote_retrieve_body($similar_vehicles_response), true);
$filtered_vehicles = array_filter($similar_vehicles, function ($vehicle) use ($vehicle_details) {
return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
});
if (is_array($similar_vehicles)) {
$filtered_vehicles = array_filter($similar_vehicles, function ($vehicle) use ($vehicle_details) {
return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
});
} else {
$filtered_vehicles = array_filter([], function ($vehicle) use ($vehicle_details) {
return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
});
}
// echo '<pre>';
// print_r($filtered_vehicles);
@@ -480,9 +487,29 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
<?php
get_footer();
// Extracting necessary details
$importantDetails = array(
'title' => $vehicle_details['year'] . ' ' . $vehicle_details['make'] . ' ' . $vehicle_details['model'] . ' ' . $vehicle_details['trim'] . ' - ' . $vehicle_details['exterior_color'] . ' ' . $vehicle_details['interior_color'],
'id_vehicle' => $vehicle_details['id_vehicle'],
'advertise_price'=> $vehicle_details['advertise_price']
);
// Encoding important details as JSON
$importantDetailsJSON = json_encode($importantDetails);
?>
<script>
// Assigning important details JSON to a JavaScript variable
const appointmentVehicle = <?php echo $importantDetailsJSON; ?>;
// Creating a new object to merge with appointment form data
const mergedDetails = {
image_title: <?php echo json_encode($vehicle_images[0]['url']); ?>,
...appointmentVehicle
};
// modal
const handleFinanceChanges = (financeForm) => {
if (document.querySelectorAll('.paymentSpan').length) {
@@ -515,8 +542,8 @@ get_footer();
};
const vehicleDetails = <?php echo json_encode($vehicle_details); ?>;
const appointmentForm = new AppointmentForm();
const financeForm = new FinanceForm(vehicleDetails, handleFinanceChanges);
const appointmentForm = new AppointmentForm(mergedDetails);
const financeForm = new FinanceForm(vehicleDetails, appointmentForm, handleFinanceChanges);
const modal = new Modal(<?php echo $vehicle_id ?>);
document.body.appendChild(modal.initModal());
@@ -586,7 +613,6 @@ get_footer();
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var filters = JSON.parse(decodeURIComponent(urlParams.get('filters')));
console.log(filters);
setFeatureImage(0);
const accordionHeaders = document.querySelectorAll('[data-accordion-target]');
accordionHeaders.forEach(header => {