WordPress_Themes/Rogers_Motors_Theme
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
7e24bb59ec67c28bacb2bc347f806104fa59b009
Rogers_Motors_Theme/autocart_assets/templates/autocart-results.php
Prospect 03e44e02f0 theme and plugin sync
2024-03-20 17:38:18 -04:00

301 lines
13 KiB
PHP
Raw Blame History

<?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 class="w-1/4 p-4 shadow-lg bg-white hidden md:block rounded">
<div class="mdc-select mdc-select--outlined .col-xl-3 rounded p-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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Price </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Year </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Kilometres </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Make </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Model </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Trim </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Body Style </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Transmission </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<div class="w-full text-left focus:outline-none transition"> Exterior Color </div>
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="mt-2">
<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>
</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>
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();
});
</script>
Reference in New Issue View Git Blame Copy Permalink