finance form template displayed
This commit is contained in:
@@ -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'));
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user