Thalisonkk2/moda-expresso

1 2// Dados de produtos3const products = [4    { id: 1, name: "Blusa Feminina Manga Longa", price: 89.90, category: "blusas", image: "http://static.photos/fashion/640x360/1", popular: true, discount: false },5    { id: 2, name: "Calça Jeans Skinny", price: 129.90, category: "calças", image: "http://static.photos/fashion/640x360/2", popular: true, discount: true, oldPrice: 159.90 },6    { id: 3, name: "Tênis Esportivo", price: 199.90, category: "tenis", image: "http://static.photos/fashion/640x360/3", popular: true, discount: false },7    { id: 4, name: "Bermuda Masculina", price: 69.90, category: "bermudas", image: "http://static.photos/fashion/640x360/4", popular: false, discount: true, oldPrice: 89.90 },8    { id: 5, name: "Short Jeans Feminino", price: 79.90, category: "shorts", image: "http://static.photos/fashion/640x360/5", popular: false, discount: false },9    { id: 6, name: "Sapato Social Masculino", price: 249.90, category: "sapatos", image: "http://static.photos/fashion/640x360/6", popular: true, discount: false },10    { id: 7, name: "Colar de Prata", price: 59.90, category: "acessorios", image: "http://static.photos/fashion/640x360/7", popular: false, discount: true, oldPrice: 79.90 },11    { id: 8, name: "Blusa Regata", price: 49.90, category: "blusas", image: "http://static.photos/fashion/640x360/8", popular: false, discount: false }12];13 14// Carrinho de compras15let cartItems = [];16 17document.addEventListener('DOMContentLoaded', function() {18    // Carrega produtos na página inicial19    if (document.querySelector('#products-container') || document.querySelector('.grid.grid-cols-1')) {20        loadProducts();21    }22 23    // Filtros24    document.querySelectorAll('.filter-select').forEach(select => {25        select.addEventListener('change', function() {26            filterProducts();27        });28    });29 30    document.querySelectorAll('.filter-btn').forEach(button => {31        button.addEventListener('click', function() {32            filterProducts(this.dataset.filter);33        });34    });35 36    // Adicionar ao carrinho37    document.addEventListener('click', function(e) {38        if (e.target.closest('.add-to-cart')) {39            const productId = parseInt(e.target.dataset.id);40            const product = products.find(p => p.id === productId);41            if (product) {42                addToCart(product);43            }44        }45    });46 47    // Newsletter48    const newsletterForm = document.querySelector('.newsletter form');49    if (newsletterForm) {50        newsletterForm.addEventListener('submit', function(e) {51            e.preventDefault();52            const email = this.querySelector('input').value;53            if (email) {54                alert('Obrigado por assinar nossa newsletter!');55                this.querySelector('input').value = '';56            }57        });58    }59 60    // Feedback61    const feedbackModal = document.querySelector('feedback-modal');62    if (feedbackModal) {63        feedbackModal.shadowRoot.querySelector('.submit-btn').addEventListener('click', function() {64            const feedback = feedbackModal.shadowRoot.querySelector('textarea').value;65            if (feedback.trim() !== '') {66                alert('Obrigado pelo seu feedback!');67                feedbackModal.shadowRoot.querySelector('.modal').style.display = 'none';68                feedbackModal.shadowRoot.querySelector('textarea').value = '';69            }70        });71    }72});73 74function loadProducts(filter = null) {75    let container;76    if (document.querySelector('#products-container')) {77        container = document.querySelector('#products-container');78    } else {79        container = document.querySelector('.grid.grid-cols-1');80    }81    82    container.innerHTML = '';83 84    let filteredProducts = [...products];85    86    // Aplicar filtros87    if (filter === 'promocao') {88        filteredProducts = products.filter(p => p.discount);89    } else if (filter) {90        filteredProducts = products.filter(p => p.category === filter);91    }92 93    // Mostrar apenas 4 produtos na página inicial94    if (window.location.pathname === '/index.html' || window.location.pathname === '/') {95        filteredProducts = filteredProducts.slice(0, 4);96    }97 98    filteredProducts.forEach(product => {99        const productCard = document.createElement('div');100        productCard.className = 'product-card border rounded-lg overflow-hidden hover:shadow-lg transition';101        productCard.innerHTML = `102            <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">103            <div class="p-4">104                <h3 class="font-bold text-lg mb-2">${product.name}</h3>105                <div class="flex items-center mb-4">106                    <span class="font-bold text-lg">R$ ${product.price.toFixed(2)}</span>107                    ${product.discount ? `<span class="ml-2 text-sm text-gray-500 line-through">R$ ${product.oldPrice.toFixed(2)}</span>` : ''}108                </div>109                <button class="add-to-cart w-full bg-black text-white px-4 py-2 rounded hover:bg-gray-800" data-id="${product.id}">110                    Adicionar ao Carrinho111                </button>112            </div>113        `;114        container.appendChild(productCard);115    });116}117 118function addToCart(product) {119    cartItems.push(product);120    updateCartCount();121    alert(`${product.name} adicionado ao carrinho!`);122}123 124function updateCartCount() {125    const cartCountElements = document.querySelectorAll('.cart-count');126    cartCountElements.forEach(el => {127        el.textContent = cartItems.length;128    });129}130 131function filterProducts(filter = null) {132    const categoryFilter = document.querySelector('.filter-select')?.value;133    const orderFilter = document.querySelectorAll('.filter-select')[1]?.value;134    135    let filteredProducts = [...products];136    137    if (categoryFilter) {138        filteredProducts = filteredProducts.filter(p => p.category === categoryFilter);139    }140    141    if (filter === 'promocao') {142        filteredProducts = filteredProducts.filter(p => p.discount);143    }144    145    if (orderFilter) {146        switch(orderFilter) {147            case 'popular':148                filteredProducts = filteredProducts.filter(p => p.popular);149                break;150            case 'novos':151                filteredProducts = filteredProducts.sort((a, b) => b.id - a.id);152                break;153            case 'preco-asc':154                filteredProducts = filteredProducts.sort((a, b) => a.price - b.price);155                break;156            case 'preco-desc':157                filteredProducts = filteredProducts.sort((a, b) => b.price - a.price);158                break;159        }160    }161    162    loadProducts(filteredProducts);163});