WordPress_Themes/Rogers_Motors_Theme
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme sync

Browse Source
This commit is contained in:
Prospect
2024-04-08 06:32:26 -04:00
parent 74d73feffa
commit 67e0407058
13 changed files with 844 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
autocart_assets/templates/autocart-results.php
View File

@@ -34,8 +34,8 @@ $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">
<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>
@@ -62,16 +62,13 @@ $response = get_transient("autocart_response");
</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="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>
<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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</div>
<div class="mt-2">
<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">
@@ -94,16 +91,13 @@ $response = get_transient("autocart_response");
</div>
</div>
<!-- Panel 2 -->
<div class="border rounded p-2">
<div class="flex justify-between items-center p-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"> 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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</div>
<div class="mt-2">
<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>
@@ -126,16 +120,13 @@ $response = get_transient("autocart_response");
</div>
</div>
<!-- Panel 3 -->
<div class="border rounded p-2">
<div class="flex justify-between items-center p-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"> 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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</div>
<div class="mt-2">
<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>
@@ -159,95 +150,77 @@ $response = get_transient("autocart_response");
</div>
<!-- Panel 4 -->
<div class="border rounded p-2">
<div class="flex justify-between items-center p-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>
<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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-4">
<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>
<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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</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">
<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">
<div class="flex justify-between items-center p-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"> 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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-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"> 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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-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"> 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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</div>
<div class="mt-2">
<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">
<div class="flex justify-between items-center p-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"> 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>
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
</div>
<div class="mt-2">
<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>
@@ -259,11 +232,15 @@ $response = get_transient("autocart_response");
<!-- 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">
<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>
@@ -283,18 +260,57 @@ if ($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>

29
autocart_assets/templates/search-form.php
View File

@@ -193,9 +193,12 @@ $carMakes = [
<?php wp_nonce_field('autocart_nonce', 'autocart_nonce'); ?>
<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 rounded" id="inventory-search-button">
<i class="bi-search mr-2"></i>Search
<div class="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 class="btn-ring hidden"></span>
</button>
</div>
</div>
@@ -330,6 +333,7 @@ $carMakes = [
// const price = document.querySelector('#autocart-price-field');
const year = document.querySelector('#vehicle_search_year');
const make = document.querySelector('#vehicle_search_make');
const loading = document.querySelector('.btn-ring');
// let priceRange = JSON.parse(priceWidget.value);
// let minPrice = priceRange[0];
@@ -367,32 +371,37 @@ $carMakes = [
'make': make.value,
'autocart_nonce': jQuery('#autocart_nonce').val(),
};
jQuery("#inventory-search-button").text("Loading...");
jQuery(" #button-content").text("Loading...");
loading.classList.remove('hidden');
jQuery.ajax({
type: 'POST',
url: ajax_object.ajax_url,
data: formData,
success: function(response) {
if(response.success){
loading.classList.add('hidden'); // Hide the btn-ring on success
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{
jQuery(" #button-content").text("Search (" + vehicles.length + ")");
} else {
alert(response.data.message);
jQuery("#inventory-search-button").text("Search");
jQuery(" #button-content").text("Search");
}
},
error: function(xhr, status, error) {
loading.classList.add('hidden'); // Hide the btn-ring on error
console.log(xhr.responseText);
console.log('Status: ' + status);
console.log('Error: ' + error);
jQuery("#inventory-search-button").text("Error");
// jQuery("").text("Error");
}
});
}

103
autocart_assets/templates/single-vehicle.php
View File

@@ -173,8 +173,8 @@ $image_title = !empty($vehicle_images[0]['title']) ? $vehicle_images[0]['title']
$image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images[0]['description'] : '';
?>
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2">
<div class="max-w-7xl mx-auto grid">
<div class="grid grid-cols-2 hidden lg: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">
@@ -211,12 +211,12 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
</div>
<div class="bg-gray-100 dark:bg-gray-800 py-4">
<div class="bg-gray-100 dark:bg-gray-800 py-4 grid">
<!-- Single Car Information -->
<div class="lg:grid grid-cols-3 relative">
<div class="lg:grid lg:grid-cols-3 grid grid-cols-1 relative">
<!-- Vehicle Details -->
<div class="mx-auto col-span-2">
<div class="lg:mx-auto md:mx-auto col-span-2">
<!-- Single Car -->
<div class="m-4">
@@ -319,18 +319,31 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
<p class="mb-4 font-bold text-gray-700 dark:text-gray-300">Options</p>
<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white mt-4 transition-all duration-300" data-inactive-classes="text-gray-500 dark:text-gray-400">
<div class="md:grid grid-cols-3">
<ul class="col-span-1 flex-column space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
<?php foreach ($groupedFeatures as $category => $features) : ?>
<?php
// Remove special characters and spaces from category for use in HTML IDs
$categorySlug = strtolower(preg_replace('/[^a-z0-9]/', '', $category));
?>
<button class="inline-flex items-center text-left px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-300 w-full dark:hover:bg-gray-700 dark:hover:text-white text-gray-900 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 ripple-effect" data-tab-target="#tab-<?= $categorySlug ?>-body-1" data-te-ripple-init>
<?= $category ?>
</button>
<?php endforeach; ?>
</ul>
<div class="sticky-container col-span-2 p-6 bg-gray-50 text-medium text-gray-900 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 top-32 lg:top-56" id="tabs-viewer">
<div class="lg:col-span-1 sm:flex-rows flex-row md:block flex md:col-span-1 lg:flex-column md:flex-column text-sm font-medium text-gray-500 dark:text-gray-400 w-full gap-4">
<button id="tabs-left" class="md:hidden lg:hidden inline-flex items-center justify-center px-2 py-2 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 disabled:opacity-50 rounded-lg md:me-4 mb-4">
<i class="fas fa-angle-left"></i>
</button>
<ul id="tabs-container" class="lg:col-span-1 sm:flex-rows flex-row md:block flex overflow-scroll md:col-span-1 lg:flex-column md:flex-column lg:space-y-4 md:space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0 w-full overflow-scroll md:me-4 mb-4 gap-4">
<?php foreach ($groupedFeatures as $category => $features) : ?>
<?php
// Remove special characters and spaces from category for use in HTML IDs
$categorySlug = strtolower(preg_replace('/[^a-z0-9]/', '', $category));
?>
<button class="inline-flex items-center text-left lg:text-left md:text-left sm:text-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-300 w-full dark:hover:bg-gray-700 dark:hover:text-white text-gray-900 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 md:ripple-effect lg:ripple-effect" data-tab-target="#tab-<?= $categorySlug ?>-body-1" data-te-ripple-init>
<?= $category ?>
</button>
<?php endforeach; ?>
</ul>
<button id="tabs-right" class="md:hidden lg:hidden inline-flex items-center justify-center px-2 py-2 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 disabled:opacity-50 rounded-lg md:me-4 mb-4">
<i class="fas fa-angle-right"></i>
</button>
</div>
<div class="sticky-container col-span-2 p-6 bg-gray-50 text-medium text-gray-900 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 top-32 lg:top-56 lg:ml-4 md:ml-4" id="tabs-viewer">
</div>
@@ -357,8 +370,8 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
</div>
<!-- Vehicle Financing and Booking Widget -->
<div class="px-4 col-span-1 relative">
<div class="sticky-container grid gap-3 top-56">
<div class="px-4 col-span-1 relative order-first md:order-last">
<div class="sticky-container grid gap-3 top-56">
<button role="button" class="prev px-2 py-2 rounded-full bg-neutral-100 text-neutral-900 group absolute top-1/4 left-4 transform -translate-y-1/2 z-10" aria-label="prev" onclick="navigateSlider(-1)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 group-active:-translate-x-2 transition-all duration-200 ease-linear">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
@@ -568,7 +581,7 @@ const mergedDetails = {
selector: 'glightbox',
touchNavigation: true,
loop: true,
startAt: selectedSlide, // Set the starting slide
startAt: selectedSlide,
onClose: function() {
const slideElements = document.querySelectorAll('#thumbnailContainer .thumbnail');
if (slideElements.length >= lightbox.index) {
@@ -609,6 +622,18 @@ const mergedDetails = {
}
jQuery(document).ready(function() {
const tabsLeftButton = document.getElementById('tabs-left');
const tabsRightButton = document.getElementById('tabs-right');
tabsLeftButton.addEventListener('click', function () {
scrollTabs(-1);
});
tabsRightButton.addEventListener('click', function () {
scrollTabs(1);
});
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
@@ -663,7 +688,6 @@ const mergedDetails = {
function rippleEffect(event) {
const btn = event.currentTarget;
// Add classes to the selected element
btn.classList.add("overflow-hidden", "shadow", "relative");
const circle = document.createElement("span");
@@ -703,9 +727,8 @@ const mergedDetails = {
function scrollCarouselRight() {
const carousel = document.querySelector('.overflow-x-scroll');
const maxScrollRight = carousel.scrollWidth - carousel.offsetWidth; // Calculate max scrollable distance
const maxScrollRight = carousel.scrollWidth - carousel.offsetWidth;
// Prevent scrolling beyond the end
if (carousel.scrollLeft >= maxScrollRight) {
return;
}
@@ -715,4 +738,38 @@ const mergedDetails = {
behavior: 'smooth'
});
}
function scrollTabs(direction) {
const tabsContainer = document.getElementById('tabs-container');
const tabs = tabsContainer.querySelectorAll('button');
let totalWidth = 0;
tabs.forEach(tab => {
console.log(tab.offsetWidth);
if (isElementVisible(tab)) {
totalWidth += tab.offsetWidth;
}
});
const scrollAmount = direction * totalWidth;
tabsContainer.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
}
function isElementVisible(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
</script>