diff --git a/autocart_assets/css/filter-panel.css b/autocart_assets/css/filter-panel.css
index e6af5d9..d8cfba6 100644
--- a/autocart_assets/css/filter-panel.css
+++ b/autocart_assets/css/filter-panel.css
@@ -94,4 +94,16 @@ li.autocart-filters:hover {
.sticky-container{
position: sticky;
-}
\ No newline at end of file
+}
+.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%);
+ }
\ No newline at end of file
diff --git a/autocart_assets/js/index.js b/autocart_assets/js/index.js
index 81097e7..02e260c 100644
--- a/autocart_assets/js/index.js
+++ b/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 = `
+
+
+ `;
+
+ 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 = `
+
+ `;
+ listItem.innerHTML = innerHTML;
+ return listItem;
+}
\ No newline at end of file
diff --git a/autocart_assets/templates/search-form.php b/autocart_assets/templates/search-form.php
index 525a23f..0bc9aa4 100644
--- a/autocart_assets/templates/search-form.php
+++ b/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);
diff --git a/autocart_assets/templates/single-vehicle.php b/autocart_assets/templates/single-vehicle.php
index f5e02e8..92fe7b2 100644
--- a/autocart_assets/templates/single-vehicle.php
+++ b/autocart_assets/templates/single-vehicle.php
@@ -407,7 +407,7 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
-
+
@@ -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();
+
+
});