finance form template displayed

assets/css/styles.css

@@ -2017,10 +2017,6 @@ select {
   bottom: 100%;
 }
 
-.left-0 {
-  left: 0px;
-}
-
 .left-2 {
   left: 0.5rem;
 }
@@ -2560,11 +2556,6 @@ select {
   line-height: 1;
 }
 
-.text-7xl {
-  font-size: 4.5rem;
-  line-height: 1;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -2782,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));

autocart_assets/css/filter-panel.css

@@ -95,3 +95,155 @@ li.autocart-filters:hover {
 .sticky-container{
     position: sticky;
 }
+.bg-custom-red {
+    background-color: rgb(150 29 32 / 10%);
+  }
+  
+  .bg-custom-red-light {
+    background-color: rgb(217 72 74 / 50%);
+
+  }
+  
+  .bg-custom-red-opacity {
+    background-color: rgb(150 29 32 / 30%);
+  }
+
+  .mdc-list-item {
+    height: 48px;
+    display: -ms-flexbox;
+    display: flex;
+    position: relative;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    padding: 0 16px;
+    overflow: hidden;
+}
+.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
+    color: var(--mdc-theme-primary) !important;
+}
+li.mdc-list-item:hover {
+  background-color:var(--mdc-theme-primary);
+  color: #fff;
+}
+
+
+.btn-process {
+    font-size: 2rem;
+    font-family: 'Montserrat', sans-serif;
+    background-color: #256EFF;
+    box-shadow: 0px 15px 27px 2px rgba(37, 110, 255, 0.28);
+    border: none;
+    outline: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 1rem 3rem;
+    border-radius: 1rem;
+    color: #fff;
+    cursor: pointer;
+  }
+  
+  .btn-ring:after {
+    content: "";
+    display: block;
+    width: 25px;
+    height: 25px;
+    margin: 0 8px;
+    border-radius: 50%;
+    border: 3px solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: ring 1.2s linear infinite;
+  }
+  
+  @keyframes ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .btn-ring.loading {
+    display: inline-block;
+  }
+  
+  .loading .btn-ring {
+    display: block;
+  }
+
+  .ac-accordion-content {
+    padding: 10px;
+    display: block; /* Start with display: block to ensure proper height transition */
+    overflow: hidden; /* Hide overflowing content */
+    transition: height 0.3s ease; /* Add transition for height */
+}
+
+.collapsed .ac-accordion-content {
+    height: 0; /* Collapse the content by setting height to 0 */
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: height 0.3s ease; /* Add transition for height */
+}
+
+
+.order-mobile-first {
+  order: 2;
+}
+
+.order-mobile-second {
+  order: 1;
+}
+
+/* Web Order (Normal order on larger screens) */
+.order-web-first {
+  order: 1;
+}
+
+.order-web-second {
+  order: 2;
+}
+
+#slide-out-filters{
+  transition: 300ms ease-in-out;
+    /* translate: -100%; */
+    
+}
+
+/* Styles for screens wider than 768px (web view) */
+@media screen and (min-width: 768px) {
+  .container {
+    width: 70%;
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  #slide-out-filters{
+      translate: 0;
+      translate: 0px;
+      position: static;
+      z-index: 40;
+      width: 25%;
+  }
+}
+
+/* Styles for screens narrower than 768px (mobile view) */
+@media screen and (max-width: 768px) {
+  .sticky-container{
+    position: static;
+  }
+/* 
+  #applied-filters-container{
+    position: fixed;
+    bottom: 0px;
+    z-index: 50;
+    width: 100%;
+    right: 0;
+  } */
+}

autocart_assets/js/DataStore.js

@@ -83,4 +83,47 @@ class DataStore {
         this.notifySubscribers();
     }
 
+    sortByFinance(order) {
+        this.vehicles.sort((a, b) => {
+            const aValue = this.calculateFinance(a);
+            const bValue = this.calculateFinance(b);
+
+            if (order === 'asc') {
+                return aValue.payment - bValue.payment;
+            } else {
+                return bValue.payment - aValue.payment;
+            }
+        });
+
+        this.notifySubscribers();
+    }
+
+    calculateFinance(vehicle) {
+        let annInterest = 7.99;
+        let monInt = annInterest / 1200;
+        let months = 12;
+        let amount = vehicle.advertise_price;
+        let down = 0;
+        let trade = 0;
+
+        var financeTotal = amount - (down + trade);
+        var numberOfPayments = months / (12 / 26);
+        var interest = financeTotal * (annInterest / 26) * numberOfPayments;
+        var additionalFees = 0;
+        var totalCostOfCredit = interest + additionalFees;
+        var totalObligation = financeTotal + totalCostOfCredit;
+
+        var payment = ((monInt + (monInt / (Math.pow((1 + monInt), months) - 1))) * (amount - (down || 0)) / 2).toFixed(2);
+
+        return {
+            financeTotal: financeTotal,
+            numberOfPayments: numberOfPayments,
+            interest: interest,
+            additionalFees: additionalFees,
+            totalCostOfCredit: totalCostOfCredit,
+            totalObligation: totalObligation,
+            payment: parseFloat(payment) // Convert payment to a number
+        };
+    }
+
 }

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
@@ -93,14 +98,26 @@ class FinanceForm {
   }
 }
 
+  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>
@@ -342,7 +361,11 @@ class FinanceForm {
 }
 
   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(
@@ -520,4 +553,3 @@ class FinanceForm {
     localStorage.setItem(`autocart_${this.name}`, JSON.stringify(formValues));
   }
 }
-  

autocart_assets/js/SortBy.js

@@ -10,7 +10,9 @@ class SortBy {
             { field: 'make', order: 'asc', label: 'Make Name: A to Z' },
             { field: 'make', order: 'desc', label: 'Make Name: Z to A' },
             { field: 'model', order: 'asc', label: 'Model Name: A to Z' },
-            { field: 'model', order: 'desc', label: 'Model Name: Z to A' }
+            { field: 'model', order: 'desc', label: 'Model Name: Z to A' },
+            { field: 'finance', order: 'asc', label: 'Finance: Low to High' },
+            { field: 'finance', order: 'desc', label: 'Finance: High to Low' }
         ];
         this.init();
     }
@@ -50,6 +52,11 @@ class SortBy {
         const selectedOption = this.sortByElement.value;
         if (selectedOption) {
             const [sortBy, order] = JSON.parse(selectedOption);
+            if (sortBy === 'finance') {
+                this.dataStore.sortByFinance(order);
+            } else {
+                this.dataStore.sortBy(sortBy, order);
+            }
             this.dataStore.sortBy(sortBy, order);
         }
 

autocart_assets/js/index.js

@@ -21,10 +21,22 @@ function sendReq() {
         'autocart_nonce': jQuery('#autocart_nonce').val(),
     };
     const vehiclesContainer = document.querySelector('.vehicles-container');
-    vehiclesContainer.textContent = 'Loading...';
+    // vehiclesContainer.textContent = 'Loading...';
+    // Add skeleton cards to the vehicles container
+    for (let i = 0; i < 6; i++) {
+        const skeletonCard = createSkeletonCard();
+        vehiclesContainer.appendChild(skeletonCard);
+    }
 
     const filtersContainer = document.querySelector('.make-container');
-    filtersContainer.textContent = 'Loading...';
+    for (let i = 0; i < 2; i++) {
+        const skeletonListItem = createSkeletonListItem();
+        filtersContainer.appendChild(skeletonListItem);
+    }
+    // Add skeleton list item to the filters container
+    // const skeletonListItem = createSkeletonListItem();
+    // filtersContainer.appendChild(skeletonListItem);
+
     jQuery.ajax({
         type: 'POST',
         url: ajax_object.ajax_url,
@@ -105,6 +117,7 @@ function createMakeList(vehicles){
             models: fetchAvailableModels(vehicles, make) 
         }, dataStore);
     });
+    makeFilters.sort((a, b) => a.value.localeCompare(b.value));
     makeFilters.forEach(make => {
         
         makeContainer.appendChild(make.generateCardHTML());
@@ -126,6 +139,7 @@ function createBodyTypeList(vehicles){
     
 
     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 => {
         bodyTypeContainer.appendChild(body_type.initCheckbox());
         // body_type.subscribe(m=> iniBodyTypeContainer(m))
@@ -145,6 +159,7 @@ function createTransmissionList(vehicles){
 
     filterManager.resetList('transmission_type');
     transmissionFilters = Object.entries(transmission).map(([transmission_type, count]) => filterManager.createTransmissionFilter({ text: transmission_type, count}, dataStore));
+    transmissionFilters.sort((a, b) => a.value.localeCompare(b.value));
     transmissionFilters.forEach(transmission => {
         transmissionContainer.appendChild(transmission.initCheckbox());
     });
@@ -162,6 +177,8 @@ function createExteriorList(vehicles){
     filterManager.resetList('exterior_color');
 
     exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) => filterManager.createExteriorFilter({ text: exterior_color, count}, dataStore));
+    exteriorFilters.sort((a, b) => a.value.localeCompare(b.value));
+
     exteriorFilters.forEach(exterior => {
         exteriorContainer.appendChild(exterior.initCheckbox());
     });
@@ -170,11 +187,13 @@ function createExteriorList(vehicles){
 
 function initModelContainer(make){
     let list = [...new Set(filterManager.makeFilters.filter(m=>m.checked == true).map(m=>m.models).flat())];
+
     const modelContainer = document.querySelector('.model-container');
     if (list.length === 0) {
         modelContainer.innerHTML = '<p>Please Select a Make</p>';
     } else if (list && list.length > 0) {
         modelContainer.innerHTML = '';
+        list.sort((a, b) => a.value.localeCompare(b.value));
         list.forEach(model => {
             modelContainer.appendChild(model.initCheckbox());
         });
@@ -185,6 +204,7 @@ function initModelContainer(make){
 
 function initTrimContainer(model){
     let list = [...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');
   
@@ -192,6 +212,7 @@ function initTrimContainer(model){
         trimContainer.innerHTML = '<p>Please Select a Model</p>';
     } else if (list && list.length > 0) {
         trimContainer.innerHTML = '';
+        list.sort((a, b) => a.value.localeCompare(b.value));
         list.forEach(trim => {
             trimContainer.appendChild(trim.initCheckbox());
         });
@@ -274,8 +295,40 @@ function updateMileage() {
 // Create debounced versions of sendReq
 const debouncedSendReq = debounce(sendReq, 300);
 
+function createSkeletonCard() {
+    const skeletonCard = document.createElement('div');
+    skeletonCard.classList.add('bg-red-200', 'rounded-lg', 'shadow-md', 'animate-pulse');
+  
+    const innerHTML = `
+      <div class="h-40 bg-red-300 rounded-t-lg"></div>
+      <div class="p-4">
+        <div class="h-12 bg-red-300 rounded-t-lg"></div>
+        <div class="h-5 bg-red-400 rounded-t-lg"></div>
+        <div class="h-5 bg-red-300 rounded-t-lg"></div>
+        <div class="h-5 bg-red-400 rounded-t-lg"></div>
+        <div class="h-5 bg-red-300 rounded-b-lg"></div>
+      </div>
+    `;
+  
+    skeletonCard.innerHTML = innerHTML;
+  
+    return skeletonCard;
+  }
 
 
+function createSkeletonListItem() {
+    const listItem = document.createElement('li');
+    listItem.classList.add('w-full', 'bg-custom-red', 'rounded-lg', 'shadow-md', 'animate-pulse');
 
+    const innerHTML = `
+    <div class="flex items-center   justify-between p-1">
+        <div class="h-6 bg-custom-red-light w-2/3 rounded-lg"></div>
         
+        <div class="bg-custom-red-light w-1/6 h-6 rounded-lg"></div>
+    </div>
+    `;
 
+    listItem.innerHTML = innerHTML;
+
+    return listItem;
+}

autocart_assets/templates/autocart-results.php

@@ -34,8 +34,10 @@ $response = get_transient("autocart_response");
 <!-- Main Content -->
 <div class="flex-grow flex max-w-7xl mx-auto">
 	<!-- Left Drawer for Filters -->
-	<aside class="w-1/4 p-4 shadow-lg bg-white hidden md:block rounded">
+	<div id="overlay" class="fixed inset-0 bg-black opacity-50 z-50 hidden"></div>
-		<div class="mdc-select mdc-select--outlined .col-xl-3 rounded p-2 w-full" id="order-by">
+
+	<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">
 				<span class="mdc-notched-outline">
 					<span class="mdc-notched-outline__leading"></span>
@@ -62,16 +64,13 @@ $response = get_transient("autocart_response");
 		</div>
 		<div  class="space-y-2">
 			<!-- Panel 1 -->
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header">
                     <div class="w-full text-left focus:outline-none  transition"> Price </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
 					<div class="flex justify-center items-center">
 						<span id="priceRange" class="slider-readings"> <?php echo '$' . number_format($minPrice) . ' to $' . number_format($maxPrice) ?> </span></div>
 						<div class="mdc-slider mdc-slider--range" id="autocart-price-range-field">
@@ -94,16 +93,13 @@ $response = get_transient("autocart_response");
 				</div>
 			</div>
 			<!-- Panel 2 -->
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header">
                     <div class="w-full text-left focus:outline-none  transition"> Year </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
 					<div class="flex justify-center items-center">
 						<span id="yearRange" class="slider-readings"> <?php echo $minYear .' to '.$maxYear; ?> </span>
 					</div>
@@ -126,16 +122,13 @@ $response = get_transient("autocart_response");
 				</div>
 			</div>
 			<!-- Panel 3 -->
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header">
                     <div class="w-full text-left focus:outline-none  transition"> Kilometres </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
 					<div class="flex justify-center items-center">
 						<span id="KilometresRange" class="slider-readings">19000 to 222000 </span>
 					</div>
@@ -159,95 +152,77 @@ $response = get_transient("autocart_response");
 			</div>
 
 			<!-- Panel 4 -->
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header">
                     <div class="w-full text-left focus:outline-none  transition"> Make </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
 					<ul class="make-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg  w-full">
 						
 					</ul>
 				</div>
 			</div>
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header" id="model-collapse-toggle ">
                     <div class="w-full text-left focus:outline-none  transition"> Model </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
 					<ul class="model-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg  w-full ">
 						<p>Please Select a Make.</p>
 					</ul>
 				</div>
 			</div>
 
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header">
                     <div class="w-full text-left focus:outline-none  transition"> Trim </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
 					<ul class="trim-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg  w-full">
 						<p>Please Select a Model.</p>
 					</ul>
 				</div>
 			</div>
 
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header">
                     <div class="w-full text-left focus:outline-none  transition"> Body Style </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
 					<ul class="body-type-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg  w-full">
                        
                     </ul>
 				</div>
 			</div>
 
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header">
                     <div class="w-full text-left focus:outline-none  transition"> Transmission </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
                     <ul class="transmission-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg  w-full">
                        
                     </ul>
 				</div>
 			</div>
 
-			<div class="border rounded p-2">
+			<div class="border rounded p-2" collapse-toggle>
-				<div class="flex justify-between items-center p-4">
+				<div class="flex justify-between items-center p-4 ac-accordion-header">
                     <div class="w-full text-left focus:outline-none  transition"> Exterior Color </div>
-					<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>
-						xmlns="http://www.w3.org/2000/svg">
+
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-							d="M19 9l-7 7-7-7"></path>
-					</svg>
 				</div>
-				<div class="mt-2">
+				<div class="mt-2 ac-accordion-content">
                     <ul class="exterior-color list-none text-gray-900 bg-white text-sm font-medium rounded-lg  w-full">
                        
                     </ul>
@@ -264,6 +239,10 @@ $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="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">
             </div>
         </header>
 
@@ -283,18 +262,82 @@ if ($make) {
 
 <script>
  
+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'));
     year = new mdc.slider.MDCSlider(document.querySelector('#autocart-year-range-field'));
     kilometres = new mdc.slider.MDCSlider(document.querySelector('#autocart-kilometres-range-field'));
     price.listen('MDCSlider:input', updatePrice);
     year.listen('MDCSlider:input', updateYear);
     kilometres.listen('MDCSlider:input', updateMileage);
+
     new DisplayMode();
     dataStore = new DataStore([]);
 	
     new SortBy(dataStore);
     sendReq();
+
+
+	const accordionItems = document.querySelectorAll("[collapse-toggle]");
+
+	accordionItems.forEach(item => {
+		const header = item.querySelector(".ac-accordion-header");
+		const content = item.querySelector(".ac-accordion-content");
+		const icon = header.querySelector("i.fas");
+
+		header.addEventListener("click", function() {
+			item.classList.toggle("collapsed");
+			// content.classList.toggle('hidden');
+			icon.classList.toggle('fa-chevron-down');
+            icon.classList.toggle('fa-chevron-up');
+			// 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');
+	} else {
+		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

@@ -194,8 +194,11 @@ $carMakes = [
         <?php wp_nonce_field('autocart_nonce', 'autocart_nonce'); ?>
 
         <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 rounded" id="inventory-search-button">
+            <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>Search
+                <i class="bi-search mr-2"></i>
+                <span id="button-content" >Search </span>
+                <span class="btn-ring hidden"></span>
+
             </button>
         </div>
     </div>
@@ -330,6 +333,7 @@ $carMakes = [
         // const price = document.querySelector('#autocart-price-field');
         const year = document.querySelector('#vehicle_search_year');
         const make = document.querySelector('#vehicle_search_make');
+        const loading = document.querySelector('.btn-ring');
 
         // let priceRange = JSON.parse(priceWidget.value);
         // let minPrice = priceRange[0];
@@ -367,31 +371,37 @@ $carMakes = [
             'make': make.value,
             'autocart_nonce': jQuery('#autocart_nonce').val(),
         };
-        jQuery("#inventory-search-button").text("Loading...");
+        jQuery(" #button-content").text("Loading...");
+        loading.classList.remove('hidden'); 
+
         jQuery.ajax({
             type: 'POST',
             url: ajax_object.ajax_url,
             data: formData,
             success: function(response) {
+                loading.classList.add('hidden'); // Hide the btn-ring on success
+
+                if(response.success){
                     const vehicles = response.data.vehicles;
                     if (inputs) {
                         inputs.forEach(element => {
                             createOptions(vehicles, element);
                         });
                     }
+                    jQuery(" #button-content").text("Search (" + vehicles.length + ")");
+                }else{
+                    alert(response.data.message);
+                    jQuery(" #button-content").text("Search");
 
+                }
                 
-
-
-
-
-                jQuery("#inventory-search-button").text("Search (" + vehicles.length + ")");
             },
             error: function(xhr, status, error) {
+                loading.classList.add('hidden'); // Hide the btn-ring on error
                 console.log(xhr.responseText);
                 console.log('Status: ' + status);
                 console.log('Error: ' + error);
-                jQuery("#inventory-search-button").text("Error");
+                // jQuery("").text("Error");
             }
         });
     }

autocart_assets/templates/single-vehicle.php

@@ -173,8 +173,8 @@ $image_title = !empty($vehicle_images[0]['title']) ? $vehicle_images[0]['title']
 $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images[0]['description'] : '';
 ?>
 
-<div class="max-w-7xl mx-auto">
+<div class="max-w-7xl mx-auto grid">
-    <div class="grid grid-cols-2">
+    <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">
@@ -211,12 +211,12 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
     </div>
 
 
-    <div class="bg-gray-100 dark:bg-gray-800 py-4">
+    <div class="bg-gray-100 dark:bg-gray-800 py-4 grid">
         <!-- Single Car Information -->
-        <div class="lg:grid grid-cols-3 relative">
+        <div class="lg:grid lg:grid-cols-3 grid grid-cols-1 relative">
 
             <!-- Vehicle Details -->
-            <div class="mx-auto col-span-2">
+            <div class="lg:mx-auto md:mx-auto col-span-2">
 
                 <!-- Single Car -->
                 <div class="m-4">
@@ -319,18 +319,31 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
                     <p class="mb-4 font-bold text-gray-700 dark:text-gray-300">Options</p>
                     <div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white mt-4 transition-all duration-300" data-inactive-classes="text-gray-500 dark:text-gray-400">
                         <div class="md:grid grid-cols-3">
-                            <ul class="col-span-1 flex-column space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
+                            <div class="lg:col-span-1 sm:flex-rows flex-row md:block flex md:col-span-1 lg:flex-column md:flex-column text-sm font-medium text-gray-500 dark:text-gray-400 w-full gap-4">
+                                <button id="tabs-left" class="md:hidden lg:hidden inline-flex items-center justify-center px-2 py-2 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300  disabled:opacity-50 rounded-lg md:me-4 mb-4">
+                                    <i class="fas fa-angle-left"></i>
+                                </button>
+                                <ul id="tabs-container" class="lg:col-span-1 sm:flex-rows flex-row md:block flex overflow-scroll md:col-span-1 lg:flex-column md:flex-column lg:space-y-4 md:space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0 w-full overflow-scroll md:me-4 mb-4 gap-4">
+                                   
+
                                     <?php foreach ($groupedFeatures as $category => $features) : ?>
                                         <?php
                                         // Remove special characters and spaces from category for use in HTML IDs
                                         $categorySlug = strtolower(preg_replace('/[^a-z0-9]/', '', $category));
                                         ?>
-                                    <button class="inline-flex items-center text-left px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-300 w-full dark:hover:bg-gray-700 dark:hover:text-white text-gray-900 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 ripple-effect" data-tab-target="#tab-<?= $categorySlug ?>-body-1" data-te-ripple-init>
+                                        <button class="inline-flex items-center text-left lg:text-left md:text-left sm:text-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-300 w-full dark:hover:bg-gray-700 dark:hover:text-white text-gray-900 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 md:ripple-effect lg:ripple-effect" data-tab-target="#tab-<?= $categorySlug ?>-body-1" data-te-ripple-init>
                                             <?= $category ?>
                                         </button>
                                     <?php endforeach; ?>
+
+                                    
+
                                 </ul>
-                            <div class="sticky-container col-span-2 p-6 bg-gray-50 text-medium text-gray-900 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 top-32 lg:top-56" id="tabs-viewer">
+                                <button id="tabs-right" class="md:hidden lg:hidden inline-flex items-center justify-center px-2 py-2 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300  disabled:opacity-50 rounded-lg md:me-4 mb-4">
+                                    <i class="fas fa-angle-right"></i>
+                                </button>
+                            </div>
+                            <div class="sticky-container col-span-2 p-6 bg-gray-50 text-medium text-gray-900 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 top-32 lg:top-56 lg:ml-4 md:ml-4" id="tabs-viewer">
 
                             </div>
 
@@ -357,7 +370,7 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
             </div>
 
             <!-- Vehicle Financing and Booking Widget -->
-            <div class="px-4 col-span-1 relative">
+            <div class="px-4 col-span-1 relative order-first md:order-last">
                 <div class="sticky-container  grid gap-3 top-56">
                     <button role="button" class="prev px-2 py-2 rounded-full bg-neutral-100 text-neutral-900 group absolute top-1/4 left-4 transform -translate-y-1/2 z-10" aria-label="prev" onclick="navigateSlider(-1)">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 group-active:-translate-x-2 transition-all duration-200 ease-linear">
@@ -407,7 +420,7 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
                                     <div class="p-4">
                                         <span class="text-xl font-semibold">
                                             <span class="text-gray-600 dark:text-gray-300 paymentSpan">
-                                                <?php echo $formattedPrice = '$ ' . number_format(416); ?>
+                                                <?php echo $formattedPrice = '$ ' . number_format($vehicle_details['advertise_price']); ?>
                                             </span>
                                             <i class="fas fa-calculator cursor-pointer" onclick="openFinanceModal()"></i>
                                         </span>
@@ -568,7 +581,7 @@ const mergedDetails = {
             selector: 'glightbox',
             touchNavigation: true,
             loop: true,
-            startAt: selectedSlide, // Set the starting slide
+            startAt: selectedSlide,
             onClose: function() {
                 const slideElements = document.querySelectorAll('#thumbnailContainer .thumbnail');
                 if (slideElements.length >= lightbox.index) {
@@ -609,6 +622,18 @@ const mergedDetails = {
     }
 
     jQuery(document).ready(function() {
+        const tabsLeftButton = document.getElementById('tabs-left');
+        const tabsRightButton = document.getElementById('tabs-right');
+
+        tabsLeftButton.addEventListener('click', function () {
+            scrollTabs(-1);
+        });
+
+        tabsRightButton.addEventListener('click', function () {
+            scrollTabs(1);
+        });
+
+ 
 
         var queryString = window.location.search;
         var urlParams = new URLSearchParams(queryString);
@@ -625,8 +650,8 @@ const mergedDetails = {
                 const icon = this.querySelector('[data-accordion-icon]');
                 icon.style.transform = expanded === 'true' ? 'rotate(0deg)' : 'rotate(180deg)';
             });
-        });
            
+        });
 
         // ripple effect 
 
@@ -653,6 +678,9 @@ const mergedDetails = {
             });
         });
 
+        tabs[0].click();
+
+
 
 
     });
@@ -660,7 +688,6 @@ const mergedDetails = {
 
     function rippleEffect(event) {
         const btn = event.currentTarget;
-        // Add classes to the selected element
         btn.classList.add("overflow-hidden", "shadow", "relative");
 
         const circle = document.createElement("span");
@@ -700,9 +727,8 @@ const mergedDetails = {
 
     function scrollCarouselRight() {
         const carousel = document.querySelector('.overflow-x-scroll');
-        const maxScrollRight = carousel.scrollWidth - carousel.offsetWidth; // Calculate max scrollable distance
+        const maxScrollRight = carousel.scrollWidth - carousel.offsetWidth;
 
-        // Prevent scrolling beyond the end
         if (carousel.scrollLeft >= maxScrollRight) {
             return;
         }
@@ -712,4 +738,38 @@ const mergedDetails = {
             behavior: 'smooth'
         });
     }
+
+    function scrollTabs(direction) {
+        const tabsContainer = document.getElementById('tabs-container');
+
+        const tabs = tabsContainer.querySelectorAll('button');
+        let totalWidth = 0;
+
+        tabs.forEach(tab => {
+            console.log(tab.offsetWidth);
+            if (isElementVisible(tab)) { 
+                totalWidth += tab.offsetWidth;
+            }
+        });
+
+        const scrollAmount = direction * totalWidth;
+
+        tabsContainer.scrollBy({
+            left: scrollAmount,
+            behavior: 'smooth'
+        });
+    }
+
+    function isElementVisible(element) {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+
+
+    
 </script>

includes/front-end/theme_starter_setup.php

@@ -36,6 +36,7 @@ function themeStarter_setup()
     array(
       'primary' => __('Primary Menu', 'themeStarter'),
       'secondary' => __('Secondary Menu', 'themeStarter'),
+      'mobile' => __('Mobile Menu', 'themeStarter'),
     )
   );
 
@@ -82,4 +83,3 @@ function themeStarter_setup()
   add_theme_support('wc-product-gallery-lightbox');
   add_theme_support('wc-product-gallery-slider');
 }
-

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/pages/_front-page.scss

@@ -1,5 +1,5 @@
 #hero {
-    background-image: url("../images/bgs/hero-bg.jpeg");
+  background-image: url('../images/bgs/hero-bg.jpeg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

src/scss/vendors/tailwind/_tailwind.scss

@@ -1273,10 +1273,6 @@ select {
   bottom: 100%;
 }
 
-.left-0 {
-  left: 0px;
-}
-
 .left-2 {
   left: 0.5rem;
 }
@@ -1816,11 +1812,6 @@ select {
   line-height: 1;
 }
 
-.text-7xl {
-  font-size: 4.5rem;
-  line-height: 1;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -2055,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));

template-parts/header/navigation.php

@@ -6,7 +6,6 @@
  * @package ThemeStarter
  */
 
-require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
 
 ?>
 
@@ -16,11 +15,8 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
   <!-- Header -->
   <nav id="header-nav" class="fixed w-full top-0 z-50">
 
-
     <section class="relative">
 
-
-
       <!-- Top Banner -->
       <div class="bg-stone-800 px-4">
         <div class="max-w-7xl mx-auto py-4">
@@ -69,10 +65,6 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
       <!-- Core Nav -->
       <div class="relative px-4 py-2 bg-white backdrop-blur-lg w-full shadow-md">
 
-        <!-- <div class="absolute top-0 left-0 inset-0 flex w-full">
-          <?php /** get_search_form(); */ ?>
-        </div> -->
-
         <div class="relative z-10 flex justify-between max-w-7xl mx-auto">
           <!-- Header Logo -->
           <a class="relative z-50 flex items-center space-x-4" href="<?php echo get_site_url(); ?>">
@@ -94,11 +86,6 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
               get_template_part('template-parts/partials/apply-for-financing-button');
               ?>
             </div>
-            <!-- <div class="flex relative">
-              <button aria-label="Search Toggle" id="toggle-search">
-                <i class="bi bi-search"></i>
-              </button>
-            </div> -->
             <div class="flex relative">
               <button aria-label="Mobile Menu Toggle" id="toggle-nav" class="toggle-menu">
                 <i></i> <i></i>
@@ -140,57 +127,8 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
 
         <div class="mx-auto mb-4 w-11/12 h-1 border-t border-stone-400"></div>
 
-        <ul role="list" class="space-y-2">
+        <?php get_template_part('template-parts/partials/menu-accordion-loop')
-          <!-- Menu Loop -->
-          <?php $pages = get_pages_as_array();
-          foreach ($pages as $page) {
-            $pageID = $page['page']->ID;
-            $pageTitle = $page['page']->post_title;
-            $pageSlug = $page['page']->post_name;
-            $pageBG =
-              $page['page']->post_name . '.png';
-            $pageBootstrapIcon =
-              get_field('bootstrap_icon', $page['page']->ID); ?>
-
-            <li class="accordion">
-              <div class="flex px-2 hover:bg-stone-500 hover:text-white rounded-md justify-between">
-                <a href="<?php echo get_site_url() . '/' . $pageSlug;  ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                  <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
-                  <p><?php echo $pageTitle ?></p>
-                </a>
-
-                <?php if ($page['subpages']) { ?>
-                  <button aria-label="Accordion Dropdown Toggle" class="accordion-toggle">
-                    <i class="fas fa-chevron-down items-center ml-auto rounded-md px-2.5 py-2" aria-hidden="true"></i>
-                    <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
-                  </button>
-                <?php } ?>
-              </div>
-              <ul class="accordion-content space-y-2">
-                <?php foreach ($page['subpages'] as $subpage) {
-                  $subpageID =
-                    $subpage->ID;
-                  $subpageTitle = $subpage->post_title;
-                  $subpageSlug =
-                    $subpage->post_name;
-                  $subpageBG = $subpage->post_name . '.png';
-                  $subpageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
         ?>
-                  <li class="p-2">
-                    <a href="<?php echo get_site_url() . '/' . $pageSlug . '/' . $subpageSlug ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
-                      <p><?php echo $subpageTitle ?></p>
-                    </a>
-                  </li>
-
-                <?php } ?>
-              </ul>
-            </li>
-
-            <!-- Horizontal Rule -->
-            <!-- <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div> -->
-
-          <?php } ?>
-        </ul>
 
       </div>
 

template-parts/partials/menu-accordion-loop.php

@@ -0,0 +1,80 @@
+<?php
+
+/**
+ * Menu Accordion template.
+ *
+ * @package ThemeStarter
+ */
+
+?>
+
+<ul role="list" class="space-y-2">
+    <?php
+    // Get the menu items
+    $main_menu_items = wp_get_nav_menu_items('mobile-menu');
+
+    // Initialize an empty array to store the menu structure
+    $menu_structure = array();
+
+    // Iterate through each menu item to build the menu structure
+    foreach ($main_menu_items as $menu_item) {
+        // If the menu item has no parent, add it as a root level item
+        if ($menu_item->menu_item_parent == 0) {
+            $menu_structure[$menu_item->ID] = array(
+                'title' => $menu_item->title,
+                'url' => $menu_item->url,
+                'children' => array()
+            );
+        } else {
+            // If the menu item has a parent, add it as a child of its parent
+            $parent_id = $menu_item->menu_item_parent;
+            $menu_structure[$parent_id]['children'][] = array(
+                'title' => $menu_item->title,
+                'url' => $menu_item->url
+            );
+        }
+    }
+
+    // Loop through menu items with no parents (parents are the "parent" items)
+    foreach ($menu_structure as $menu_item_id => $menu_item_data) {
+        $menuItemTitle = $menu_item_data['title'];
+        $menuItemSlug = $menu_item_data['url'];
+    ?>
+        <li class="accordion">
+            <div class="flex px-2 hover:bg-stone-500 hover:text-white rounded-md justify-between">
+                <a href="<?php echo $menuItemSlug; ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                    <p><?php echo $menuItemTitle ?></p>
+                </a>
+                <?php if (!empty($menu_item_data['children'])) { ?>
+                    <button aria-label="Accordion Dropdown Toggle" class="accordion-toggle">
+                        <i class="fas fa-chevron-down items-center ml-auto rounded-md px-2.5 py-2" aria-hidden="true"></i>
+                        <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+                    </button>
+                <?php } ?>
+            </div>
+            <?php
+            // Check if there are children for this menu item
+            if (!empty($menu_item_data['children'])) {
+            ?>
+                <ul class="accordion-content space-y-2">
+                    <?php
+                    // Loop through children
+                    foreach ($menu_item_data['children'] as $child) {
+                        $childTitle = $child['title'];
+                        $childUrl = $child['url'];
+                    ?>
+                        <li class="hover:bg-stone-300 rounded-md">
+                            <a class="inset-0 flex px-4 py-2" href="<?php echo $childUrl ?>"><?php echo $childTitle ?></a>
+                        </li>
+                    <?php
+                    }
+                    ?>
+                </ul>
+            <?php
+            }
+            ?>
+        </li>
+    <?php
+    }
+    ?>
+</ul>

template-parts/partials/pages-accordion-loop.php

@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * Pages Accordion template.
+ *
+ * @package ThemeStarter
+ */
+
+
+require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
+
+
+?>
+
+<!-- Accordion Menu Loop -->
+<ul role="list" class="space-y-2">
+    <!-- Menu Loop -->
+    <?php $pages = get_pages_as_array();
+    foreach ($pages as $page) {
+        $pageID = $page['page']->ID;
+        $pageTitle = $page['page']->post_title;
+        $pageSlug = $page['page']->post_name;
+        $pageBG =
+            $page['page']->post_name . '.png';
+        $pageBootstrapIcon =
+            get_field('bootstrap_icon', $page['page']->ID); ?>
+
+        <li class="accordion">
+            <div class="flex px-2 hover:bg-stone-500 hover:text-white rounded-md justify-between">
+                <a href="<?php echo get_site_url() . '/' . $pageSlug;  ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                    <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
+                    <p><?php echo $pageTitle ?></p>
+                </a>
+
+                <?php if ($page['subpages']) { ?>
+                    <button aria-label="Accordion Dropdown Toggle" class="accordion-toggle">
+                        <i class="fas fa-chevron-down items-center ml-auto rounded-md px-2.5 py-2" aria-hidden="true"></i>
+                        <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+                    </button>
+                <?php } ?>
+            </div>
+            <ul class="accordion-content space-y-2">
+                <?php foreach ($page['subpages'] as $subpage) {
+                    $subpageID =
+                        $subpage->ID;
+                    $subpageTitle = $subpage->post_title;
+                    $subpageSlug =
+                        $subpage->post_name;
+                    $subpageBG = $subpage->post_name . '.png';
+                    $subpageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
+                ?>
+                    <li class="p-2">
+                        <a href="<?php echo get_site_url() . '/' . $pageSlug . '/' . $subpageSlug ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
+                            <p><?php echo $subpageTitle ?></p>
+                        </a>
+                    </li>
+
+                <?php } ?>
+            </ul>
+        </li>
+
+        <!-- Horizontal Rule -->
+        <!-- <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div> -->
+
+    <?php } ?>
+</ul>