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(); + + });