From 67e0407058de1a06b44284169be3bb08bcc73a54 Mon Sep 17 00:00:00 2001 From: Prospect Date: Mon, 8 Apr 2024 06:32:26 -0400 Subject: [PATCH] theme sync --- assets/css/styles.css | 15 + autocart_assets/css/filter-panel.css | 134 ++++- autocart_assets/js/DataStore.js | 43 ++ autocart_assets/js/SortBy.js | 9 +- autocart_assets/js/index.js | 533 ++++++++++-------- .../templates/autocart-results.php | 168 +++--- autocart_assets/templates/search-form.php | 29 +- autocart_assets/templates/single-vehicle.php | 103 +++- includes/front-end/theme_starter_setup.php | 2 +- src/scss/vendors/tailwind/_tailwind.scss | 15 + template-parts/header/navigation.php | 66 +-- .../partials/menu-accordion-loop.php | 80 +++ .../partials/pages-accordion-loop.php | 66 +++ 13 files changed, 844 insertions(+), 419 deletions(-) create mode 100644 template-parts/partials/menu-accordion-loop.php create mode 100644 template-parts/partials/pages-accordion-loop.php diff --git a/assets/css/styles.css b/assets/css/styles.css index 3d4d6cb..2082053 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -2787,6 +2787,21 @@ html { background-color: rgb(87 83 78/var(--tw-bg-opacity)); } +.hover\:bg-stone-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(245 245 244/var(--tw-bg-opacity)); +} + +.hover\:bg-stone-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(231 229 228/var(--tw-bg-opacity)); +} + +.hover\:bg-stone-300:hover { + --tw-bg-opacity: 1; + background-color: rgb(214 211 209/var(--tw-bg-opacity)); +} + .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255/var(--tw-text-opacity)); diff --git a/autocart_assets/css/filter-panel.css b/autocart_assets/css/filter-panel.css index d8cfba6..43a558d 100644 --- a/autocart_assets/css/filter-panel.css +++ b/autocart_assets/css/filter-panel.css @@ -106,4 +106,136 @@ li.autocart-filters:hover { .bg-custom-red-opacity { background-color: rgb(150 29 32 / 30%); - } \ No newline at end of file + } + + .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; + } +} \ No newline at end of file diff --git a/autocart_assets/js/DataStore.js b/autocart_assets/js/DataStore.js index 311940d..14135bd 100644 --- a/autocart_assets/js/DataStore.js +++ b/autocart_assets/js/DataStore.js @@ -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 + }; + } + } diff --git a/autocart_assets/js/SortBy.js b/autocart_assets/js/SortBy.js index c9a3516..1ae6285 100644 --- a/autocart_assets/js/SortBy.js +++ b/autocart_assets/js/SortBy.js @@ -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); } diff --git a/autocart_assets/js/index.js b/autocart_assets/js/index.js index 02e260c..95e147c 100644 --- a/autocart_assets/js/index.js +++ b/autocart_assets/js/index.js @@ -10,287 +10,329 @@ let shouldUpdateFilters = true; let modelFilter = []; let makeFilters; function sendReq() { - var formData = { - 'action': 'handle_autocart_form', - 'minPrice': price.getValueStart(), - 'maxPrice': price.getValue(), - 'minKilometres': kilometres.getValueStart(), - 'maxKilometres': kilometres.getValue(), - 'minYear': year.getValueStart(), - 'maxYear': year.getValue(), - 'autocart_nonce': jQuery('#autocart_nonce').val(), - }; - const vehiclesContainer = document.querySelector('.vehicles-container'); - // vehiclesContainer.textContent = 'Loading...'; - // Add skeleton cards to the vehicles container - for (let i = 0; i < 6; i++) { - const skeletonCard = createSkeletonCard(); - vehiclesContainer.appendChild(skeletonCard); - } + var formData = { + action: 'handle_autocart_form', + minPrice: price.getValueStart(), + maxPrice: price.getValue(), + minKilometres: kilometres.getValueStart(), + maxKilometres: kilometres.getValue(), + minYear: year.getValueStart(), + maxYear: year.getValue(), + autocart_nonce: jQuery('#autocart_nonce').val(), + }; + const vehiclesContainer = document.querySelector('.vehicles-container'); + // 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'); - 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); + const filtersContainer = document.querySelector('.make-container'); + 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, - data: formData, - success: function (response) { - const vehicles = response.data.vehicles; - if (dataStore) { - dataStore.unsubscribeAll(); - } + jQuery.ajax({ + type: 'POST', + url: ajax_object.ajax_url, + data: formData, + success: function (response) { + const vehicles = response.data.vehicles; + if (dataStore) { + dataStore.unsubscribeAll(); + } - - // Initialize new data store - dataStore.vehicles = vehicles; - filterManager = new FilterManager(dataStore); - appliedFilters = new AppliedFilters(dataStore, filterManager); + // Initialize new data store + dataStore.vehicles = vehicles; + filterManager = new FilterManager(dataStore); + appliedFilters = new AppliedFilters(dataStore, filterManager); - // filterManager = new FilterManager(dataStore); - // appliedFilters = new AppliedFilters(dataStore, filterManager); - - shouldUpdateFilters = true; - dataStore.subscribe(filteredVehicles => { - console.log('dataStore has been changed') - handleSuccess(filteredVehicles); - }); + // filterManager = new FilterManager(dataStore); + // appliedFilters = new AppliedFilters(dataStore, filterManager); - dataStore.notifySubscribers(vehicles); - }, - error: function (xhr, status, error) { - console.log(xhr.responseText); - console.log('Status: ' + status); - console.log('Error: ' + error); - jQuery("#inventory-search__search-button").text("Error"); - } - }); + shouldUpdateFilters = true; + dataStore.subscribe((filteredVehicles) => { + console.log('dataStore has been changed'); + handleSuccess(filteredVehicles); + }); + + dataStore.notifySubscribers(vehicles); + }, + error: function (xhr, status, error) { + console.log(xhr.responseText); + console.log('Status: ' + status); + console.log('Error: ' + error); + jQuery('#inventory-search__search-button').text('Error'); + }, + }); } function handleSuccess(vehicles, updateFilters = shouldUpdateFilters) { - if(updateFilters){ - createMakeList(vehicles); - createBodyTypeList(vehicles); - createTransmissionList(vehicles); - createExteriorList(vehicles); - } - const vehiclesContainer = document.querySelector('.vehicles-container'); - vehiclesContainer.innerHTML = ''; - - vehicles.forEach(vehicleData => { - const vehicle = new VehicleThumbnail(vehicleData); - // vehiclesContainer.appendChild(vehicle.generateCardHTML()); - vehiclesContainer.appendChild(vehicle.generateCardElement()); + if (updateFilters) { + createMakeList(vehicles); + createBodyTypeList(vehicles); + createTransmissionList(vehicles); + createExteriorList(vehicles); + } + const vehiclesContainer = document.querySelector('.vehicles-container'); + vehiclesContainer.innerHTML = ''; - }); - - + vehicles.forEach((vehicleData) => { + const vehicle = new VehicleThumbnail(vehicleData); + // vehiclesContainer.appendChild(vehicle.generateCardHTML()); + vehiclesContainer.appendChild(vehicle.generateCardElement()); + }); } -function createMakeList(vehicles){ +function createMakeList(vehicles) { + const makeContainer = document.querySelector('.make-container'); + makeContainer.innerHTML = ''; - const makeContainer = document.querySelector('.make-container'); - makeContainer.innerHTML = ''; - - const makeCounts = vehicles.reduce((acc, vehicle) => { - const { make } = vehicle; - acc[make] = (acc[make] || 0) + 1; - return acc; - }, {}); - let makeValue = document.querySelector('#autocart-make-field').value; - // if(makeValue){ - // console.log('makeValue',makeValue); - // // dataStore.addFilter('make', makeValue); - // } - makeFilters = Object.entries(makeCounts).map(([make, count]) => { - - return filterManager.createMakeFilter({ - text: make, - checked: makeValue.toLowerCase() === make.toLowerCase(), - count, - models: fetchAvailableModels(vehicles, make) - }, dataStore); - }); - makeFilters.forEach(make => { - - makeContainer.appendChild(make.generateCardHTML()); - make.subscribe(m=> initModelContainer(m)) - }); + const makeCounts = vehicles.reduce((acc, vehicle) => { + const { make } = vehicle; + acc[make] = (acc[make] || 0) + 1; + return acc; + }, {}); + let makeValue = document.querySelector('#autocart-make-field').value; + // if(makeValue){ + // console.log('makeValue',makeValue); + // // dataStore.addFilter('make', makeValue); + // } + makeFilters = Object.entries(makeCounts).map(([make, count]) => { + return filterManager.createMakeFilter( + { + text: make, + checked: makeValue.toLowerCase() === make.toLowerCase(), + count, + models: fetchAvailableModels(vehicles, make), + }, + dataStore + ); + }); + makeFilters.sort((a, b) => a.value.localeCompare(b.value)); + makeFilters.forEach((make) => { + makeContainer.appendChild(make.generateCardHTML()); + make.subscribe((m) => initModelContainer(m)); + }); } -function createBodyTypeList(vehicles){ - const bodyTypeContainer = document.querySelector('.body-type-container'); - bodyTypeContainer.innerHTML = ''; +function createBodyTypeList(vehicles) { + const bodyTypeContainer = document.querySelector('.body-type-container'); + bodyTypeContainer.innerHTML = ''; - const bodyType = vehicles.reduce((acc, vehicle) => { - const { body_type } = vehicle; - acc[body_type] = (acc[body_type] || 0) + 1; - return acc; - }, {}); + const bodyType = vehicles.reduce((acc, vehicle) => { + const { body_type } = vehicle; + acc[body_type] = (acc[body_type] || 0) + 1; + return acc; + }, {}); - filterManager.resetList('body_type'); - + filterManager.resetList('body_type'); - bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) => filterManager.createBodyTypeFilter({ text: body_type, count}, dataStore)); - bodyTypeFilters.forEach(body_type => { - bodyTypeContainer.appendChild(body_type.initCheckbox()); - // body_type.subscribe(m=> iniBodyTypeContainer(m)) + bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) => + filterManager.createBodyTypeFilter({ text: body_type, count }, dataStore) + ); + bodyTypeFilters.sort((a, b) => a.value.localeCompare(b.value)); + bodyTypeFilters.forEach((body_type) => { + bodyTypeContainer.appendChild(body_type.initCheckbox()); + // body_type.subscribe(m=> iniBodyTypeContainer(m)) + }); +} + +function createTransmissionList(vehicles) { + const transmissionContainer = document.querySelector( + '.transmission-container' + ); + + transmissionContainer.innerHTML = ''; + + const transmission = vehicles.reduce((acc, vehicle) => { + const { transmission_type } = vehicle; + acc[transmission_type] = (acc[transmission_type] || 0) + 1; + return acc; + }, {}); + + filterManager.resetList('transmission_type'); + transmissionFilters = Object.entries(transmission).map( + ([transmission_type, count]) => + filterManager.createTransmissionFilter( + { text: transmission_type, count }, + dataStore + ) + ); + transmissionFilters.sort((a, b) => a.value.localeCompare(b.value)); + transmissionFilters.forEach((transmission) => { + transmissionContainer.appendChild(transmission.initCheckbox()); + }); +} + +function createExteriorList(vehicles) { + console.log(vehicles); + const exteriorContainer = document.querySelector('.exterior-color'); + exteriorContainer.innerHTML = ''; + const exterior = vehicles.reduce((acc, vehicle) => { + const { exterior_color } = vehicle; + acc[exterior_color] = (acc[exterior_color] || 0) + 1; + return acc; + }, {}); + filterManager.resetList('exterior_color'); + + exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) => + filterManager.createExteriorFilter( + { text: exterior_color, count }, + dataStore + ) + ); + exteriorFilters.sort((a, b) => a.value.localeCompare(b.value)); + + exteriorFilters.forEach((exterior) => { + exteriorContainer.appendChild(exterior.initCheckbox()); + }); +} + +function initModelContainer(make) { + let list = [ + ...new Set( + filterManager.makeFilters + .filter((m) => m.checked == true) + .map((m) => m.models) + .flat() + ), + ]; + + const modelContainer = document.querySelector('.model-container'); + if (list.length === 0) { + modelContainer.innerHTML = '

Please Select a Make

'; + } else if (list && list.length > 0) { + modelContainer.innerHTML = ''; + list.sort((a, b) => a.value.localeCompare(b.value)); + list.forEach((model) => { + modelContainer.appendChild(model.initCheckbox()); }); + } else { + modelContainer.innerHTML = '

No models available

'; + } } -function createTransmissionList(vehicles){ - const transmissionContainer = document.querySelector('.transmission-container'); - - transmissionContainer.innerHTML = ''; +function initTrimContainer(model) { + let list = [ + ...new Set( + filterManager.modelFilters + .filter((m) => m.checked == true) + .map((m) => m.trims) + .flat() + ), + ]; - const transmission = vehicles.reduce((acc, vehicle) => { - const { transmission_type } = vehicle; - acc[transmission_type] = (acc[transmission_type] || 0) + 1; - return acc; - }, {}); + // const uniqueArray = [...new Set(array)]; + const trimContainer = document.querySelector('.trim-container'); - filterManager.resetList('transmission_type'); - transmissionFilters = Object.entries(transmission).map(([transmission_type, count]) => filterManager.createTransmissionFilter({ text: transmission_type, count}, dataStore)); - transmissionFilters.forEach(transmission => { - transmissionContainer.appendChild(transmission.initCheckbox()); + if (list.length === 0) { + trimContainer.innerHTML = '

Please Select a Model

'; + } else if (list && list.length > 0) { + trimContainer.innerHTML = ''; + list.sort((a, b) => a.value.localeCompare(b.value)); + list.forEach((trim) => { + trimContainer.appendChild(trim.initCheckbox()); }); -} - -function createExteriorList(vehicles){ - console.log(vehicles); - const exteriorContainer = document.querySelector('.exterior-color'); - exteriorContainer.innerHTML = ''; - const exterior = vehicles.reduce((acc, vehicle) => { - const { exterior_color } = vehicle; - acc[exterior_color] = (acc[exterior_color] || 0) + 1; - return acc; - }, {}); - filterManager.resetList('exterior_color'); - - exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) => filterManager.createExteriorFilter({ text: exterior_color, count}, dataStore)); - exteriorFilters.forEach(exterior => { - exteriorContainer.appendChild(exterior.initCheckbox()); - }); -} - - -function initModelContainer(make){ - let list = [...new Set(filterManager.makeFilters.filter(m=>m.checked == true).map(m=>m.models).flat())]; - const modelContainer = document.querySelector('.model-container'); - if (list.length === 0) { - modelContainer.innerHTML = '

Please Select a Make

'; - } else if (list && list.length > 0) { - modelContainer.innerHTML = ''; - list.forEach(model => { - modelContainer.appendChild(model.initCheckbox()); - }); - } else { - modelContainer.innerHTML = '

No models available

'; - } -} - -function initTrimContainer(model){ - let list = [...new Set(filterManager.modelFilters.filter(m=>m.checked == true).map(m=>m.trims).flat())]; - // const uniqueArray = [...new Set(array)]; - const trimContainer = document.querySelector('.trim-container'); - - if (list.length === 0) { - trimContainer.innerHTML = '

Please Select a Model

'; - } else if (list && list.length > 0) { - trimContainer.innerHTML = ''; - list.forEach(trim => { - trimContainer.appendChild(trim.initCheckbox()); - }); - } else { - trimContainer.innerHTML = '

No trims available

'; - } + } else { + trimContainer.innerHTML = '

No trims available

'; + } } function fetchAvailableModels(vehicles, make) { - const filteredModels = vehicles - .filter(vehicle => vehicle.make === make) - .map(vehicle => vehicle.model); - // Count occurrences of each model - const modelCounts = filteredModels.reduce((acc, model) => { - acc[model] = (acc[model] || 0) + 1; - return acc; - }, {}); + const filteredModels = vehicles + .filter((vehicle) => vehicle.make === make) + .map((vehicle) => vehicle.model); + // Count occurrences of each model + const modelCounts = filteredModels.reduce((acc, model) => { + acc[model] = (acc[model] || 0) + 1; + return acc; + }, {}); - // Convert to an array of objects - const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({ model, count })); - modelsArray.map(m=>m['trims'] = fetchAvailableTrim(vehicles, m.model)) - return modelsArray; + // Convert to an array of objects + const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({ + model, + count, + })); + modelsArray.map((m) => (m['trims'] = fetchAvailableTrim(vehicles, m.model))); + return modelsArray; } -function fetchAvailableTrim(vehicles, modelName){ - const filteredVehicles = vehicles.filter(vehicle => vehicle.model === modelName); - const trimCount = filteredVehicles.reduce((result, vehicle) => { - vehicle.trim.forEach(trim => { - const existingTrim = result.find(item => item.text === trim); - if (existingTrim) { - existingTrim.count += 1; - } else { - result.push({ text: trim, count: 1 }); - } - }); - return result; - }, []); - return trimCount; +function fetchAvailableTrim(vehicles, modelName) { + const filteredVehicles = vehicles.filter( + (vehicle) => vehicle.model === modelName + ); + const trimCount = filteredVehicles.reduce((result, vehicle) => { + vehicle.trim.forEach((trim) => { + const existingTrim = result.find((item) => item.text === trim); + if (existingTrim) { + existingTrim.count += 1; + } else { + result.push({ text: trim, count: 1 }); + } + }); + return result; + }, []); + return trimCount; } -function updateModel(models){ - console.log('updateModel', models) +function updateModel(models) { + console.log('updateModel', models); } - - function debounce(func, delay) { - let timeout; - return function () { - const context = this; - const args = arguments; - clearTimeout(timeout); - timeout = setTimeout(() => func.apply(context, args), delay); - }; + let timeout; + return function () { + const context = this; + const args = arguments; + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(context, args), delay); + }; } function updatePrice() { - const min = price.getValueStart(); - const max = price.getValue(); - const formattedMin = '$' + min.toLocaleString(); - const formattedMax = '$' + max.toLocaleString(); - document.getElementById('priceRange').textContent = `${formattedMin} to ${formattedMax}`; - debouncedSendReq(); + const min = price.getValueStart(); + const max = price.getValue(); + const formattedMin = '$' + min.toLocaleString(); + const formattedMax = '$' + max.toLocaleString(); + document.getElementById( + 'priceRange' + ).textContent = `${formattedMin} to ${formattedMax}`; + debouncedSendReq(); } function updateYear() { - const min = year.getValueStart(); - const max = year.getValue(); - document.getElementById('yearRange').textContent = `${min} to ${max}`; - debouncedSendReq(); + const min = year.getValueStart(); + const max = year.getValue(); + document.getElementById('yearRange').textContent = `${min} to ${max}`; + debouncedSendReq(); } function updateMileage() { - const min = kilometres.getValueStart(); - const max = kilometres.getValue(); - document.getElementById('KilometresRange').textContent = `${min} to ${max}`; - debouncedSendReq(); + const min = kilometres.getValueStart(); + const max = kilometres.getValue(); + document.getElementById('KilometresRange').textContent = `${min} to ${max}`; + debouncedSendReq(); } // 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 = ` + const skeletonCard = document.createElement('div'); + skeletonCard.classList.add( + 'bg-red-200', + 'rounded-lg', + 'shadow-md', + 'animate-pulse' + ); + + const innerHTML = `
@@ -300,18 +342,23 @@ function createSkeletonCard() {
`; - - skeletonCard.innerHTML = innerHTML; - - return skeletonCard; - } + 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 listItem = document.createElement('li'); + listItem.classList.add( + 'w-full', + 'bg-custom-red', + 'rounded-lg', + 'shadow-md', + 'animate-pulse' + ); - const innerHTML = ` + const innerHTML = `
@@ -319,7 +366,7 @@ function createSkeletonListItem() {
`; - listItem.innerHTML = innerHTML; + listItem.innerHTML = innerHTML; - return listItem; -} \ No newline at end of file + return listItem; +} diff --git a/autocart_assets/templates/autocart-results.php b/autocart_assets/templates/autocart-results.php index 76ae9b8..aabd59d 100644 --- a/autocart_assets/templates/autocart-results.php +++ b/autocart_assets/templates/autocart-results.php @@ -34,8 +34,8 @@ $response = get_transient("autocart_response");
-