File Manager

Editing:main.js

// assets/js/main.js
document.addEventListener('DOMContentLoaded', function() {
    // 1. Navbar scroll effect
    const navbar = document.querySelector('.navbar');
    if (navbar) {
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
    }

// 2. Add high-end visual Toast notification system dynamically
    const toastContainer = document.createElement('div');
    toastContainer.id = 'mndirect-toast-container';
    toastContainer.style.cssText = 'position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none;';
    document.body.appendChild(toastContainer);

// Auto remove
        setTimeout(() => {
            toast.style.opacity = '0';
            toast.style.transform = 'translateY(-20px)';
            setTimeout(() => {
                toast.remove();
            }, 400);
        }, 3500);
    };

// 3. Dynamic AJAX Add-to-Cart handlers
    const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');
    addToCartButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const productId = this.getAttribute('data-product-id');
            const quantity = this.getAttribute('data-qty') || 1;
            
            // Show loading animation on button if possible
            const originalHTML = this.innerHTML;
            this.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
            this.disabled = true;

fetch('cart_action.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=add&product_id=${productId}&quantity=${quantity}`
            })
            .then(response => response.json())
            .then(data => {
                this.innerHTML = originalHTML;
                this.disabled = false;
                
                if (data.status === 'success') {
                    // Update header cart count badge dynamically
                    let cartBadge = document.querySelector('.cart-badge');
                    if (cartBadge) {
                        cartBadge.textContent = data.cart_count;
                    } else {
                        // Badge doesn't exist, create it in the header
                        const cartLink = document.querySelector('.fa-bag-shopping').parentElement;
                        const badgeSpan = document.createElement('span');
                        badgeSpan.className = 'position-absolute top-0 start-100 translate-middle badge rounded-circle cart-badge';
                        badgeSpan.textContent = data.cart_count;
                        cartLink.appendChild(badgeSpan);
                    }
                    
                    // Show success toast
                    window.showToast(`${data.product_name} added to cart!`);
                } else {
                    window.showToast(data.message || 'Error adding to cart.', 'error');
                }
            })
            .catch(error => {
                console.error('Error adding to cart:', error);
                this.innerHTML = originalHTML;
                this.disabled = false;
                window.showToast('Something went wrong. Please try again.', 'error');
            });
        });
    });

// 4. Atelier Stories Testimonial Slider
    const testimonialTrack = document.querySelector('.testimonial-track');
    const testimonialSlides = document.querySelectorAll('.testimonial-slide');
    const testimonialDots = document.querySelectorAll('.testimonial-dot');
    
    if (testimonialTrack && testimonialSlides.length > 0 && testimonialDots.length > 0) {
        let currentSlide = 0;
        let slideInterval;
        const totalSlides = testimonialSlides.length;
        
        function updateTestimonialSlider(index) {
            // Update active dot
            testimonialDots.forEach((dot, idx) => {
                if (idx === index) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
            
            // Translate the track
            testimonialTrack.style.transform = `translateX(-${index * (100 / totalSlides)}%)`;
            currentSlide = index;
        }
        
        function nextSlide() {
            let next = (currentSlide + 1) % totalSlides;
            updateTestimonialSlider(next);
        }
        
        function startAutoSlide() {
            slideInterval = setInterval(nextSlide, 5000);
        }
        
        function stopAutoSlide() {
            clearInterval(slideInterval);
        }
        
        // Manual control click events
        testimonialDots.forEach((dot, idx) => {
            dot.addEventListener('click', function() {
                stopAutoSlide();
                updateTestimonialSlider(idx);
                startAutoSlide();
            });
        });
        
        // Pause auto-sliding on hover
        const testimonialSection = document.querySelector('.testimonial-section');
        if (testimonialSection) {
            testimonialSection.addEventListener('mouseenter', stopAutoSlide);
            testimonialSection.addEventListener('mouseleave', startAutoSlide);
        }
        
        // Start sliding initially
        startAutoSlide();
    }
});

Cancel

🤩 File Manager - Mr.X

Editing:main.js