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

Compare commits

base: WordPress_Themes:13487b23e3ea1bbeb0e70167e5823c91a2eaa340
Branches Tags
WordPress_Themes:master
..
compare: WordPress_Themes:master
Branches Tags
WordPress_Themes:master

6 Commits
13487b23e3 ... master

Author SHA1 Message Date
Prospect
57facdd65c finance form template displayed 2024-04-09 12:35:05 -04:00
Prospect
67e0407058 theme sync 2024-04-08 06:32:26 -04:00
Prospect
74d73feffa plugin assets sync 2024-03-28 11:23:33 -04:00
Prospect
9d002773c8 code updates 2024-03-25 11:43:15 -04:00
Prospect
7e24bb59ec Merge branch 'master' of https://git.harplabs.com/WordPress_Themes/Rogers_Motors_Theme 2024-03-25 02:28:55 -04:00
Prospect
7d46673042 plugin and theme sync 2024-03-25 02:27:05 -04:00
25 changed files with 1534 additions and 782 deletions
Expand all files Collapse all files

40
assets/css/styles.css
View File

@@ -256,6 +256,18 @@ textarea {
background-color: var(--gray-100) !important;
}
button:disabled {
background-color: var(--gray-200);
color: black;
cursor: not-allowed;
}
button:disabled:hover {
background-color: var(--gray-500);
color: white;
cursor: not-allowed;
}
.toggle-menu {
height: 40px;
display: flex;
@@ -690,7 +702,7 @@ body.login {
text-decoration: underline;
}
.menu-item:hover {
#menu-main-menu .menu-item:hover {
background-color: var(--primary-500);
color: #fff;
}
@@ -705,6 +717,10 @@ body.login {
font-size: 12px; /* Adjust the size as needed */
}
.menu-item-has-children:hover > a:after {
color: #fff; /* Change the color as needed */
}
/* Hide sub-menu items by default */
.sub-menu {
width: max-content;
@@ -2001,10 +2017,6 @@ select {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-2 {
left: 0.5rem;
}
@@ -2308,6 +2320,10 @@ select {
border-width: 8px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-t {
border-top-width: 1px;
}
@@ -2316,10 +2332,6 @@ select {
border-top-width: 4px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219/var(--tw-border-opacity));
@@ -2544,11 +2556,6 @@ select {
line-height: 1;
}
.text-7xl {
font-size: 4.5rem;
line-height: 1;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
@@ -2766,6 +2773,11 @@ html {
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 {
--tw-bg-opacity: 1;
background-color: rgb(120 113 108/var(--tw-bg-opacity));

34
assets/js/index.js
View File

File diff suppressed because one or more lines are too long

2
assets/js/index.js.map
View File

File diff suppressed because one or more lines are too long

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

@@ -94,4 +94,156 @@ li.autocart-filters:hover {
.sticky-container{
position: sticky;
}
.bg-custom-red {
background-color: rgb(150 29 32 / 10%);
}
.bg-custom-red-light {
background-color: rgb(217 72 74 / 50%);
}
.bg-custom-red-opacity {
background-color: rgb(150 29 32 / 30%);
}
.mdc-list-item {
height: 48px;
display: -ms-flexbox;
display: flex;
position: relative;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 0 16px;
overflow: hidden;
}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
color: var(--mdc-theme-primary) !important;
}
li.mdc-list-item:hover {
background-color:var(--mdc-theme-primary);
color: #fff;
}
.btn-process {
font-size: 2rem;
font-family: 'Montserrat', sans-serif;
background-color: #256EFF;
box-shadow: 0px 15px 27px 2px rgba(37, 110, 255, 0.28);
border: none;
outline: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 3rem;
border-radius: 1rem;
color: #fff;
cursor: pointer;
}
.btn-ring:after {
content: "";
display: block;
width: 25px;
height: 25px;
margin: 0 8px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: ring 1.2s linear infinite;
}
@keyframes ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.btn-ring.loading {
display: inline-block;
}
.loading .btn-ring {
display: block;
}
.ac-accordion-content {
padding: 10px;
display: block; /* Start with display: block to ensure proper height transition */
overflow: hidden; /* Hide overflowing content */
transition: height 0.3s ease; /* Add transition for height */
}
.collapsed .ac-accordion-content {
height: 0; /* Collapse the content by setting height to 0 */
padding-top: 0;
padding-bottom: 0;
transition: height 0.3s ease; /* Add transition for height */
}
.order-mobile-first {
order: 2;
}
.order-mobile-second {
order: 1;
}
/* Web Order (Normal order on larger screens) */
.order-web-first {
order: 1;
}
.order-web-second {
order: 2;
}
#slide-out-filters{
transition: 300ms ease-in-out;
/* translate: -100%; */
}
/* Styles for screens wider than 768px (web view) */
@media screen and (min-width: 768px) {
.container {
width: 70%;
margin: 0 auto;
}
h1 {
font-size: 2em;
}
#slide-out-filters{
translate: 0;
translate: 0px;
position: static;
z-index: 40;
width: 25%;
}
}
/* Styles for screens narrower than 768px (mobile view) */
@media screen and (max-width: 768px) {
.sticky-container{
position: static;
}
/*
#applied-filters-container{
position: fixed;
bottom: 0px;
z-index: 50;
width: 100%;
right: 0;
} */
}

177
autocart_assets/js/AppointmentForm.js
View File

@@ -1,6 +1,15 @@
class AppointmentForm {
constructor(vehicle) {
this.vehicle = vehicle;
this.inputs = [
'name',
'email',
'phone',
'preferred-contact',
'message',
'agreeToOffersCheckbox',
'privacyPolicyCheckbox',
];
this.initForm();
this.modalDiv = null;
this.name = 'appointmentForm';
@@ -21,6 +30,7 @@ class AppointmentForm {
},
];
let checkboxes = ``;
const vehicleInput = `<input type="hidden" name="vehicle" id="vehicle" value='${JSON.stringify(this.vehicle)}'>`;
inputIds.forEach((input) => {
checkboxes += `
<div class=" mdc-form-field flex flex-row flex-nowrap w-full my-2 lg:my-0 ${input.name} hover:text-red-500">
@@ -38,38 +48,41 @@ class AppointmentForm {
</div>`;
});
this.modalDiv.innerHTML = `
<form class="p-4 md:p-5">
<div class="grid gap-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
<input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Jane Doe" required="">
</div>
<div class="col-span-2">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="jane@gmail.com" required="">
</div>
<div class="col-span-2 ">
<label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone</label>
<input type="tel" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="(123) 456-7890" required="">
</div>
<div class="col-span-2 ">
<label for="preferred-contact" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Preferred Contact Method</label>
<select id="preferred-contact" name="preferred-contact" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<option selected="">---</option>
<option value="Call">Call</option>
<option value="Email">Email</option>
<option value="Text">Text</option>
</select>
</div>
<div class="col-span-2">
<label for="message" name="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Product Description</label>
<textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="I am interested in..."></textarea>
</div>
</div>
${checkboxes}
<button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300" id="send-button">Send</button>
<form class="p-4 md:p-5" id="appointmentForm">
<div class="grid gap-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
<input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Jane Doe" required>
<div id="nameError" class="text-red-500 hidden">Please enter your name.</div>
</div>
<div class="col-span-2">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="jane@gmail.com" required>
<div id="emailError" class="text-red-500 hidden">Please enter a valid email address.</div>
</div>
<div class="col-span-2 ">
<label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone</label>
<input type="tel" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="(123) 456-7890" required>
<div id="phoneError" class="text-red-500 hidden">Please enter a valid phone number.</div>
</div>
<div class="col-span-2 ">
<label for="preferred-contact" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Preferred Contact Method</label>
<select id="preferred-contact" name="preferred-contact" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<option selected disabled>---</option>
<option value="Call">Call</option>
<option value="Email" selected>Email</option>
<option value="Text">Text</option>
</select>
<div id="preferredContactError" class="text-red-500 hidden">Please select a preferred contact method.</div>
</div>
<div class="col-span-2">
<label for="message" name="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Product Description</label>
<textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="I am interested in..."></textarea>
</div>
</div>
${vehicleInput}
${checkboxes}
<button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300 finance-view-only" id="send-button">Send</button>
</form>
`;
@@ -104,27 +117,56 @@ class AppointmentForm {
return this.modalDiv;
}
initializeFormEventListeners(modalDiv) {
const formInputs = [
'name',
'email',
'phone',
'preferred-contact',
'message',
'agreeToOffersCheckbox',
'privacyPolicyCheckbox',
];
formInputs.forEach((id) => {
const inputElement = modalDiv.querySelector(`#${id}`);
if (inputElement) {
inputElement.addEventListener('input', () => {
this.saveFormValues(); // Save form values whenever an input changes
});
}
let self = this;
self.inputs.forEach(id => {
const inputElement = modalDiv.querySelector(`#${id}`);
if (inputElement) {
inputElement.addEventListener('input', () => {
self.saveFormValues(); // Save form values whenever an input changes
});
}
});
}
const sendButton = modalDiv.querySelector('#send-button');
if (sendButton) {
sendButton.addEventListener('click', function(e) {
e.preventDefault();
if (self.validateForm()) {
console.log('Form submitted successfully');
}else{
return
}
const formData = {};
[...['loanTerm', 'intRate', 'downPayment', 'tradeValue', 'paymentFrequency', 'rate', 'customRateValue'],...self.inputs].forEach(inputID => {
const inputElement = document.getElementById(inputID);
if (inputElement) {
formData[inputID] = postDetails.hasOwnProperty(inputID) ? postDetails[inputID] : null;
}
});
// AJAX request
jQuery.ajax({
type: 'POST',
url: ajax_object.ajax_url,
data: {
action: 'send_appointment_data',
appointment_data: formData,
nonce: ajax_object.appointment_nonce
},
success: function(response) {
alert('Appointment data sent successfully!');
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
}
});
});
}
}
initializeFormInputs() {
const storedValues =
@@ -133,7 +175,7 @@ class AppointmentForm {
const inputElement = document.getElementById(key);
if (inputElement) {
inputElement.value = storedValues[key];
inputElement.dispatchEvent(new Event('input')); // Dispatch input event
inputElement.dispatchEvent(new Event('input'));
}
}
}
@@ -142,13 +184,11 @@ class AppointmentForm {
this.checkboxes = modalDiv.querySelectorAll('.mdc-checkbox');
if (this.checkboxes) {
this.checkboxes.forEach((checkbox, index) => {
// Initialize the MDCCheckbox with the actual checkbox element
const checkboxElement = checkbox.querySelector(
`.mdc-checkbox__native-control.${inputIds[index].name}`
);
const checkboxInstance = new mdc.checkbox.MDCCheckbox(checkbox);
// If the checkbox is found, initialize the form field as well
if (checkboxElement) {
const formFieldInstance = new mdc.formField.MDCFormField(
modalDiv.querySelector(`.mdc-form-field.${inputIds[index].name}`)
@@ -164,18 +204,10 @@ class AppointmentForm {
}
saveFormValues() {
const formInputs = [
'name',
'email',
'phone',
'preferred-contact',
'message',
'agreeToOffersCheckbox',
'privacyPolicyCheckbox',
];
const formValues = {};
formInputs.forEach((input) => {
this.inputs.forEach((input) => {
const inputElement = document.getElementById(input);
if (inputElement) {
formValues[input] = inputElement.value;
@@ -184,5 +216,22 @@ class AppointmentForm {
localStorage.setItem(`autocart_${this.name}`, JSON.stringify(formValues));
}
validateForm() {
let isValid = true;
this.inputs.forEach((id) => {
const inputElement = document.getElementById(id);
const errorElement = document.getElementById(`${id}Error`);
if (inputElement && !inputElement.checkValidity()) {
isValid = false;
errorElement.classList.remove('hidden');
} else {
errorElement.classList.add('hidden');
}
});
return isValid;
}
}

43
autocart_assets/js/DataStore.js
View File

@@ -83,4 +83,47 @@ class DataStore {
this.notifySubscribers();
}
sortByFinance(order) {
this.vehicles.sort((a, b) => {
const aValue = this.calculateFinance(a);
const bValue = this.calculateFinance(b);
if (order === 'asc') {
return aValue.payment - bValue.payment;
} else {
return bValue.payment - aValue.payment;
}
});
this.notifySubscribers();
}
calculateFinance(vehicle) {
let annInterest = 7.99;
let monInt = annInterest / 1200;
let months = 12;
let amount = vehicle.advertise_price;
let down = 0;
let trade = 0;
var financeTotal = amount - (down + trade);
var numberOfPayments = months / (12 / 26);
var interest = financeTotal * (annInterest / 26) * numberOfPayments;
var additionalFees = 0;
var totalCostOfCredit = interest + additionalFees;
var totalObligation = financeTotal + totalCostOfCredit;
var payment = ((monInt + (monInt / (Math.pow((1 + monInt), months) - 1))) * (amount - (down || 0)) / 2).toFixed(2);
return {
financeTotal: financeTotal,
numberOfPayments: numberOfPayments,
interest: interest,
additionalFees: additionalFees,
totalCostOfCredit: totalCostOfCredit,
totalObligation: totalObligation,
payment: parseFloat(payment) // Convert payment to a number
};
}
}

1009
autocart_assets/js/FinanceForm.js
View File

File diff suppressed because it is too large Load Diff

2
autocart_assets/js/Modal.js
View File

@@ -93,6 +93,6 @@ class Modal {
}
}
document.addEventListener('DOMContentLoaded', function () {
console.log('modal is here');
});

9
autocart_assets/js/SortBy.js
View File

@@ -10,7 +10,9 @@ class SortBy {
{ field: 'make', order: 'asc', label: 'Make Name: A to Z' },
{ field: 'make', order: 'desc', label: 'Make Name: Z to A' },
{ field: 'model', order: 'asc', label: 'Model Name: A to Z' },
{ field: 'model', order: 'desc', label: 'Model Name: Z to A' }
{ field: 'model', order: 'desc', label: 'Model Name: Z to A' },
{ field: 'finance', order: 'asc', label: 'Finance: Low to High' },
{ field: 'finance', order: 'desc', label: 'Finance: High to Low' }
];
this.init();
}
@@ -50,6 +52,11 @@ class SortBy {
const selectedOption = this.sortByElement.value;
if (selectedOption) {
const [sortBy, order] = JSON.parse(selectedOption);
if (sortBy === 'finance') {
this.dataStore.sortByFinance(order);
} else {
this.dataStore.sortBy(sortBy, order);
}
this.dataStore.sortBy(sortBy, order);
}

57
autocart_assets/js/index.js
View File

@@ -21,10 +21,22 @@ function sendReq() {
'autocart_nonce': jQuery('#autocart_nonce').val(),
};
const vehiclesContainer = document.querySelector('.vehicles-container');
vehiclesContainer.textContent = 'Loading...';
// vehiclesContainer.textContent = 'Loading...';
// Add skeleton cards to the vehicles container
for (let i = 0; i < 6; i++) {
const skeletonCard = createSkeletonCard();
vehiclesContainer.appendChild(skeletonCard);
}
const filtersContainer = document.querySelector('.make-container');
filtersContainer.textContent = 'Loading...';
for (let i = 0; i < 2; i++) {
const skeletonListItem = createSkeletonListItem();
filtersContainer.appendChild(skeletonListItem);
}
// Add skeleton list item to the filters container
// const skeletonListItem = createSkeletonListItem();
// filtersContainer.appendChild(skeletonListItem);
jQuery.ajax({
type: 'POST',
url: ajax_object.ajax_url,
@@ -105,6 +117,7 @@ function createMakeList(vehicles){
models: fetchAvailableModels(vehicles, make)
}, dataStore);
});
makeFilters.sort((a, b) => a.value.localeCompare(b.value));
makeFilters.forEach(make => {
makeContainer.appendChild(make.generateCardHTML());
@@ -126,6 +139,7 @@ function createBodyTypeList(vehicles){
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))
@@ -145,6 +159,7 @@ function createTransmissionList(vehicles){
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());
});
@@ -162,6 +177,8 @@ function createExteriorList(vehicles){
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());
});
@@ -170,11 +187,13 @@ function createExteriorList(vehicles){
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());
});
@@ -185,6 +204,7 @@ function initModelContainer(make){
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');
@@ -192,6 +212,7 @@ function initTrimContainer(model){
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());
});
@@ -274,8 +295,40 @@ function updateMileage() {
// Create debounced versions of sendReq
const debouncedSendReq = debounce(sendReq, 300);
function createSkeletonCard() {
const skeletonCard = document.createElement('div');
skeletonCard.classList.add('bg-red-200', 'rounded-lg', 'shadow-md', 'animate-pulse');
const innerHTML = `
<div class="h-40 bg-red-300 rounded-t-lg"></div>
<div class="p-4">
<div class="h-12 bg-red-300 rounded-t-lg"></div>
<div class="h-5 bg-red-400 rounded-t-lg"></div>
<div class="h-5 bg-red-300 rounded-t-lg"></div>
<div class="h-5 bg-red-400 rounded-t-lg"></div>
<div class="h-5 bg-red-300 rounded-b-lg"></div>
</div>
`;
skeletonCard.innerHTML = innerHTML;
return skeletonCard;
}
function createSkeletonListItem() {
const listItem = document.createElement('li');
listItem.classList.add('w-full', 'bg-custom-red', 'rounded-lg', 'shadow-md', 'animate-pulse');
const innerHTML = `
<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="bg-custom-red-light w-1/6 h-6 rounded-lg"></div>
</div>
`;
listItem.innerHTML = innerHTML;
return listItem;
}

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

@@ -34,8 +34,10 @@ $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 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">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
@@ -62,16 +64,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 +93,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 +122,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 +152,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 +234,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="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 +262,82 @@ if ($make) {
<script>
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'));
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";
});
});
// 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) {
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() {
filtersDrawerCheckbox.checked = false;
filtersDrawerCheckbox.dispatchEvent(new Event('change'));
});
</script>

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

@@ -78,7 +78,7 @@ $carMakes = [
<div>
<label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_model">Model</label>
<select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_model" name="vehicle_search_model">
<option value="" disabled="" selected="">Select Model</option>
<option value="" disabled="" selected="">All Models</option>
<!-- <option value="Camry">Camry</option>
<option value="Accord">Accord</option>
<option value="F-150">F-150</option>
@@ -101,7 +101,7 @@ $carMakes = [
<div>
<label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_body_type">Body Type</label>
<select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_body_type" name="vehicle_search_body_type">
<option value="" disabled="" selected="">Select Body Type</option>
<option value="" disabled="" selected="">All Body Types</option>
<!-- <option value="Sedan">Sedan</option>
<option value="SUV">SUV</option>
<option value="Truck">Truck</option>
@@ -113,7 +113,7 @@ $carMakes = [
<div>
<label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_transmission">Transmission</label>
<select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_transmission" name="vehicle_search_transmission">
<option value="" disabled="" selected="">Select Transmission</option>
<option value="" disabled="" selected="">All Transmissions</option>
<!-- <option value="Automatic">Automatic</option>
<option value="Manual">Manual</option>
<option value="CVT">CVT</option> -->
@@ -123,7 +123,7 @@ $carMakes = [
<div>
<label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_trim">Trim</label>
<select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_trim" name="vehicle_search_trim">
<option value="" disabled="" selected="">Select Trim</option>
<option value="" disabled="" selected="">All Trims</option>
<!-- <option value="LE">LE</option>
<option value="EX">EX</option>
<option value="XLT">XLT</option>
@@ -194,8 +194,11 @@ $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
<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,31 +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) {
const vehicles = response.data.vehicles;
if (inputs) {
inputs.forEach(element => {
createOptions(vehicles, element);
});
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(" #button-content").text("Search (" + vehicles.length + ")");
}else{
alert(response.data.message);
jQuery(" #button-content").text("Search");
}
jQuery("#inventory-search-button").text("Search (" + vehicles.length + ")");
},
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");
}
});
}

79
autocart_assets/templates/single-appointment.php Normal file
View File

@@ -0,0 +1,79 @@
<?php
/*
Template Name: Appointment Page
*/
get_header();
// The Loop
if (have_posts()) {
while (have_posts()) {
the_post();
$post_meta = get_post_meta(get_the_ID(), '', true);
?>
<main id="content-container" class="overflow-scroll no-scrollbar">
<div class="max-w-7xl mx-auto">
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<div id="appointment-body"></div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
let rawVehicleDetails = <?php echo json_encode($post_meta); ?>;
let postDetails = {};
for (let key in rawVehicleDetails) {
if (rawVehicleDetails.hasOwnProperty(key)) {
if (key === 'vehicle' && rawVehicleDetails[key][0]) {
postDetails[key] = JSON.parse(rawVehicleDetails[key][0]);
} else {
postDetails[key] = rawVehicleDetails[key][0] || null;
}
}
}
const appointmentForm = new AppointmentForm(postDetails.vehicle);
if(appointmentForm){
const financeForm = new FinanceForm(postDetails.vehicle, 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);
const allInputs = [...appointmentForm.inputs, ...financeForm.inputs ]
allInputs.forEach(input=>{
const inputElement = userForm.querySelector(`#${input}`);
if (inputElement) {
inputElement.value = postDetails[input] || 0;
inputElement.dispatchEvent(new Event('input'));
inputElement.disabled = true;
}
})
financeForm.updateView();
}
});
</script>
<?php
}
} else {
echo 'Appointment not found.';
}
get_footer();

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

@@ -106,9 +106,16 @@ if ($vehicle_id) {
if (!is_wp_error($similar_vehicles_response) && wp_remote_retrieve_response_code($similar_vehicles_response) === 200) {
$similar_vehicles = json_decode(wp_remote_retrieve_body($similar_vehicles_response), true);
$filtered_vehicles = array_filter($similar_vehicles, function ($vehicle) use ($vehicle_details) {
return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
});
if (is_array($similar_vehicles)) {
$filtered_vehicles = array_filter($similar_vehicles, function ($vehicle) use ($vehicle_details) {
return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
});
} else {
$filtered_vehicles = array_filter([], function ($vehicle) use ($vehicle_details) {
return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
});
}
// echo '<pre>';
// print_r($filtered_vehicles);
@@ -166,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 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">
@@ -204,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">
@@ -312,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>
@@ -350,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" />
@@ -400,7 +420,7 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
<div class="p-4">
<span class="text-xl font-semibold">
<span class="text-gray-600 dark:text-gray-300 paymentSpan">
<?php echo $formattedPrice = '$ ' . number_format(416); ?>
<?php echo $formattedPrice = '$ ' . number_format($vehicle_details['advertise_price']); ?>
</span>
<i class="fas fa-calculator cursor-pointer" onclick="openFinanceModal()"></i>
</span>
@@ -480,9 +500,29 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
<?php
get_footer();
// Extracting necessary details
$importantDetails = array(
'title' => $vehicle_details['year'] . ' ' . $vehicle_details['make'] . ' ' . $vehicle_details['model'] . ' ' . $vehicle_details['trim'] . ' - ' . $vehicle_details['exterior_color'] . ' ' . $vehicle_details['interior_color'],
'id_vehicle' => $vehicle_details['id_vehicle'],
'advertise_price'=> $vehicle_details['advertise_price']
);
// Encoding important details as JSON
$importantDetailsJSON = json_encode($importantDetails);
?>
<script>
// Assigning important details JSON to a JavaScript variable
const appointmentVehicle = <?php echo $importantDetailsJSON; ?>;
// Creating a new object to merge with appointment form data
const mergedDetails = {
image_title: <?php echo json_encode($vehicle_images[0]['url']); ?>,
...appointmentVehicle
};
// modal
const handleFinanceChanges = (financeForm) => {
if (document.querySelectorAll('.paymentSpan').length) {
@@ -515,8 +555,8 @@ get_footer();
};
const vehicleDetails = <?php echo json_encode($vehicle_details); ?>;
const appointmentForm = new AppointmentForm();
const financeForm = new FinanceForm(vehicleDetails, handleFinanceChanges);
const appointmentForm = new AppointmentForm(mergedDetails);
const financeForm = new FinanceForm(vehicleDetails, appointmentForm, handleFinanceChanges);
const modal = new Modal(<?php echo $vehicle_id ?>);
document.body.appendChild(modal.initModal());
@@ -541,7 +581,7 @@ get_footer();
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) {
@@ -582,11 +622,22 @@ get_footer();
}
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);
var filters = JSON.parse(decodeURIComponent(urlParams.get('filters')));
console.log(filters);
setFeatureImage(0);
const accordionHeaders = document.querySelectorAll('[data-accordion-target]');
accordionHeaders.forEach(header => {
@@ -599,9 +650,9 @@ get_footer();
const icon = this.querySelector('[data-accordion-icon]');
icon.style.transform = expanded === 'true' ? 'rotate(0deg)' : 'rotate(180deg)';
});
});
// ripple effect
const btns = document.getElementsByClassName("ripple-effect");
@@ -627,6 +678,9 @@ get_footer();
});
});
tabs[0].click();
});
@@ -634,7 +688,6 @@ get_footer();
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");
@@ -674,9 +727,8 @@ get_footer();
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;
}
@@ -686,4 +738,38 @@ get_footer();
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>

BIN
bundled_plugins/auto-dealer-forms.zip
View File

Binary file not shown.

2
includes/front-end/theme_starter_setup.php
View File

@@ -36,6 +36,7 @@ function themeStarter_setup()
array(
'primary' => __('Primary Menu', 'themeStarter'),
'secondary' => __('Secondary Menu', 'themeStarter'),
'mobile' => __('Mobile Menu', 'themeStarter'),
)
);
@@ -82,4 +83,3 @@ function themeStarter_setup()
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');
}

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

@@ -16,16 +16,48 @@
<!-- Car Loan Calculator Form -->
<section class="max-w-7xl mx-auto">
<div class="py-8 flex items-center justify-center">
<div class="px-4 py-8">
<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: 260px"><iframe src="https://www.carpaymentcalculator.net/free-tools/calc.php" frameborder="0" height="350px" scrolling="no"></iframe></p>
<p>
<font size="1">Powered by <a href="https://www.carpaymentcalculator.net/free-tools/">Free Auto Calculator</a></font>
</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>
<div id="appointment-body"></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>

7
single.php
View File

@@ -12,9 +12,10 @@
<?php get_header(); ?>
<!-- Single Post Template -->
<section class="flex h-full items-center justify-center">
<i class="text-7xl bi-sticky"></i>
<h1 class="text-2xl p-4 underline ">Single Post Template</h1>
<section>
<div class="max-w-7xl mx-auto px-4">
<?php the_content() ?>
</div>
</section>
<!-- Get Footer -->

12
src/scss/base/_base.scss
View File

@@ -124,3 +124,15 @@ select,
textarea {
background-color: var(--gray-100) !important;
}
button:disabled {
background-color: var(--gray-200);
color: black;
cursor: not-allowed;
}
button:disabled:hover {
background-color: var(--gray-500);
color: white;
cursor: not-allowed;
}

14
src/scss/pages/_front-page.scss
View File

@@ -1,8 +1,8 @@
#hero {
background-image: url("../images/bgs/hero-bg.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--gray-500);
background-blend-mode: multiply;
}
background-image: url('../images/bgs/hero-bg.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--gray-500);
background-blend-mode: multiply;
}

6
src/scss/vendors/_wordpress.scss vendored
View File

@@ -116,7 +116,7 @@ body.login {
text-decoration: underline;
}
.menu-item:hover {
#menu-main-menu .menu-item:hover {
background-color: var(--primary-500);
color: #fff;
}
@@ -131,6 +131,10 @@ body.login {
font-size: 12px; /* Adjust the size as needed */
}
.menu-item-has-children:hover > a:after {
color: #fff; /* Change the color as needed */
}
/* Hide sub-menu items by default */
.sub-menu {
width: max-content;

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

@@ -1273,10 +1273,6 @@ select {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-2 {
left: 0.5rem;
}
@@ -1580,6 +1576,10 @@ select {
border-width: 8px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-t {
border-top-width: 1px;
}
@@ -1588,10 +1588,6 @@ select {
border-top-width: 4px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1816,11 +1812,6 @@ select {
line-height: 1;
}
.text-7xl {
font-size: 4.5rem;
line-height: 1;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
@@ -2055,6 +2046,11 @@ html {
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 {
--tw-bg-opacity: 1;
background-color: rgb(120 113 108 / var(--tw-bg-opacity));

66
template-parts/header/navigation.php
View File

@@ -6,7 +6,6 @@
* @package ThemeStarter
*/
require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
?>
@@ -16,11 +15,8 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
<!-- Header -->
<nav id="header-nav" class="fixed w-full top-0 z-50">
<section class="relative">
<!-- Top Banner -->
<div class="bg-stone-800 px-4">
<div class="max-w-7xl mx-auto py-4">
@@ -69,10 +65,6 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
<!-- Core Nav -->
<div class="relative px-4 py-2 bg-white backdrop-blur-lg w-full shadow-md">
<!-- <div class="absolute top-0 left-0 inset-0 flex w-full">
<?php /** get_search_form(); */ ?>
</div> -->
<div class="relative z-10 flex justify-between max-w-7xl mx-auto">
<!-- Header Logo -->
<a class="relative z-50 flex items-center space-x-4" href="<?php echo get_site_url(); ?>">
@@ -94,11 +86,6 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
get_template_part('template-parts/partials/apply-for-financing-button');
?>
</div>
<!-- <div class="flex relative">
<button aria-label="Search Toggle" id="toggle-search">
<i class="bi bi-search"></i>
</button>
</div> -->
<div class="flex relative">
<button aria-label="Mobile Menu Toggle" id="toggle-nav" class="toggle-menu">
<i></i> <i></i>
@@ -140,57 +127,8 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
<div class="mx-auto mb-4 w-11/12 h-1 border-t border-stone-400"></div>
<ul role="list" class="space-y-2">
<!-- Menu Loop -->
<?php $pages = get_pages_as_array();
foreach ($pages as $page) {
$pageID = $page['page']->ID;
$pageTitle = $page['page']->post_title;
$pageSlug = $page['page']->post_name;
$pageBG =
$page['page']->post_name . '.png';
$pageBootstrapIcon =
get_field('bootstrap_icon', $page['page']->ID); ?>
<li class="accordion">
<div class="flex px-2 hover:bg-stone-500 hover:text-white rounded-md justify-between">
<a href="<?php echo get_site_url() . '/' . $pageSlug; ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
<i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
<p><?php echo $pageTitle ?></p>
</a>
<?php if ($page['subpages']) { ?>
<button aria-label="Accordion Dropdown Toggle" class="accordion-toggle">
<i class="fas fa-chevron-down items-center ml-auto rounded-md px-2.5 py-2" aria-hidden="true"></i>
<i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
</button>
<?php } ?>
</div>
<ul class="accordion-content space-y-2">
<?php foreach ($page['subpages'] as $subpage) {
$subpageID =
$subpage->ID;
$subpageTitle = $subpage->post_title;
$subpageSlug =
$subpage->post_name;
$subpageBG = $subpage->post_name . '.png';
$subpageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
?>
<li class="p-2">
<a href="<?php echo get_site_url() . '/' . $pageSlug . '/' . $subpageSlug ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
<p><?php echo $subpageTitle ?></p>
</a>
</li>
<?php } ?>
</ul>
</li>
<!-- Horizontal Rule -->
<!-- <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div> -->
<?php } ?>
</ul>
<?php get_template_part('template-parts/partials/menu-accordion-loop')
?>
</div>

80
template-parts/partials/menu-accordion-loop.php Normal file
View File

@@ -0,0 +1,80 @@
<?php
/**
* Menu Accordion template.
*
* @package ThemeStarter
*/
?>
<ul role="list" class="space-y-2">
<?php
// Get the menu items
$main_menu_items = wp_get_nav_menu_items('mobile-menu');
// Initialize an empty array to store the menu structure
$menu_structure = array();
// Iterate through each menu item to build the menu structure
foreach ($main_menu_items as $menu_item) {
// If the menu item has no parent, add it as a root level item
if ($menu_item->menu_item_parent == 0) {
$menu_structure[$menu_item->ID] = array(
'title' => $menu_item->title,
'url' => $menu_item->url,
'children' => array()
);
} else {
// If the menu item has a parent, add it as a child of its parent
$parent_id = $menu_item->menu_item_parent;
$menu_structure[$parent_id]['children'][] = array(
'title' => $menu_item->title,
'url' => $menu_item->url
);
}
}
// Loop through menu items with no parents (parents are the "parent" items)
foreach ($menu_structure as $menu_item_id => $menu_item_data) {
$menuItemTitle = $menu_item_data['title'];
$menuItemSlug = $menu_item_data['url'];
?>
<li class="accordion">
<div class="flex px-2 hover:bg-stone-500 hover:text-white rounded-md justify-between">
<a href="<?php echo $menuItemSlug; ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
<p><?php echo $menuItemTitle ?></p>
</a>
<?php if (!empty($menu_item_data['children'])) { ?>
<button aria-label="Accordion Dropdown Toggle" class="accordion-toggle">
<i class="fas fa-chevron-down items-center ml-auto rounded-md px-2.5 py-2" aria-hidden="true"></i>
<i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
</button>
<?php } ?>
</div>
<?php
// Check if there are children for this menu item
if (!empty($menu_item_data['children'])) {
?>
<ul class="accordion-content space-y-2">
<?php
// Loop through children
foreach ($menu_item_data['children'] as $child) {
$childTitle = $child['title'];
$childUrl = $child['url'];
?>
<li class="hover:bg-stone-300 rounded-md">
<a class="inset-0 flex px-4 py-2" href="<?php echo $childUrl ?>"><?php echo $childTitle ?></a>
</li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
<?php
}
?>
</ul>

66
template-parts/partials/pages-accordion-loop.php Normal file
View File

@@ -0,0 +1,66 @@
<?php
/**
* Pages Accordion template.
*
* @package ThemeStarter
*/
require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
?>
<!-- Accordion Menu Loop -->
<ul role="list" class="space-y-2">
<!-- Menu Loop -->
<?php $pages = get_pages_as_array();
foreach ($pages as $page) {
$pageID = $page['page']->ID;
$pageTitle = $page['page']->post_title;
$pageSlug = $page['page']->post_name;
$pageBG =
$page['page']->post_name . '.png';
$pageBootstrapIcon =
get_field('bootstrap_icon', $page['page']->ID); ?>
<li class="accordion">
<div class="flex px-2 hover:bg-stone-500 hover:text-white rounded-md justify-between">
<a href="<?php echo get_site_url() . '/' . $pageSlug; ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
<i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
<p><?php echo $pageTitle ?></p>
</a>
<?php if ($page['subpages']) { ?>
<button aria-label="Accordion Dropdown Toggle" class="accordion-toggle">
<i class="fas fa-chevron-down items-center ml-auto rounded-md px-2.5 py-2" aria-hidden="true"></i>
<i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
</button>
<?php } ?>
</div>
<ul class="accordion-content space-y-2">
<?php foreach ($page['subpages'] as $subpage) {
$subpageID =
$subpage->ID;
$subpageTitle = $subpage->post_title;
$subpageSlug =
$subpage->post_name;
$subpageBG = $subpage->post_name . '.png';
$subpageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
?>
<li class="p-2">
<a href="<?php echo get_site_url() . '/' . $pageSlug . '/' . $subpageSlug ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
<p><?php echo $subpageTitle ?></p>
</a>
</li>
<?php } ?>
</ul>
</li>
<!-- Horizontal Rule -->
<!-- <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div> -->
<?php } ?>
</ul>