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/DisplayMode.js
+++ b/autocart_assets/js/DisplayMode.js
@@ -0,0 +1,50 @@
+class DisplayMode {
+    constructor(containerId) {
+        this.containerId = containerId || '.display-products .row';
+        this.container = document.querySelector(this.containerId);
+        this.init();
+    }
+
+    init() {
+        const gridButton = document.getElementById('grid-view');
+        const listButton = document.getElementById('list-view');
+
+        gridButton.addEventListener('click', () => this.toggleView('grid'));
+        listButton.addEventListener('click', () => this.toggleView('list'));
+    }
+
+    toggleView(viewMode) {
+        const rowElement = document.querySelector('.vehicles-container');
+
+        // Remove 'selected' class from both buttons
+        document.getElementById('grid-view').classList.remove('selected');
+        document.getElementById('list-view').classList.remove('selected');
+
+        // Add the appropriate classes based on the clicked button
+        if (viewMode === 'grid') {
+            rowElement.classList.remove('flex', 'flex-col', 'items-stretch');
+            rowElement.classList.add('grid', 'md:grid-cols-2', 'lg:grid-cols-3', 'transition-all', 'duration-500');
+            document.getElementById('grid-view').classList.add('selected');
+        } else if (viewMode === 'list') {
+            rowElement.classList.remove('grid', 'md:grid-cols-2', 'lg:grid-cols-3');
+            rowElement.classList.add('flex', 'flex-col', 'items-stretch', 'transition-all', 'duration-500');
+            document.getElementById('list-view').classList.add('selected');
+        }
+
+        // Update individual cards based on viewMode
+        const cards = rowElement.querySelectorAll('.vehicle-card');
+        cards.forEach(card => {
+            const vehicleImage = card.querySelector('.vehicle-image');
+            vehicleImage.classList.remove('w-1/4', 'w-full');
+            if (viewMode === 'list') {
+                card.classList.add('flex', 'flex-row' ,'justify-start', 'items-stretch', 'gap-3')
+                // flex flex-row justify-start   gap-3
+                vehicleImage.classList.add('w-1/4');
+            } else {
+                card.classList.remove('flex', 'flex-row' ,'justify-start', 'items-stretch', 'gap-3')
+
+                vehicleImage.classList.add('w-full');
+            }
+        });
+    }
+}