theme and plugin sync

2024-03-20 17:38:18 -04:00
commit 03e44e02f0
224 changed files with 56542 additions and 0 deletions
--- a/autocart_assets/js/VehicleThumbnail.js
+++ b/autocart_assets/js/VehicleThumbnail.js
@@ -0,0 +1,62 @@
+class VehicleThumbnail {
+    constructor(vehicle) {
+        this.id = vehicle.id_vehicle;
+        this.name = vehicle.make + ' ' + vehicle.model;
+        this.year = vehicle.year;
+        this.make = vehicle.make;
+        this.model = vehicle.model;
+        this.trim = vehicle.trim;
+        this.landingImage = vehicle.landingImage;
+        this.advertisePrice = vehicle.advertise_price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        this.stockNumber = vehicle.stock_number;
+        this.mileage = vehicle.mileage;
+    }
+
+    generateCardElement() {
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = this.generateCardHTML().trim();
+    
+        // Get the vehicle-card element
+        const cardElement = wrapper.querySelector('.vehicle-card');
+        const ripple = new mdc.ripple.MDCRipple(cardElement);
+        ripple.unbounded = false;
+        cardElement.addEventListener('click', () => {
+            console.log(dataStore)
+            var queryString = encodeURIComponent(JSON.stringify(dataStore.filters));
+
+            const url = `vehicle-details/?vehicle_id=${encodeURIComponent(this.id)}&filters=${queryString}`;
+            window.location.href = url;
+
+        });
+
+                   
+    
+        return cardElement;
+    }
+
+  
+
+    generateCardHTML() {
+        return `
+            <div class="bg-white shadow-md rounded-md transition-all duration-500 vehicle-card cursor-pointer mdc-ripple-surface hover:shadow-lg" data-vehicle-id="${this.id}">
+                <img src="${this.landingImage}" alt="Vehicle Image" class="w-full h-auto object-cover transition-all duration-500 vehicle-image rounded-tl-md rounded-tr-md">
+                <div class="flex flex-col justify-around transition-all duration-500 p-4">
+                    <h3 class="text-lg font-semibold mb-2 break-words ">${this.year} ${this.name} ${this.trim.join(' - ')}</h3>
+                    <div class="text-gray-600">Year: ${this.year}</div>
+                    <div class="text-gray-600">Mileage: ${this.mileage} km</div>
+                    <div class="text-red-800 font-bold mt-2">Price: $${this.advertisePrice}</div>
+                    <div class="text-gray-600">Stock #: ${this.stockNumber} km</div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Initialize the ripple component for all instances of VehicleThumbnail
+document.addEventListener('DOMContentLoaded', function () {
+    const vehicleThumbnails = document.querySelectorAll('.mdc-ripple-surface');
+    vehicleThumbnails.forEach(thumbnail => {
+        const ripple = new mdc.ripple.MDCRipple(thumbnail);
+        ripple.unbounded = true;
+    });
+});