317 lines
13 KiB
PHP
317 lines
13 KiB
PHP
<?php
|
|
/*
|
|
Template Name: Autocart Results
|
|
*/
|
|
get_header();
|
|
// Get filter values from URL parameters
|
|
|
|
$minPrice = isset($_GET['minPrice']) ? sanitize_text_field($_GET['minPrice']): null;
|
|
$maxPrice = isset($_GET['maxPrice']) ? sanitize_text_field($_GET['maxPrice']):null;
|
|
|
|
$minKilometres = isset($_GET['minKilometres']) ? sanitize_text_field($_GET['minKilometres']): null;
|
|
$maxKilometres = isset($_GET['maxKilometres']) ? sanitize_text_field($_GET['maxKilometres']):null;
|
|
|
|
$make = isset($_GET['make']) ? sanitize_text_field($_GET['make']):null;
|
|
$minYear = isset($_GET['minYear']) ? (int)sanitize_text_field($_GET['minYear']):null;
|
|
$maxYear = isset($_GET['maxYear']) ? (int)sanitize_text_field($_GET['maxYear']):null;
|
|
// echo '<pre>';var_dump($minYear);echo '<br>'; var_dump($maxYear);exit;
|
|
|
|
|
|
$startYear = 2012;
|
|
$endYear = (int)date('Y');
|
|
|
|
|
|
|
|
|
|
// Exit the script
|
|
// exit;
|
|
// Generate nonce
|
|
$ajax_nonce = wp_create_nonce("update-filters-ajax-nonce");
|
|
|
|
$response = get_transient("autocart_response");
|
|
|
|
?>
|
|
<!-- Main Content -->
|
|
<div class="flex-grow flex max-w-7xl mx-auto">
|
|
<!-- Left Drawer for Filters -->
|
|
<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">
|
|
<span class="mdc-notched-outline">
|
|
<span class="mdc-notched-outline__leading"></span>
|
|
<span class="mdc-notched-outline__notch" style="border-left: none; border-right: none;">
|
|
<span id="outlined-select-label" class="mdc-floating-label">Sort By</span>
|
|
</span>
|
|
<span class="mdc-notched-outline__trailing"></span>
|
|
</span>
|
|
<span class="mdc-select__selected-text-container">
|
|
<span class="mdc-select__selected-text"></span>
|
|
</span>
|
|
<span class="mdc-select__dropdown-icon">
|
|
<svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5" focusable="false">
|
|
<polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
|
|
<polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
|
|
<ul class="mdc-list" role="listbox" aria-label="Sort By" id="sort-options-list">
|
|
<!-- Options will be dynamically added here using JavaScript -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<!-- Panel 1 -->
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
|
<div class="w-full text-left focus:outline-none transition"> Price </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<div class="flex justify-center items-center">
|
|
<span id="priceRange" class="slider-readings"> <?php echo '$' . number_format($minPrice) . ' to $' . number_format($maxPrice) ?> </span></div>
|
|
<div class="mdc-slider mdc-slider--range" id="autocart-price-range-field">
|
|
<input class="mdc-slider__input" type="range" min="10000" max="80000" value="
|
|
<?php echo isset($minPrice)? $minPrice: 10000 ?>" name="rangeStart" aria-label="Continuous range slider demo">
|
|
<input class="mdc-slider__input" type="range" min="10000" max="80000" value="<?php echo isset($maxPrice)? $maxPrice: 80000 ?>" name="rangeEnd" aria-label="Continuous range slider demo">
|
|
<div class="mdc-slider__track">
|
|
<div class="mdc-slider__track--inactive"></div>
|
|
<div class="mdc-slider__track--active">
|
|
<div class="mdc-slider__track--active_fill"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mdc-slider__thumb">
|
|
<div class="mdc-slider__thumb-knob"></div>
|
|
</div>
|
|
<div class="mdc-slider__thumb">
|
|
<div class="mdc-slider__thumb-knob"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Panel 2 -->
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
|
<div class="w-full text-left focus:outline-none transition"> Year </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<div class="flex justify-center items-center">
|
|
<span id="yearRange" class="slider-readings"> <?php echo $minYear .' to '.$maxYear; ?> </span>
|
|
</div>
|
|
<div class="mdc-slider mdc-slider--range" id="autocart-year-range-field">
|
|
<input class="mdc-slider__input" type="range" min="<?php echo $startYear ?>" max="<?php echo $endYear ?>" value="<?php echo isset($minYear) ? $minYear : $startYear ?>" name="rangeStart" aria-label="Continuous range slider demo">
|
|
<input class="mdc-slider__input" type="range" min="<?php echo $startYear ?>" max="<?php echo $endYear ?>" value="<?php echo isset($maxYear) ? $maxYear : $endYear ?>" name="rangeEnd" aria-label="Continuous range slider demo">
|
|
<div class="mdc-slider__track">
|
|
<div class="mdc-slider__track--inactive"></div>
|
|
<div class="mdc-slider__track--active">
|
|
<div class="mdc-slider__track--active_fill"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mdc-slider__thumb">
|
|
<div class="mdc-slider__thumb-knob"></div>
|
|
</div>
|
|
<div class="mdc-slider__thumb">
|
|
<div class="mdc-slider__thumb-knob"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Panel 3 -->
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
|
<div class="w-full text-left focus:outline-none transition"> Kilometres </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<div class="flex justify-center items-center">
|
|
<span id="KilometresRange" class="slider-readings">19000 to 222000 </span>
|
|
</div>
|
|
<div class="mdc-slider mdc-slider--range" id="autocart-kilometres-range-field">
|
|
<input class="mdc-slider__input" type="range" min="19000" max="222000" value="19000" name="rangeStart" aria-label="Continuous range slider demo">
|
|
<input class="mdc-slider__input" type="range" min="19000" max="222000" value="222000" name="rangeEnd" aria-label="Continuous range slider demo">
|
|
<div class="mdc-slider__track">
|
|
<div class="mdc-slider__track--inactive"></div>
|
|
<div class="mdc-slider__track--active">
|
|
<div class="mdc-slider__track--active_fill"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mdc-slider__thumb">
|
|
<div class="mdc-slider__thumb-knob"></div>
|
|
</div>
|
|
<div class="mdc-slider__thumb">
|
|
<div class="mdc-slider__thumb-knob"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel 4 -->
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
|
<div class="w-full text-left focus:outline-none transition"> Make </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<ul class="make-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg w-full">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header" id="model-collapse-toggle ">
|
|
<div class="w-full text-left focus:outline-none transition"> Model </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<ul class="model-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg w-full ">
|
|
<p>Please Select a Make.</p>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
|
<div class="w-full text-left focus:outline-none transition"> Trim </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<ul class="trim-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg w-full">
|
|
<p>Please Select a Model.</p>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
|
<div class="w-full text-left focus:outline-none transition"> Body Style </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<ul class="body-type-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg w-full">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
|
<div class="w-full text-left focus:outline-none transition"> Transmission </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<ul class="transmission-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg w-full">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded p-2" collapse-toggle>
|
|
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
|
<div class="w-full text-left focus:outline-none transition"> Exterior Color </div>
|
|
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
|
|
|
</div>
|
|
<div class="mt-2 ac-accordion-content">
|
|
<ul class="exterior-color list-none text-gray-900 bg-white text-sm font-medium rounded-lg w-full">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add more filters as needed -->
|
|
</aside>
|
|
<!-- Main Content -->
|
|
<div class="w-3/4 ml-1/4 p-4 pb-0 flex-grow">
|
|
<!-- Top App Bar with Menu Button -->
|
|
<header class="shadow-lg bg-white p-4 flex justify-between items-center rounded" >
|
|
<div class="mt-2" id="applied-filters-block"></div>
|
|
<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">
|
|
<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">
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Vehicle List -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4 vehicles-container">
|
|
<!-- Vehicle Cards go here -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
wp_nonce_field('autocart_nonce', 'autocart_nonce'); ?> <?php get_footer();
|
|
|
|
if ($make) {
|
|
echo "<input type='hidden' id='autocart-make-field' value='$make'>";
|
|
} ?>
|
|
|
|
<script>
|
|
|
|
const filtersDrawerCheckbox = document.getElementById('open-menu');
|
|
const filtersDrawer = document.querySelector('#slide-out-filters');
|
|
const filterToggle = document.querySelector('#filter-toggle');
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
price = new mdc.slider.MDCSlider(document.querySelector('#autocart-price-range-field'));
|
|
year = new mdc.slider.MDCSlider(document.querySelector('#autocart-year-range-field'));
|
|
kilometres = new mdc.slider.MDCSlider(document.querySelector('#autocart-kilometres-range-field'));
|
|
price.listen('MDCSlider:input', updatePrice);
|
|
year.listen('MDCSlider:input', updateYear);
|
|
kilometres.listen('MDCSlider:input', updateMileage);
|
|
|
|
new DisplayMode();
|
|
dataStore = new DataStore([]);
|
|
|
|
new SortBy(dataStore);
|
|
sendReq();
|
|
|
|
|
|
const accordionItems = document.querySelectorAll("[collapse-toggle]");
|
|
|
|
accordionItems.forEach(item => {
|
|
const header = item.querySelector(".ac-accordion-header");
|
|
const content = item.querySelector(".ac-accordion-content");
|
|
const icon = header.querySelector("i.fas");
|
|
|
|
header.addEventListener("click", function() {
|
|
item.classList.toggle("collapsed");
|
|
// content.classList.toggle('hidden');
|
|
icon.classList.toggle('fa-chevron-down');
|
|
icon.classList.toggle('fa-chevron-up');
|
|
// content.style.display = content.style.display === "none" ? "block" : "none";
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
|
|
filtersDrawerCheckbox.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
filtersDrawer.style.translate = 0;
|
|
filterToggle.classList.add('selected')
|
|
|
|
} else {
|
|
// filtersDrawer.classList.add('hidden'); // Close the drawer
|
|
filterToggle.classList.remove('selected')
|
|
filtersDrawer.style.translate = "-100%";
|
|
|
|
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|