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

Compare commits

base: WordPress_Themes:7e24bb59ec67c28bacb2bc347f806104fa59b009
Branches Tags
WordPress_Themes:master
..
compare: WordPress_Themes:master
Branches Tags
WordPress_Themes:master

4 Commits
7e24bb59ec ... 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
18 changed files with 1267 additions and 727 deletions
Expand all files Collapse all files

14
assets/css/styles.css
View File

@@ -2017,10 +2017,6 @@ select {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-2 {
left: 0.5rem;
}
@@ -2560,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;
@@ -2782,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;
} */
}

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
};
}
}

1050
autocart_assets/js/FinanceForm.js
View File

File diff suppressed because it is too large Load Diff

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>

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

@@ -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");
}
});
}

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

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

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>

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;
}

14
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;
}
@@ -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>