diff --git a/assets/css/styles.css b/assets/css/styles.css index 5121fed..b28145e 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -256,6 +256,18 @@ textarea { background-color: var(--gray-100) !important; } +button:disabled { + background-color: var(--gray-200); + color: black; + cursor: not-allowed; +} + +button:disabled:hover { + background-color: var(--gray-500); + color: white; + cursor: not-allowed; +} + .toggle-menu { height: 40px; display: flex; @@ -690,7 +702,7 @@ body.login { text-decoration: underline; } -.menu-item:hover { +#menu-main-menu .menu-item:hover { background-color: var(--primary-500); color: #fff; } @@ -705,6 +717,10 @@ body.login { font-size: 12px; /* Adjust the size as needed */ } +.menu-item-has-children:hover > a:after { + color: #fff; /* Change the color as needed */ +} + /* Hide sub-menu items by default */ .sub-menu { width: max-content; @@ -2308,6 +2324,10 @@ select { border-width: 8px; } +.border-b-2 { + border-bottom-width: 2px; +} + .border-t { border-top-width: 1px; } @@ -2316,10 +2336,6 @@ select { border-top-width: 4px; } -.border-b-2 { - border-bottom-width: 2px; -} - .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219/var(--tw-border-opacity)); diff --git a/autocart_assets/js/AppointmentForm.js b/autocart_assets/js/AppointmentForm.js index fa565fa..0bd0120 100644 --- a/autocart_assets/js/AppointmentForm.js +++ b/autocart_assets/js/AppointmentForm.js @@ -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 = ``; inputIds.forEach((input) => { checkboxes += `
@@ -38,38 +48,41 @@ class AppointmentForm {
`; }); this.modalDiv.innerHTML = ` -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- ${checkboxes} - - - + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + +
+
+ ${vehicleInput} + ${checkboxes} +
`; @@ -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; + } } \ No newline at end of file diff --git a/autocart_assets/js/FinanceForm.js b/autocart_assets/js/FinanceForm.js index 1c39e57..6c94fda 100644 --- a/autocart_assets/js/FinanceForm.js +++ b/autocart_assets/js/FinanceForm.js @@ -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 => ``).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 = `
@@ -90,8 +124,8 @@ class FinanceForm {
-

Let’s Structure a Deal That Works For You

-

+

Let’s Structure a Deal That Works For You

+

We understand that purchasing a vehicle is a big decision, so we want you to be paying a price that you’re comfortable with. Let’s structure a deal that works for you below:

@@ -128,13 +162,7 @@ class FinanceForm {
@@ -169,9 +197,9 @@ class FinanceForm {
- +
`; - 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; diff --git a/autocart_assets/js/Modal.js b/autocart_assets/js/Modal.js index 977bd64..19f4d7b 100644 --- a/autocart_assets/js/Modal.js +++ b/autocart_assets/js/Modal.js @@ -93,6 +93,6 @@ class Modal { } } document.addEventListener('DOMContentLoaded', function () { - console.log('modal is here'); + }); \ No newline at end of file diff --git a/autocart_assets/templates/search-form.php b/autocart_assets/templates/search-form.php index 259a9bd..525a23f 100644 --- a/autocart_assets/templates/search-form.php +++ b/autocart_assets/templates/search-form.php @@ -78,7 +78,7 @@ $carMakes = [
- + -
- -

Single Post Template

+
+
+ +
diff --git a/src/index.js b/src/index.js index 35596ca..22522ea 100644 --- a/src/index.js +++ b/src/index.js @@ -12,5 +12,4 @@ import TestModule from "./modules/TestModule" const collapsePanel = new CollapsePanel() const customRangeSlider = new CustomRangeSlider() const navControl = new NavControl() -const testModule = new TestModule() -console.log('Hello') \ No newline at end of file +const testModule = new TestModule() \ No newline at end of file diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss index 5333d46..988d67d 100644 --- a/src/scss/base/_base.scss +++ b/src/scss/base/_base.scss @@ -124,3 +124,15 @@ select, textarea { background-color: var(--gray-100) !important; } + +button:disabled { + background-color: var(--gray-200); + color: black; + cursor: not-allowed; +} + +button:disabled:hover { + background-color: var(--gray-500); + color: white; + cursor: not-allowed; +} diff --git a/src/scss/vendors/_wordpress.scss b/src/scss/vendors/_wordpress.scss index 4b840f2..98c31d5 100644 --- a/src/scss/vendors/_wordpress.scss +++ b/src/scss/vendors/_wordpress.scss @@ -116,7 +116,7 @@ body.login { text-decoration: underline; } -.menu-item:hover { +#menu-main-menu .menu-item:hover { background-color: var(--primary-500); color: #fff; } @@ -131,6 +131,10 @@ body.login { font-size: 12px; /* Adjust the size as needed */ } +.menu-item-has-children:hover > a:after { + color: #fff; /* Change the color as needed */ +} + /* Hide sub-menu items by default */ .sub-menu { width: max-content; diff --git a/src/scss/vendors/tailwind/_tailwind.scss b/src/scss/vendors/tailwind/_tailwind.scss index 2c273af..f55a88c 100644 --- a/src/scss/vendors/tailwind/_tailwind.scss +++ b/src/scss/vendors/tailwind/_tailwind.scss @@ -1580,6 +1580,10 @@ select { border-width: 8px; } +.border-b-2 { + border-bottom-width: 2px; +} + .border-t { border-top-width: 1px; } @@ -1588,10 +1592,6 @@ select { border-top-width: 4px; } -.border-b-2 { - border-bottom-width: 2px; -} - .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity));