finance form template displayed

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/index.js

@@ -10,329 +10,296 @@ let shouldUpdateFilters = true;
 let modelFilter = [];
 let makeFilters;
 function sendReq() {
-  var formData = {
-    action: 'handle_autocart_form',
-    minPrice: price.getValueStart(),
-    maxPrice: price.getValue(),
-    minKilometres: kilometres.getValueStart(),
-    maxKilometres: kilometres.getValue(),
-    minYear: year.getValueStart(),
-    maxYear: year.getValue(),
-    autocart_nonce: jQuery('#autocart_nonce').val(),
-  };
-  const vehiclesContainer = document.querySelector('.vehicles-container');
-  // vehiclesContainer.textContent = 'Loading...';
-  // Add skeleton cards to the vehicles container
-  for (let i = 0; i < 6; i++) {
-    const skeletonCard = createSkeletonCard();
-    vehiclesContainer.appendChild(skeletonCard);
-  }
+    var formData = {
+        'action': 'handle_autocart_form',
+        'minPrice': price.getValueStart(),
+        'maxPrice': price.getValue(),
+        'minKilometres': kilometres.getValueStart(),
+        'maxKilometres': kilometres.getValue(),
+        'minYear':  year.getValueStart(),
+        'maxYear':  year.getValue(),
+        'autocart_nonce': jQuery('#autocart_nonce').val(),
+    };
+    const vehiclesContainer = document.querySelector('.vehicles-container');
+    // 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');
-  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);
+    const filtersContainer = document.querySelector('.make-container');
+    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,
-    data: formData,
-    success: function (response) {
-      const vehicles = response.data.vehicles;
-      if (dataStore) {
-        dataStore.unsubscribeAll();
-      }
+    jQuery.ajax({
+        type: 'POST',
+        url: ajax_object.ajax_url,
+        data: formData,
+        success: function (response) {
+            const vehicles = response.data.vehicles;
+            if (dataStore) {
+                dataStore.unsubscribeAll();
+            }
 
-      // Initialize new data store
-      dataStore.vehicles = vehicles;
-      filterManager = new FilterManager(dataStore);
-      appliedFilters = new AppliedFilters(dataStore, filterManager);
+          
+            // Initialize new data store
+            dataStore.vehicles = vehicles;
+            filterManager = new FilterManager(dataStore);
+            appliedFilters = new AppliedFilters(dataStore, filterManager);
 
-      // filterManager = new FilterManager(dataStore);
-      // appliedFilters = new AppliedFilters(dataStore, filterManager);
+            // filterManager = new FilterManager(dataStore);
+            // appliedFilters = new AppliedFilters(dataStore, filterManager);
+            
+            shouldUpdateFilters = true;
+            dataStore.subscribe(filteredVehicles => {
+                console.log('dataStore has been changed')
+                handleSuccess(filteredVehicles);
+            });
 
-      shouldUpdateFilters = true;
-      dataStore.subscribe((filteredVehicles) => {
-        console.log('dataStore has been changed');
-        handleSuccess(filteredVehicles);
-      });
-
-      dataStore.notifySubscribers(vehicles);
-    },
-    error: function (xhr, status, error) {
-      console.log(xhr.responseText);
-      console.log('Status: ' + status);
-      console.log('Error: ' + error);
-      jQuery('#inventory-search__search-button').text('Error');
-    },
-  });
+            dataStore.notifySubscribers(vehicles);
+        },
+        error: function (xhr, status, error) {
+            console.log(xhr.responseText);
+            console.log('Status: ' + status);
+            console.log('Error: ' + error);
+            jQuery("#inventory-search__search-button").text("Error");
+        }
+    });
 }
 
 function handleSuccess(vehicles, updateFilters = shouldUpdateFilters) {
-  if (updateFilters) {
-    createMakeList(vehicles);
-    createBodyTypeList(vehicles);
-    createTransmissionList(vehicles);
-    createExteriorList(vehicles);
-  }
-  const vehiclesContainer = document.querySelector('.vehicles-container');
-  vehiclesContainer.innerHTML = '';
+    if(updateFilters){
+       createMakeList(vehicles);
+       createBodyTypeList(vehicles);
+       createTransmissionList(vehicles);
+       createExteriorList(vehicles);
+    }
+    const vehiclesContainer = document.querySelector('.vehicles-container');
+    vehiclesContainer.innerHTML = '';
+    
+    vehicles.forEach(vehicleData => {
+        const vehicle = new VehicleThumbnail(vehicleData);
+        // vehiclesContainer.appendChild(vehicle.generateCardHTML());
+        vehiclesContainer.appendChild(vehicle.generateCardElement());
 
-  vehicles.forEach((vehicleData) => {
-    const vehicle = new VehicleThumbnail(vehicleData);
-    // vehiclesContainer.appendChild(vehicle.generateCardHTML());
-    vehiclesContainer.appendChild(vehicle.generateCardElement());
-  });
-}
-
-function createMakeList(vehicles) {
-  const makeContainer = document.querySelector('.make-container');
-  makeContainer.innerHTML = '';
-
-  const makeCounts = vehicles.reduce((acc, vehicle) => {
-    const { make } = vehicle;
-    acc[make] = (acc[make] || 0) + 1;
-    return acc;
-  }, {});
-  let makeValue = document.querySelector('#autocart-make-field').value;
-  // if(makeValue){
-  //     console.log('makeValue',makeValue);
-  // 	// dataStore.addFilter('make', makeValue);
-  // }
-  makeFilters = Object.entries(makeCounts).map(([make, count]) => {
-    return filterManager.createMakeFilter(
-      {
-        text: make,
-        checked: makeValue.toLowerCase() === make.toLowerCase(),
-        count,
-        models: fetchAvailableModels(vehicles, make),
-      },
-      dataStore
-    );
-  });
-  makeFilters.sort((a, b) => a.value.localeCompare(b.value));
-  makeFilters.forEach((make) => {
-    makeContainer.appendChild(make.generateCardHTML());
-    make.subscribe((m) => initModelContainer(m));
-  });
-}
-
-function createBodyTypeList(vehicles) {
-  const bodyTypeContainer = document.querySelector('.body-type-container');
-  bodyTypeContainer.innerHTML = '';
-
-  const bodyType = vehicles.reduce((acc, vehicle) => {
-    const { body_type } = vehicle;
-    acc[body_type] = (acc[body_type] || 0) + 1;
-    return acc;
-  }, {});
-
-  filterManager.resetList('body_type');
-
-  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))
-  });
-}
-
-function createTransmissionList(vehicles) {
-  const transmissionContainer = document.querySelector(
-    '.transmission-container'
-  );
-
-  transmissionContainer.innerHTML = '';
-
-  const transmission = vehicles.reduce((acc, vehicle) => {
-    const { transmission_type } = vehicle;
-    acc[transmission_type] = (acc[transmission_type] || 0) + 1;
-    return acc;
-  }, {});
-
-  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());
-  });
-}
-
-function createExteriorList(vehicles) {
-  console.log(vehicles);
-  const exteriorContainer = document.querySelector('.exterior-color');
-  exteriorContainer.innerHTML = '';
-  const exterior = vehicles.reduce((acc, vehicle) => {
-    const { exterior_color } = vehicle;
-    acc[exterior_color] = (acc[exterior_color] || 0) + 1;
-    return acc;
-  }, {});
-  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());
-  });
-}
-
-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());
     });
-  } else {
-    modelContainer.innerHTML = '<p>No models available</p>';
-  }
+
+    
 }
 
-function initTrimContainer(model) {
-  let list = [
-    ...new Set(
-      filterManager.modelFilters
-        .filter((m) => m.checked == true)
-        .map((m) => m.trims)
-        .flat()
-    ),
-  ];
+function createMakeList(vehicles){
 
-  // const uniqueArray = [...new Set(array)];
-  const trimContainer = document.querySelector('.trim-container');
+    const makeContainer = document.querySelector('.make-container');
+    makeContainer.innerHTML = '';
 
-  if (list.length === 0) {
-    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());
+    const makeCounts = vehicles.reduce((acc, vehicle) => {
+        const { make } = vehicle;
+        acc[make] = (acc[make] || 0) + 1;
+        return acc;
+    }, {});
+    let makeValue = document.querySelector('#autocart-make-field').value;
+	// if(makeValue){
+    //     console.log('makeValue',makeValue);
+	// 	// dataStore.addFilter('make', makeValue);
+	// }
+    makeFilters = Object.entries(makeCounts).map(([make, count]) => {
+   
+        return filterManager.createMakeFilter({
+            text: make,
+            checked: makeValue.toLowerCase() === make.toLowerCase(),
+            count, 
+            models: fetchAvailableModels(vehicles, make) 
+        }, dataStore);
     });
-  } else {
-    trimContainer.innerHTML = '<p>No trims available</p>';
-  }
+    makeFilters.sort((a, b) => a.value.localeCompare(b.value));
+    makeFilters.forEach(make => {
+        
+        makeContainer.appendChild(make.generateCardHTML());
+        make.subscribe(m=> initModelContainer(m))
+    });
+}
+
+function createBodyTypeList(vehicles){
+    const bodyTypeContainer = document.querySelector('.body-type-container');
+    bodyTypeContainer.innerHTML = '';
+
+    const bodyType = vehicles.reduce((acc, vehicle) => {
+        const { body_type } = vehicle;
+        acc[body_type] = (acc[body_type] || 0) + 1;
+        return acc;
+    }, {});
+
+    filterManager.resetList('body_type');
+    
+
+    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))
+    });
+}
+
+function createTransmissionList(vehicles){
+    const transmissionContainer = document.querySelector('.transmission-container');
+    
+    transmissionContainer.innerHTML = '';
+
+    const transmission = vehicles.reduce((acc, vehicle) => {
+        const { transmission_type } = vehicle;
+        acc[transmission_type] = (acc[transmission_type] || 0) + 1;
+        return acc;
+    }, {});
+
+    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());
+    });
+}
+
+function createExteriorList(vehicles){
+    console.log(vehicles);
+    const exteriorContainer = document.querySelector('.exterior-color');
+    exteriorContainer.innerHTML = '';
+    const exterior = vehicles.reduce((acc, vehicle) => {
+        const { exterior_color } = vehicle;
+        acc[exterior_color] = (acc[exterior_color] || 0) + 1;
+        return acc;
+    }, {});
+    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());
+    });
+}
+
+
+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());
+        });
+    } else {
+        modelContainer.innerHTML = '<p>No models available</p>';
+    }
+}
+
+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');
+  
+    if (list.length === 0) {
+        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());
+        });
+    } else {
+        trimContainer.innerHTML = '<p>No trims available</p>';
+    }
 }
 
 function fetchAvailableModels(vehicles, make) {
-  const filteredModels = vehicles
-    .filter((vehicle) => vehicle.make === make)
-    .map((vehicle) => vehicle.model);
-  // Count occurrences of each model
-  const modelCounts = filteredModels.reduce((acc, model) => {
-    acc[model] = (acc[model] || 0) + 1;
-    return acc;
-  }, {});
+    const filteredModels = vehicles
+        .filter(vehicle => vehicle.make === make)
+        .map(vehicle => vehicle.model);
+    // Count occurrences of each model
+    const modelCounts = filteredModels.reduce((acc, model) => {
+        acc[model] = (acc[model] || 0) + 1;
+        return acc;
+    }, {});
 
-  // Convert to an array of objects
-  const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({
-    model,
-    count,
-  }));
-  modelsArray.map((m) => (m['trims'] = fetchAvailableTrim(vehicles, m.model)));
-  return modelsArray;
+    // Convert to an array of objects
+    const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({ model, count }));
+    modelsArray.map(m=>m['trims'] = fetchAvailableTrim(vehicles, m.model))    
+    return modelsArray;
 }
 
-function fetchAvailableTrim(vehicles, modelName) {
-  const filteredVehicles = vehicles.filter(
-    (vehicle) => vehicle.model === modelName
-  );
-  const trimCount = filteredVehicles.reduce((result, vehicle) => {
-    vehicle.trim.forEach((trim) => {
-      const existingTrim = result.find((item) => item.text === trim);
-      if (existingTrim) {
-        existingTrim.count += 1;
-      } else {
-        result.push({ text: trim, count: 1 });
-      }
-    });
-    return result;
-  }, []);
-  return trimCount;
+function fetchAvailableTrim(vehicles, modelName){
+    const filteredVehicles = vehicles.filter(vehicle => vehicle.model === modelName);
+    const trimCount = filteredVehicles.reduce((result, vehicle) => {
+        vehicle.trim.forEach(trim => {
+            const existingTrim = result.find(item => item.text === trim);
+            if (existingTrim) {
+                existingTrim.count += 1;
+            } else {
+                result.push({ text: trim, count: 1 });
+            }
+        });
+        return result;
+    }, []);
+    return trimCount;
 }
 
-function updateModel(models) {
-  console.log('updateModel', models);
+function updateModel(models){
+    console.log('updateModel', models)
 }
 
+
+
 function debounce(func, delay) {
-  let timeout;
-  return function () {
-    const context = this;
-    const args = arguments;
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(context, args), delay);
-  };
+    let timeout;
+    return function () {
+        const context = this;
+        const args = arguments;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(context, args), delay);
+    };
 }
 
 function updatePrice() {
-  const min = price.getValueStart();
-  const max = price.getValue();
-  const formattedMin = '$' + min.toLocaleString();
-  const formattedMax = '$' + max.toLocaleString();
-  document.getElementById(
-    'priceRange'
-  ).textContent = `${formattedMin} to ${formattedMax}`;
-  debouncedSendReq();
+    const min = price.getValueStart();
+    const max = price.getValue();
+    const formattedMin = '$' + min.toLocaleString();
+    const formattedMax = '$' + max.toLocaleString();
+    document.getElementById('priceRange').textContent = `${formattedMin} to ${formattedMax}`;
+    debouncedSendReq();
 }
 
 function updateYear() {
-  const min = year.getValueStart();
-  const max = year.getValue();
-  document.getElementById('yearRange').textContent = `${min} to ${max}`;
-  debouncedSendReq();
+    const min = year.getValueStart();
+    const max = year.getValue();
+    document.getElementById('yearRange').textContent = `${min} to ${max}`;
+    debouncedSendReq();
 }
 
 function updateMileage() {
-  const min = kilometres.getValueStart();
-  const max = kilometres.getValue();
-  document.getElementById('KilometresRange').textContent = `${min} to ${max}`;
-  debouncedSendReq();
+    const min = kilometres.getValueStart();
+    const max = kilometres.getValue();
+    document.getElementById('KilometresRange').textContent = `${min} to ${max}`;
+    debouncedSendReq();
 }
 
 // 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 = `
+    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>
@@ -342,23 +309,18 @@ function createSkeletonCard() {
         <div class="h-5 bg-red-300 rounded-b-lg"></div>
       </div>
     `;
+  
+    skeletonCard.innerHTML = innerHTML;
+  
+    return skeletonCard;
+  }
 
-  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 listItem = document.createElement('li');
+    listItem.classList.add('w-full', 'bg-custom-red', 'rounded-lg', 'shadow-md', 'animate-pulse');
 
-  const innerHTML = `
+    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>
         
@@ -366,7 +328,7 @@ function createSkeletonListItem() {
     </div>
     `;
 
-  listItem.innerHTML = innerHTML;
+    listItem.innerHTML = innerHTML;
 
-  return listItem;
-}
+    return listItem;
+}

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,22 +298,45 @@ 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) {
-	filtersDrawer.style.translate = 0;
-	filterToggle.classList.add('selected')
+	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() {
 	
-  } else {
-    // filtersDrawer.classList.add('hidden'); // Close the drawer
-	filterToggle.classList.remove('selected')
-	filtersDrawer.style.translate = "-100%";
-
-
-  }
+	filtersDrawerCheckbox.checked = false;
+    filtersDrawerCheckbox.dispatchEvent(new Event('change'));
 });
 
 

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>
@@ -372,7 +372,7 @@ $carMakes = [
             'autocart_nonce': jQuery('#autocart_nonce').val(),
         };
         jQuery(" #button-content").text("Loading...");
-        loading.classList.remove('hidden');
+        loading.classList.remove('hidden'); 
 
         jQuery.ajax({
             type: 'POST',
@@ -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,12 +389,12 @@ $carMakes = [
                         });
                     }
                     jQuery(" #button-content").text("Search (" + vehicles.length + ")");
-                } else {
+                }else{
                     alert(response.data.message);
                     jQuery(" #button-content").text("Search");
 
                 }
-
+                
             },
             error: function(xhr, status, error) {
                 loading.classList.add('hidden'); // Hide the btn-ring on error

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">