File Manager

Editing:main.js

/* ===================================
   VELORA - Main JS
=================================== */

// Global Variables
const SITE_URL = window.SITE_URL || 'http://localhost/vedora/velora/';
const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content || '';
const IS_LOGGED_IN = document.body.classList.contains('logged-in') || false;

// Initialize Swiper Sliders
document.addEventListener('DOMContentLoaded', function() {
    
    // Hero Slider
    if (document.querySelector('.hero-slider')) {
        new Swiper('.hero-slider', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            }
        });
    }
    
    // Product Carousel
    if (document.querySelector('.product-carousel')) {
        new Swiper('.product-carousel', {
            loop: false,
            slidesPerView: 1,
            spaceBetween: 20,
            breakpoints: {
                576: { slidesPerView: 2 },
                768: { slidesPerView: 3 },
                992: { slidesPerView: 4 }
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        });
    }
    
    // Testimonial Slider
    if (document.querySelector('.testimonial-slider')) {
        new Swiper('.testimonial-slider', {
            loop: true,
            slidesPerView: 1,
            spaceBetween: 30,
            autoplay: {
                delay: 4000,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                768: { slidesPerView: 2 },
                992: { slidesPerView: 3 }
            }
        });
    }
    
    // Brand Slider
    if (document.querySelector('.brand-slider')) {
        new Swiper('.brand-slider', {
            loop: true,
            slidesPerView: 2,
            spaceBetween: 30,
            autoplay: {
                delay: 3000,
            },
            breakpoints: {
                576: { slidesPerView: 3 },
                768: { slidesPerView: 4 },
                992: { slidesPerView: 6 }
            }
        });
    }
    
    // Instagram Gallery Popup
    if (document.querySelector('.instagram-grid')) {
        $('.instagram-grid').magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    }
    
    // Sticky Header
    const header = document.querySelector('.main-header');
    if (header) {
        const headerHeight = header.offsetTop;
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > headerHeight) {
                document.querySelector('.main-nav')?.classList.add('sticky-nav');
            } else {
                document.querySelector('.main-nav')?.classList.remove('sticky-nav');
            }
        });
    }
    
    // Animation on scroll
    const animateElements = document.querySelectorAll('.animate-on-scroll');
    if (animateElements.length > 0 && 'IntersectionObserver' in window) {
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animated');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });
        
        animateElements.forEach(function(el) {
            observer.observe(el);
        });
    }
    
    // Password Toggle
    document.querySelectorAll('.toggle-password').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const input = this.previousElementSibling;
            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
            input.setAttribute('type', type);
            this.querySelector('i').classList.toggle('fa-eye');
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
    });
    
    // Form Validation
    document.querySelectorAll('form.needs-validation').forEach(function(form) {
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
    
    // Shipping Toggle (Billing = Shipping)
    const sameAsBilling = document.getElementById('same_as_billing');
    if (sameAsBilling) {
        sameAsBilling.addEventListener('change', function() {
            const shippingFields = document.querySelectorAll('.shipping-field');
            if (this.checked) {
                shippingFields.forEach(function(field) {
                    field.style.display = 'none';
                    field.querySelectorAll('input, select').forEach(function(input) {
                        input.value = '';
                    });
                });
            } else {
                shippingFields.forEach(function(field) {
                    field.style.display = 'block';
                });
            }
        });
    }
    
    // Payment Method Toggle
    document.querySelectorAll('input[name="payment_method"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            document.querySelectorAll('.payment-info').forEach(function(info) {
                info.style.display = 'none';
            });
            const selectedInfo = document.getElementById('payment_' + this.value + '_info');
            if (selectedInfo) {
                selectedInfo.style.display = 'block';
            }
        });
    });
    
    // Image Gallery Main Image
    document.querySelectorAll('.gallery-thumb').forEach(function(thumb) {
        thumb.addEventListener('click', function() {
            const mainImg = document.querySelector('.gallery-main img');
            const newSrc = this.querySelector('img').getAttribute('src');
            mainImg.style.opacity = '0';
            setTimeout(function() {
                mainImg.setAttribute('src', newSrc);
                mainImg.style.opacity = '1';
            }, 200);
            
            document.querySelectorAll('.gallery-thumb').forEach(function(t) {
                t.classList.remove('active');
            });
            this.classList.add('active');
        });
    });
    
    // Range Slider
    const rangeSlider = document.querySelector('.price-range');
    if (rangeSlider) {
        noUiSlider.create(rangeSlider, {
            start: [0, 1000],
            connect: true,
            range: {
                'min': 0,
                'max': 1000
            }
        });
        
        const minPriceInput = document.getElementById('min_price');
        const maxPriceInput = document.getElementById('max_price');
        
        rangeSlider.noUiSlider.on('update', function(values, handle) {
            const value = values[handle];
            if (handle === 0 && minPriceInput) {
                minPriceInput.value = Math.round(value);
            } else if (handle === 1 && maxPriceInput) {
                maxPriceInput.value = Math.round(value);
            }
        });
    }
    
});

// Sticky Nav Style
const stickyStyle = document.createElement('style');
stickyStyle.textContent = `
    .main-nav.sticky-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        animation: slideDown 0.3s ease;
        z-index: 999;
    }
    
    @keyframes slideDown {
        from { transform: translateY(-100%); }
        to { transform: translateY(0); }
    }
    
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease;
    }
    
    .animate-on-scroll.animated {
        opacity: 1;
        transform: translateY(0);
    }
    
    .gallery-main img {
        transition: opacity 0.3s ease;
    }
    
    .gallery-thumb {
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .gallery-thumb.active {
        border-color: var(--primary-rose-gold);
    }
`;
document.head.appendChild(stickyStyle);

Cancel

🤩 File Manager - Mr.X

Editing:main.js