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

finance form template displayed

Browse Source
This commit is contained in:
Prospect
2024-04-09 12:35:05 -04:00
parent 67e0407058
commit 57facdd65c
9 changed files with 903 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assets/css/styles.css
View File

@@ -2017,10 +2017,6 @@ select {
bottom: 100%; bottom: 100%;
} }
.left-0 {
left: 0px;
}
.left-2 { .left-2 {
left: 0.5rem; left: 0.5rem;
} }
@@ -2777,6 +2773,11 @@ html {
background-color: rgb(89 10 12/var(--tw-bg-opacity)); background-color: rgb(89 10 12/var(--tw-bg-opacity));
} }
.hover\:bg-stone-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209/var(--tw-bg-opacity));
}
.hover\:bg-stone-500:hover { .hover\:bg-stone-500:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(120 113 108/var(--tw-bg-opacity)); background-color: rgb(120 113 108/var(--tw-bg-opacity));
@@ -2787,21 +2788,6 @@ html {
background-color: rgb(87 83 78/var(--tw-bg-opacity)); background-color: rgb(87 83 78/var(--tw-bg-opacity));
} }
.hover\:bg-stone-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 244/var(--tw-bg-opacity));
}
.hover\:bg-stone-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(231 229 228/var(--tw-bg-opacity));
}
.hover\:bg-stone-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209/var(--tw-bg-opacity));
}
.hover\:text-white:hover { .hover\:text-white:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255/var(--tw-text-opacity)); color: rgb(255 255 255/var(--tw-text-opacity));

10
autocart_assets/css/filter-panel.css
View File

@@ -209,7 +209,7 @@ li.mdc-list-item:hover {
#slide-out-filters{ #slide-out-filters{
transition: 300ms ease-in-out; transition: 300ms ease-in-out;
translate: -100%; /* translate: -100%; */
} }
@@ -238,4 +238,12 @@ li.mdc-list-item:hover {
.sticky-container{ .sticky-container{
position: static; position: static;
} }
/*
#applied-filters-container{
position: fixed;
bottom: 0px;
z-index: 50;
width: 100%;
right: 0;
} */
} }

1050
autocart_assets/js/FinanceForm.js
View File

File diff suppressed because it is too large Load Diff

558
autocart_assets/js/index.js
View File

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

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

@@ -34,6 +34,8 @@ $response = get_transient("autocart_response");
<!-- Main Content --> <!-- Main Content -->
<div class="flex-grow flex max-w-7xl mx-auto"> <div class="flex-grow flex max-w-7xl mx-auto">
<!-- Left Drawer for Filters --> <!-- 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"> <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 mdc-select--outlined col-xl-3 rounded pb-2 w-full" id="order-by">
<div class="mdc-select__anchor"> <div class="mdc-select__anchor">
@@ -237,7 +239,7 @@ $response = get_transient("autocart_response");
<div class="flex items-center space-x-4"> <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="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> <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> <i id="filter-toggle" class="fas fa-sliders-h text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110"></i>
</label> </label>
<input type="checkbox" data-menu id="open-menu" class="peer hidden"> <input type="checkbox" data-menu id="open-menu" class="peer hidden">
@@ -263,6 +265,8 @@ if ($make) {
const filtersDrawerCheckbox = document.getElementById('open-menu'); const filtersDrawerCheckbox = document.getElementById('open-menu');
const filtersDrawer = document.querySelector('#slide-out-filters'); const filtersDrawer = document.querySelector('#slide-out-filters');
const filterToggle = document.querySelector('#filter-toggle'); const filterToggle = document.querySelector('#filter-toggle');
const overlay = document.getElementById('overlay');
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
price = new mdc.slider.MDCSlider(document.querySelector('#autocart-price-range-field')); 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"; // 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() { filtersDrawerCheckbox.addEventListener('change', function() {
if (this.checked) { if (this.checked) {
filtersDrawer.style.translate = 0; overlay.classList.remove('hidden');
filterToggle.classList.add('selected') 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 { filtersDrawerCheckbox.checked = false;
// filtersDrawer.classList.add('hidden'); // Close the drawer filtersDrawerCheckbox.dispatchEvent(new Event('change'));
filterToggle.classList.remove('selected')
filtersDrawer.style.translate = "-100%";
}
}); });

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

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

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

@@ -174,7 +174,7 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
?> ?>
<div class="max-w-7xl mx-auto grid"> <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"> <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"> <img src="<?php echo $vehicle_images[0]['url']; ?>" alt="<?php echo $image_title; ?>" class="w-full h-full object-cover">

44
page-car-loan-calculator.php
View File

@@ -16,16 +16,48 @@
<!-- Car Loan Calculator Form --> <!-- Car Loan Calculator Form -->
<section class="max-w-7xl mx-auto"> <section class="max-w-7xl mx-auto">
<div class="py-8 flex items-center justify-center"> <div class="px-4 py-8">
<div> <div>
<p style="width: 260px"><a href="http://www.carpaymentcalcualtor.net"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/rogers-motors-logo.png" alt="Rogers Motors Full Logo" /></a></p> <p style="width: 300px"><a href="http://www.carpaymentcalcualtor.net"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/rogers-motors-logo.png" alt="Rogers Motors Full Logo" /></a></p>
<p style="width: 260px"><iframe src="https://www.carpaymentcalculator.net/free-tools/calc.php" frameborder="0" height="350px" scrolling="no"></iframe></p> <div id="appointment-body"></div>
<p>
<font size="1">Powered by <a href="https://www.carpaymentcalculator.net/free-tools/">Free Auto Calculator</a></font>
</p>
</div> </div>
</div> </div>
<style>
button#next-step,
[data-tab] {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const appointmentForm = new AppointmentForm();
if (appointmentForm) {
const financeForm = new FinanceForm({}, appointmentForm, () => {});
const appointmentBody = document.querySelector('#appointment-body');
let userForm = financeForm.initForm();
const elementsToRemove = userForm.querySelectorAll('.finance-view-only');
elementsToRemove.forEach(element => {
element.remove();
});
appointmentBody.appendChild(userForm);
financeForm.updateView();
const advertisePriceInput = document.getElementById('advertise_price');
advertisePriceInput.value = 2500;
advertisePriceInput.dispatchEvent(new Event('input', {
bubbles: true
}));
}
});
</script>
</section> </section>

24
src/scss/vendors/tailwind/_tailwind.scss vendored
View File

@@ -1273,10 +1273,6 @@ select {
bottom: 100%; bottom: 100%;
} }
.left-0 {
left: 0px;
}
.left-2 { .left-2 {
left: 0.5rem; left: 0.5rem;
} }
@@ -2050,6 +2046,11 @@ html {
background-color: rgb(89 10 12 / var(--tw-bg-opacity)); background-color: rgb(89 10 12 / var(--tw-bg-opacity));
} }
.hover\:bg-stone-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209 / var(--tw-bg-opacity));
}
.hover\:bg-stone-500:hover { .hover\:bg-stone-500:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(120 113 108 / var(--tw-bg-opacity)); background-color: rgb(120 113 108 / var(--tw-bg-opacity));
@@ -2060,21 +2061,6 @@ html {
background-color: rgb(87 83 78 / var(--tw-bg-opacity)); background-color: rgb(87 83 78 / var(--tw-bg-opacity));
} }
.hover\:bg-stone-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 244 / var(--tw-bg-opacity));
}
.hover\:bg-stone-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(231 229 228 / var(--tw-bg-opacity));
}
.hover\:bg-stone-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209 / var(--tw-bg-opacity));
}
.hover\:text-white:hover { .hover\:text-white:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));