plugin assets sync

autocart_assets/css/filter-panel.css

@@ -94,4 +94,16 @@ 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%);
+  }

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,
@@ -274,8 +286,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/search-form.php

@@ -373,19 +373,20 @@ $carMakes = [
             url: ajax_object.ajax_url,
             data: formData,
             success: function(response) {
-                const vehicles = response.data.vehicles;
-                if (inputs) {
-                    inputs.forEach(element => {
-                        createOptions(vehicles, element);
-                    });
+                if(response.success){
+                    const vehicles = response.data.vehicles;
+                    if (inputs) {
+                        inputs.forEach(element => {
+                            createOptions(vehicles, element);
+                        });
+                    }
+                    jQuery("#inventory-search-button").text("Search (" + vehicles.length + ")");
+                }else{
+                    alert(response.data.message);
+                    jQuery("#inventory-search-button").text("Search");
+
                 }
-
-
-
-
-
-
-                jQuery("#inventory-search-button").text("Search (" + vehicles.length + ")");
+                
             },
             error: function(xhr, status, error) {
                 console.log(xhr.responseText);

autocart_assets/templates/single-vehicle.php

@@ -407,7 +407,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>
@@ -625,9 +625,9 @@ const mergedDetails = {
                 const icon = this.querySelector('[data-accordion-icon]');
                 icon.style.transform = expanded === 'true' ? 'rotate(0deg)' : 'rotate(180deg)';
             });
+           
         });
 
-
         // ripple effect 
 
         const btns = document.getElementsByClassName("ripple-effect");
@@ -653,6 +653,9 @@ const mergedDetails = {
             });
         });
 
+        tabs[0].click();
+
+
 
 
     });