finance form template displayed

assets/css/styles.css

@@ -2017,10 +2017,6 @@ select {
   bottom: 100%;
 }
 
-.left-0 {
-  left: 0px;
-}
-
 .left-2 {
   left: 0.5rem;
 }
@@ -2777,6 +2773,11 @@ html {
   background-color: rgb(89 10 12/var(--tw-bg-opacity));
 }
 
+.hover\:bg-stone-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(214 211 209/var(--tw-bg-opacity));
+}
+
 .hover\:bg-stone-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(120 113 108/var(--tw-bg-opacity));
@@ -2787,21 +2788,6 @@ html {
   background-color: rgb(87 83 78/var(--tw-bg-opacity));
 }
 
-.hover\:bg-stone-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244/var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228/var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(214 211 209/var(--tw-bg-opacity));
-}
-
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255/var(--tw-text-opacity));

autocart_assets/css/filter-panel.css

@@ -209,7 +209,7 @@ li.mdc-list-item:hover {
 
 #slide-out-filters{
   transition: 300ms ease-in-out;
-    translate: -100%;
+    /* translate: -100%; */
     
 }
 
@@ -238,4 +238,12 @@ li.mdc-list-item:hover {
   .sticky-container{
     position: static;
   }
+/* 
+  #applied-filters-container{
+    position: fixed;
+    bottom: 0px;
+    z-index: 50;
+    width: 100%;
+    right: 0;
+  } */
 }

autocart_assets/js/FinanceForm.js

@@ -19,6 +19,11 @@ class FinanceForm {
       52: 'Weekly',
     };
 
+    if (!vehicle.advertise_price) {
+      vehicle['advertise_price'] = 0;
+      this.inputs.push('advertise_price')
+    }
+
     this.vehicle = vehicle;
 
     // Default values
@@ -91,16 +96,28 @@ class FinanceForm {
   } else {
       return '';
   }
-  }
+}
 
+  generateAdvertisePriceInput(){
+    return (this.vehicle.advertise_price == 0) ? `<div>
+    <label for="advertise_price" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Vehicle price</label>
+      <div class="flex">
+        <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 rounded-l-lg">
+          <i class="fas fa-dollar-sign"></i>
+        </span>
+        <input type="number" value="25000" id="advertise_price" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-r-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">
+      </div>
+  </div>` : '';
+  }
 
   initForm() {
     // console.log('initForm')
     this.modalDiv = document.createElement('div');
     const currentYear = new Date().getFullYear();
-      const vehicleYear = this.vehicle.year;
+    const vehicleYear = this.vehicle.year || 2024;
     const vehicleAge = currentYear - vehicleYear;
     const loanTermOptions = this.generateLoanTermOptions(vehicleAge);
+    const advertise_price = this.generateAdvertisePriceInput()
 
     // const modalDiv = document.createElement('div');
     this.modalDiv.innerHTML = `
@@ -150,6 +167,8 @@ class FinanceForm {
                                     </div>
                                 </div>
 
+                                ${advertise_price}
+                                
                                 <div>
                                 <label for="tradeValue" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Vehicle Trade-in</label>
                                     <div class="flex">
@@ -215,7 +234,7 @@ class FinanceForm {
                     <ul class="transmission-container list-none text-gray-900 w-48  text-sm font-medium rounded-lg  w-full">
                         <li class="w-full flex items-center  flex-wrap justify-between items-start flex-row w-full rounded-t-lg  flex items-center justify-between transition duration-400 autocart-filters">
                             <span class="text-sm font-medium text-gray-900 dark:text-gray-300 transition duration-400  font-normal text-base">Vehicle Price</span>
-                              <span class="autocart_count text-gray-500 ml-2 transition duration-400 font-normal text-base">
+                            <span class="autocart_count advertisePriceSpan text-gray-500 ml-2 transition duration-400 font-normal text-base">
                                 ${this.vehicle.advertise_price.toLocaleString('en-CA', { style: 'currency', currency: 'CAD', minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                             </span>
                         </li>
@@ -227,7 +246,7 @@ class FinanceForm {
                     <ul class="transmission-container list-none text-gray-900 w-48  text-sm font-medium rounded-lg  w-full">
                         <li class="w-full flex items-center  flex-wrap justify-between items-start flex-row w-full rounded-t-lg  flex items-center justify-between transition duration-400 autocart-filters">
                             <span class="text-sm font-medium text-gray-900 dark:text-gray-300 transition duration-400  font-normal text-base">Finance Total</span>
-                              <span class="autocart_count text-gray-500 ml-2 transition duration-400 font-normal text-base">
+                            <span class="autocart_count advertisePriceSpan text-gray-500 ml-2 transition duration-400 font-normal text-base">
                                 ${this.vehicle.advertise_price.toLocaleString('en-CA', { style: 'currency', currency: 'CAD', minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                             </span>
                         </li>
@@ -339,10 +358,14 @@ class FinanceForm {
         }
     }
     this.updateView();
-  }
+}
 
   calculatePayments() {
+    
     var vehiclePrice = this.vehicle.advertise_price;
+    if(this.inputs.includes('advertise_price')){
+      vehiclePrice = document.getElementById('advertise_price').value;
+    }
     this.loanTerm = document.getElementById('loanTerm').value;
     this.paymentFrequency = document.getElementById('paymentFrequency').value;
     this.intRate = document.getElementById('rate').value == 'default-rate'
@@ -388,8 +411,7 @@ class FinanceForm {
       document.getElementById(el)?.classList?.add('hidden');
     });
     if(document.getElementById('rate')){
-        document
+      document.getElementById(document.getElementById('rate').value)
-        .getElementById(document.getElementById('rate').value)
       .classList.remove('hidden');
     }
    
@@ -430,6 +452,17 @@ class FinanceForm {
       });
     }
 
+    if (document.querySelectorAll('.advertisePriceSpan').length) {
+      document.querySelectorAll('.advertisePriceSpan').forEach((el) => {
+        el.innerHTML = (Number(document.getElementById('advertise_price').value) || 0).toLocaleString(
+          'en-CA',
+          { style: 'currency', currency: 'CAD' }
+        );
+      });
+    }
+
+
+
     if (document.querySelectorAll('.totalObligationSpan').length) {
       document.querySelectorAll('.totalObligationSpan').forEach((el) => {
         el.innerHTML = (Number(this.totalObligation) || 0).toLocaleString(
@@ -519,5 +552,4 @@ class FinanceForm {
 
     localStorage.setItem(`autocart_${this.name}`, JSON.stringify(formValues));
   }
-  }
+}
-  

autocart_assets/js/index.js

@@ -11,14 +11,14 @@ let modelFilter = [];
 let makeFilters;
 function sendReq() {
     var formData = {
-    action: 'handle_autocart_form',
+        'action': 'handle_autocart_form',
-    minPrice: price.getValueStart(),
+        'minPrice': price.getValueStart(),
-    maxPrice: price.getValue(),
+        'maxPrice': price.getValue(),
-    minKilometres: kilometres.getValueStart(),
+        'minKilometres': kilometres.getValueStart(),
-    maxKilometres: kilometres.getValue(),
+        'maxKilometres': kilometres.getValue(),
-    minYear: year.getValueStart(),
+        'minYear':  year.getValueStart(),
-    maxYear: year.getValue(),
+        'maxYear':  year.getValue(),
-    autocart_nonce: jQuery('#autocart_nonce').val(),
+        'autocart_nonce': jQuery('#autocart_nonce').val(),
     };
     const vehiclesContainer = document.querySelector('.vehicles-container');
     // vehiclesContainer.textContent = 'Loading...';
@@ -47,6 +47,7 @@ function sendReq() {
                 dataStore.unsubscribeAll();
             }
 
+          
             // Initialize new data store
             dataStore.vehicles = vehicles;
             filterManager = new FilterManager(dataStore);
@@ -56,8 +57,8 @@ function sendReq() {
             // appliedFilters = new AppliedFilters(dataStore, filterManager);
             
             shouldUpdateFilters = true;
-      dataStore.subscribe((filteredVehicles) => {
+            dataStore.subscribe(filteredVehicles => {
-        console.log('dataStore has been changed');
+                console.log('dataStore has been changed')
                 handleSuccess(filteredVehicles);
             });
 
@@ -67,13 +68,13 @@ function sendReq() {
             console.log(xhr.responseText);
             console.log('Status: ' + status);
             console.log('Error: ' + error);
-      jQuery('#inventory-search__search-button').text('Error');
+            jQuery("#inventory-search__search-button").text("Error");
-    },
+        }
     });
 }
 
 function handleSuccess(vehicles, updateFilters = shouldUpdateFilters) {
-  if (updateFilters) {
+    if(updateFilters){
        createMakeList(vehicles);
        createBodyTypeList(vehicles);
        createTransmissionList(vehicles);
@@ -82,14 +83,18 @@ function handleSuccess(vehicles, updateFilters = shouldUpdateFilters) {
     const vehiclesContainer = document.querySelector('.vehicles-container');
     vehiclesContainer.innerHTML = '';
     
-  vehicles.forEach((vehicleData) => {
+    vehicles.forEach(vehicleData => {
         const vehicle = new VehicleThumbnail(vehicleData);
         // vehiclesContainer.appendChild(vehicle.generateCardHTML());
         vehiclesContainer.appendChild(vehicle.generateCardElement());
+
     });
+
+    
 }
 
-function createMakeList(vehicles) {
+function createMakeList(vehicles){
+
     const makeContainer = document.querySelector('.make-container');
     makeContainer.innerHTML = '';
 
@@ -104,24 +109,23 @@ function createMakeList(vehicles) {
 	// 	// dataStore.addFilter('make', makeValue);
 	// }
     makeFilters = Object.entries(makeCounts).map(([make, count]) => {
-    return filterManager.createMakeFilter(
+   
-      {
+        return filterManager.createMakeFilter({
             text: make,
             checked: makeValue.toLowerCase() === make.toLowerCase(),
             count, 
-        models: fetchAvailableModels(vehicles, make),
+            models: fetchAvailableModels(vehicles, make) 
-      },
+        }, dataStore);
-      dataStore
-    );
     });
     makeFilters.sort((a, b) => a.value.localeCompare(b.value));
-  makeFilters.forEach((make) => {
+    makeFilters.forEach(make => {
+        
         makeContainer.appendChild(make.generateCardHTML());
-    make.subscribe((m) => initModelContainer(m));
+        make.subscribe(m=> initModelContainer(m))
     });
 }
 
-function createBodyTypeList(vehicles) {
+function createBodyTypeList(vehicles){
     const bodyTypeContainer = document.querySelector('.body-type-container');
     bodyTypeContainer.innerHTML = '';
 
@@ -133,20 +137,17 @@ function createBodyTypeList(vehicles) {
 
     filterManager.resetList('body_type');
     
-  bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) =>
+
-    filterManager.createBodyTypeFilter({ text: body_type, count }, dataStore)
+    bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) => filterManager.createBodyTypeFilter({ text: body_type, count}, dataStore));
-  );
     bodyTypeFilters.sort((a, b) => a.value.localeCompare(b.value));
-  bodyTypeFilters.forEach((body_type) => {
+    bodyTypeFilters.forEach(body_type => {
         bodyTypeContainer.appendChild(body_type.initCheckbox());
         // body_type.subscribe(m=> iniBodyTypeContainer(m))
     });
 }
 
-function createTransmissionList(vehicles) {
+function createTransmissionList(vehicles){
-  const transmissionContainer = document.querySelector(
+    const transmissionContainer = document.querySelector('.transmission-container');
-    '.transmission-container'
-  );
     
     transmissionContainer.innerHTML = '';
 
@@ -157,20 +158,14 @@ function createTransmissionList(vehicles) {
     }, {});
 
     filterManager.resetList('transmission_type');
-  transmissionFilters = Object.entries(transmission).map(
+    transmissionFilters = Object.entries(transmission).map(([transmission_type, count]) => filterManager.createTransmissionFilter({ text: transmission_type, count}, dataStore));
-    ([transmission_type, count]) =>
-      filterManager.createTransmissionFilter(
-        { text: transmission_type, count },
-        dataStore
-      )
-  );
     transmissionFilters.sort((a, b) => a.value.localeCompare(b.value));
-  transmissionFilters.forEach((transmission) => {
+    transmissionFilters.forEach(transmission => {
         transmissionContainer.appendChild(transmission.initCheckbox());
     });
 }
 
-function createExteriorList(vehicles) {
+function createExteriorList(vehicles){
     console.log(vehicles);
     const exteriorContainer = document.querySelector('.exterior-color');
     exteriorContainer.innerHTML = '';
@@ -181,28 +176,17 @@ function createExteriorList(vehicles) {
     }, {});
     filterManager.resetList('exterior_color');
 
-  exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) =>
+    exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) => filterManager.createExteriorFilter({ text: exterior_color, count}, dataStore));
-    filterManager.createExteriorFilter(
-      { text: exterior_color, count },
-      dataStore
-    )
-  );
     exteriorFilters.sort((a, b) => a.value.localeCompare(b.value));
 
-  exteriorFilters.forEach((exterior) => {
+    exteriorFilters.forEach(exterior => {
         exteriorContainer.appendChild(exterior.initCheckbox());
     });
 }
 
-function initModelContainer(make) {
+
-  let list = [
+function initModelContainer(make){
-    ...new Set(
+    let list = [...new Set(filterManager.makeFilters.filter(m=>m.checked == true).map(m=>m.models).flat())];
-      filterManager.makeFilters
-        .filter((m) => m.checked == true)
-        .map((m) => m.models)
-        .flat()
-    ),
-  ];
 
     const modelContainer = document.querySelector('.model-container');
     if (list.length === 0) {
@@ -210,7 +194,7 @@ function initModelContainer(make) {
     } else if (list && list.length > 0) {
         modelContainer.innerHTML = '';
         list.sort((a, b) => a.value.localeCompare(b.value));
-    list.forEach((model) => {
+        list.forEach(model => {
             modelContainer.appendChild(model.initCheckbox());
         });
     } else {
@@ -218,15 +202,8 @@ function initModelContainer(make) {
     }
 }
 
-function initTrimContainer(model) {
+function initTrimContainer(model){
-  let list = [
+    let list = [...new Set(filterManager.modelFilters.filter(m=>m.checked == true).map(m=>m.trims).flat())];
-    ...new Set(
-      filterManager.modelFilters
-        .filter((m) => m.checked == true)
-        .map((m) => m.trims)
-        .flat()
-    ),
-  ];
 
     // const uniqueArray = [...new Set(array)];
     const trimContainer = document.querySelector('.trim-container');
@@ -236,7 +213,7 @@ function initTrimContainer(model) {
     } else if (list && list.length > 0) {
         trimContainer.innerHTML = '';
         list.sort((a, b) => a.value.localeCompare(b.value));
-    list.forEach((trim) => {
+        list.forEach(trim => {
             trimContainer.appendChild(trim.initCheckbox());
         });
     } else {
@@ -246,8 +223,8 @@ function initTrimContainer(model) {
 
 function fetchAvailableModels(vehicles, make) {
     const filteredModels = vehicles
-    .filter((vehicle) => vehicle.make === make)
+        .filter(vehicle => vehicle.make === make)
-    .map((vehicle) => vehicle.model);
+        .map(vehicle => vehicle.model);
     // Count occurrences of each model
     const modelCounts = filteredModels.reduce((acc, model) => {
         acc[model] = (acc[model] || 0) + 1;
@@ -255,21 +232,16 @@ function fetchAvailableModels(vehicles, make) {
     }, {});
 
     // Convert to an array of objects
-  const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({
+    const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({ model, count }));
-    model,
+    modelsArray.map(m=>m['trims'] = fetchAvailableTrim(vehicles, m.model))    
-    count,
-  }));
-  modelsArray.map((m) => (m['trims'] = fetchAvailableTrim(vehicles, m.model)));
     return modelsArray;
 }
 
-function fetchAvailableTrim(vehicles, modelName) {
+function fetchAvailableTrim(vehicles, modelName){
-  const filteredVehicles = vehicles.filter(
+    const filteredVehicles = vehicles.filter(vehicle => vehicle.model === modelName);
-    (vehicle) => vehicle.model === modelName
-  );
     const trimCount = filteredVehicles.reduce((result, vehicle) => {
-    vehicle.trim.forEach((trim) => {
+        vehicle.trim.forEach(trim => {
-      const existingTrim = result.find((item) => item.text === trim);
+            const existingTrim = result.find(item => item.text === trim);
             if (existingTrim) {
                 existingTrim.count += 1;
             } else {
@@ -281,10 +253,12 @@ function fetchAvailableTrim(vehicles, modelName) {
     return trimCount;
 }
 
-function updateModel(models) {
+function updateModel(models){
-  console.log('updateModel', models);
+    console.log('updateModel', models)
 }
 
+
+
 function debounce(func, delay) {
     let timeout;
     return function () {
@@ -300,9 +274,7 @@ function updatePrice() {
     const max = price.getValue();
     const formattedMin = '$' + min.toLocaleString();
     const formattedMax = '$' + max.toLocaleString();
-  document.getElementById(
+    document.getElementById('priceRange').textContent = `${formattedMin} to ${formattedMax}`;
-    'priceRange'
-  ).textContent = `${formattedMin} to ${formattedMax}`;
     debouncedSendReq();
 }
 
@@ -325,12 +297,7 @@ const debouncedSendReq = debounce(sendReq, 300);
 
 function createSkeletonCard() {
     const skeletonCard = document.createElement('div');
-  skeletonCard.classList.add(
+    skeletonCard.classList.add('bg-red-200', 'rounded-lg', 'shadow-md', 'animate-pulse');
-    'bg-red-200',
-    'rounded-lg',
-    'shadow-md',
-    'animate-pulse'
-  );
   
     const innerHTML = `
       <div class="h-40 bg-red-300 rounded-t-lg"></div>
@@ -346,17 +313,12 @@ function createSkeletonCard() {
     skeletonCard.innerHTML = innerHTML;
   
     return skeletonCard;
-}
+  }
+
 
 function createSkeletonListItem() {
     const listItem = document.createElement('li');
-  listItem.classList.add(
+    listItem.classList.add('w-full', 'bg-custom-red', 'rounded-lg', 'shadow-md', 'animate-pulse');
-    'w-full',
-    'bg-custom-red',
-    'rounded-lg',
-    'shadow-md',
-    'animate-pulse'
-  );
 
     const innerHTML = `
     <div class="flex items-center   justify-between p-1">

autocart_assets/templates/autocart-results.php

@@ -34,6 +34,8 @@ $response = get_transient("autocart_response");
 <!-- Main Content -->
 <div class="flex-grow flex max-w-7xl mx-auto">
 	<!-- Left Drawer for Filters -->
+	<div id="overlay" class="fixed inset-0 bg-black opacity-50 z-50 hidden"></div>
+
 	<aside id="slide-out-filters" class="lg:w-1/4  md:w-1/4 w-10/12 lg:static md:static fixed p-4 shadow-lg bg-white  lg:block md:block  rounded overflow-y-auto transition duration-300 ease-in-out transform sm:transform-none sm:right-0 top-0 left-0 z-50 h-screen md:h-auto lg:h-auto">
 		<div class="mdc-select mdc-select--outlined col-xl-3 rounded  pb-2 w-full" id="order-by">
 			<div class="mdc-select__anchor">
@@ -237,7 +239,7 @@ $response = get_transient("autocart_response");
             <div class="flex items-center space-x-4">
                 <i id="grid-view" class="fas fa-th text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110 hover:shadow-md ripple selected"></i>
                 <i id="list-view" class="fas fa-list text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110 hover:shadow-md ripple"></i>
-				<label for="open-menu" tabindex="0" aria-haspopup="true" role="button"	aria-controls="menu" class="fixed bottom-4 right-4 cursor-pointer m-0 md:hidden lg:hidden" id="openmenu">
+				<label for="open-menu" tabindex="0" aria-haspopup="true" role="button"	aria-controls="menu" class="cursor-pointer m-0 md:hidden lg:hidden" id="openmenu">
 					<i id="filter-toggle" class="fas fa-sliders-h text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110"></i>
 				</label>
 				<input type="checkbox" data-menu id="open-menu" class="peer hidden">
@@ -263,6 +265,8 @@ if ($make) {
 const filtersDrawerCheckbox = document.getElementById('open-menu');
 const filtersDrawer = document.querySelector('#slide-out-filters');
 const filterToggle = document.querySelector('#filter-toggle');
+const overlay = document.getElementById('overlay');
+
 document.addEventListener('DOMContentLoaded', function () {
 	
     price = new mdc.slider.MDCSlider(document.querySelector('#autocart-price-range-field'));
@@ -294,23 +298,46 @@ document.addEventListener('DOMContentLoaded', function () {
 			// content.style.display = content.style.display === "none" ? "block" : "none";
 		});
 	});
+	// filtersDrawer.style.translate = "-100%";
+
+	const mobileMediaQuery = window.matchMedia('(max-width: 767px)');
+    
+    const applyTranslation = () => {
+        if (mobileMediaQuery.matches) {
+            filtersDrawer.style.translate = '-100%';
+        } else {
+			filtersDrawerCheckbox.checked = false;
+			filtersDrawerCheckbox.dispatchEvent(new Event('change'));
+            filtersDrawer.style.translate = '0';
+			
+        }
+    };
+
+    applyTranslation();
+    mobileMediaQuery.addListener(applyTranslation);
+	// window.addEventListener('resize', applyTranslation);
+
 
 });
 
 
 filtersDrawerCheckbox.addEventListener('change', function() {
 	if (this.checked) {
+		overlay.classList.remove('hidden');
 		filtersDrawer.style.translate = 0;
-	filterToggle.classList.add('selected')
+		filterToggle.classList.add('selected');
-	
 	} else {
-    // filtersDrawer.classList.add('hidden'); // Close the drawer
+		overlay.classList.add('hidden');
 		filterToggle.classList.remove('selected')
 		filtersDrawer.style.translate = "-100%";
 		
-
 	}
 });
+overlay.addEventListener('click', function() {
+	
+	filtersDrawerCheckbox.checked = false;
+    filtersDrawerCheckbox.dispatchEvent(new Event('change'));
+});
 
 
 </script>

autocart_assets/templates/search-form.php

@@ -193,10 +193,10 @@ $carMakes = [
 
         <?php wp_nonce_field('autocart_nonce', 'autocart_nonce'); ?>
 
-        <div class="col-span-2">
+        <div class="lg:col-span-2">
             <button type="submit" aria-label="Find Your Vehicle Search" class="w-full bg-red-500 hover:bg-red-800 transition-colors duration-300 text-white font-medium py-2 px-4 flex flex-row flex-wrap content-around justify-center items-center rounded" id="inventory-search-button">
                 <i class="bi-search mr-2"></i>
-                <span id="button-content">Search </span>
+                <span id="button-content" >Search </span>
                 <span class="btn-ring hidden"></span>
 
             </button>
@@ -381,7 +381,7 @@ $carMakes = [
             success: function(response) {
                 loading.classList.add('hidden'); // Hide the btn-ring on success
 
-                if (response.success) {
+                if(response.success){
                     const vehicles = response.data.vehicles;
                     if (inputs) {
                         inputs.forEach(element => {
@@ -389,7 +389,7 @@ $carMakes = [
                         });
                     }
                     jQuery(" #button-content").text("Search (" + vehicles.length + ")");
-                } else {
+                }else{
                     alert(response.data.message);
                     jQuery(" #button-content").text("Search");
 

autocart_assets/templates/single-vehicle.php

@@ -174,7 +174,7 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
 ?>
 
 <div class="max-w-7xl mx-auto grid">
-    <div class="grid grid-cols-2 hidden lg:grid">
+    <div class="grid grid-cols-2 hidden md:grid">
 
         <div class="relative group cursor-pointer">
             <img src="<?php echo $vehicle_images[0]['url']; ?>" alt="<?php echo $image_title; ?>" class="w-full h-full object-cover">

page-car-loan-calculator.php

@@ -16,16 +16,48 @@
 <!-- Car Loan Calculator Form -->
 <section class="max-w-7xl mx-auto">
 
-  <div class="py-8 flex items-center justify-center">
+  <div class="px-4 py-8">
     <div>
-      <p style="width: 260px"><a href="http://www.carpaymentcalcualtor.net"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/rogers-motors-logo.png" alt="Rogers Motors Full Logo" /></a></p>
+      <p style="width: 300px"><a href="http://www.carpaymentcalcualtor.net"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/rogers-motors-logo.png" alt="Rogers Motors Full Logo" /></a></p>
-      <p style="width: 260px"><iframe src="https://www.carpaymentcalculator.net/free-tools/calc.php" frameborder="0" height="350px" scrolling="no"></iframe></p>
+      <div id="appointment-body"></div>
-      <p>
-        <font size="1">Powered by <a href="https://www.carpaymentcalculator.net/free-tools/">Free Auto Calculator</a></font>
-      </p>
     </div>
   </div>
 
+
+  <style>
+    button#next-step,
+    [data-tab] {
+      display: none;
+    }
+  </style>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const appointmentForm = new AppointmentForm();
+      if (appointmentForm) {
+        const financeForm = new FinanceForm({}, 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);
+
+
+        financeForm.updateView();
+        const advertisePriceInput = document.getElementById('advertise_price');
+        advertisePriceInput.value = 2500;
+        advertisePriceInput.dispatchEvent(new Event('input', {
+          bubbles: true
+        }));
+
+      }
+    });
+  </script>
+
 </section>
 
 

src/scss/vendors/tailwind/_tailwind.scss

@@ -1273,10 +1273,6 @@ select {
   bottom: 100%;
 }
 
-.left-0 {
-  left: 0px;
-}
-
 .left-2 {
   left: 0.5rem;
 }
@@ -2050,6 +2046,11 @@ html {
   background-color: rgb(89 10 12 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-stone-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-stone-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(120 113 108 / var(--tw-bg-opacity));
@@ -2060,21 +2061,6 @@ html {
   background-color: rgb(87 83 78 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-stone-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
-}
-
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));