Page d'accueil

Welcome to our store

/** * Warranty Footer JavaScript - API Integration * File: assets/warranty-footer.js * * Connecte le footer aux microservices pour: * - Récupérer les garanties actives du client * - Afficher le statut en temps réel * - Gérer les réclamations * - Envoyer des notifications */ class WarrantyFooter { constructor() { // Configuration de l'API - À personnaliser avec ton domaine this.config = { apiBaseUrl: 'https://api.votresite.com', apiVersion: 'v1', shopifyStorefront: window.Shopify?.shop || 'votre-boutique.myshopify.com', endpoints: { warranties: '/api/warranties', claims: '/api/claims', customer: '/api/customers', tracking: '/api/warranties/track', notifications: '/api/notifications' } }; // État de l'application this.state = { isLoggedIn: false, customerId: null, warranties: [], activeClaims: [], loading: false }; this.init(); } /** * Initialisation du footer */ async init() { console.log('🛡️ Warranty Footer initialized'); // Vérifier si le client est connecté await this.checkCustomerAuth(); // Charger les données si connecté if (this.state.isLoggedIn) { await this.loadCustomerData(); } // Attacher les événements this.attachEventListeners(); // Mettre à jour l'UI this.updateUI(); } /** * Vérifier l'authentification du client */ async checkCustomerAuth() { try { // Méthode 1: Via Shopify Customer API const customerData = window.ShopifyAnalytics?.meta?.page?.customerId; if (customerData) { this.state.isLoggedIn = true; this.state.customerId = customerData; return; } // Méthode 2: Via cookie/localStorage const token = this.getAuthToken(); if (token) { const response = await this.apiCall('/api/customers/me', { method: 'GET', headers: { 'Authorization': `Bearer ${token}` } }); if (response.success) { this.state.isLoggedIn = true; this.state.customerId = response.data.id; } } } catch (error) { console.error('❌ Auth check failed:', error); this.state.isLoggedIn = false; } } /** * Charger les données client */ async loadCustomerData() { try { this.state.loading = true; // Charger les garanties en parallèle const [warranties, claims] = await Promise.all([ this.getCustomerWarranties(), this.getActiveClaims() ]); this.state.warranties = warranties; this.state.activeClaims = claims; console.log('✅ Customer data loaded:', { warranties: warranties.length, claims: claims.length }); } catch (error) { console.error('❌ Failed to load customer data:', error); this.showNotification('Erreur lors du chargement des données', 'error'); } finally { this.state.loading = false; } } /** * Récupérer les garanties du client */ async getCustomerWarranties() { try { const response = await this.apiCall( `${this.config.endpoints.customer}/${this.state.customerId}/warranties`, { method: 'GET' } ); return response.success ? response.data : []; } catch (error) { console.error('❌ Failed to fetch warranties:', error); return []; } } /** * Récupérer les réclamations actives */ async getActiveClaims() { try { const response = await this.apiCall( `${this.config.endpoints.claims}?customer_id=${this.state.customerId}&status=active`, { method: 'GET' } ); return response.success ? response.data : []; } catch (error) { console.error('❌ Failed to fetch claims:', error); return []; } } /** * Soumettre une nouvelle réclamation */ async submitClaim(warrantyId, claimData) { try { this.state.loading = true; const formData = new FormData(); formData.append('warranty_id', warrantyId); formData.append('customer_id', this.state.customerId); formData.append('description', claimData.description); formData.append('issue_type', claimData.issueType); // Ajouter les photos/documents if (claimData.files && claimData.files.length > 0) { claimData.files.forEach((file, index) => { formData.append(`documents[${index}]`, file); }); } const response = await this.apiCall( this.config.endpoints.claims + '/submit', { method: 'POST', body: formData } ); if (response.success) { this.showNotification('✅ Réclamation soumise avec succès !', 'success'); await this.loadCustomerData(); // Recharger les données return response.data; } else { throw new Error(response.message || 'Échec de la soumission'); } } catch (error) { console.error('❌ Failed to submit claim:', error); this.showNotification('❌ Erreur lors de la soumission', 'error'); throw error; } finally { this.state.loading = false; } } /** * Suivre le statut d'une garantie */ async trackWarranty(warrantyId) { try { const response = await this.apiCall( `${this.config.endpoints.tracking}/${warrantyId}`, { method: 'GET' } ); if (response.success) { return response.data; } return null; } catch (error) { console.error('❌ Failed to track warranty:', error); return null; } } /** * Enregistrer une nouvelle garantie (automatique après achat) */ async registerWarranty(orderData) { try { const response = await this.apiCall( this.config.endpoints.warranties + '/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ customer_id: this.state.customerId, order_id: orderData.orderId, product_id: orderData.productId, product_name: orderData.productName, purchase_date: orderData.purchaseDate, warranty_duration: orderData.warrantyDuration || 12, // mois metadata: orderData.metadata || {} }) } ); if (response.success) { console.log('✅ Warranty registered:', response.data); return response.data; } return null; } catch (error) { console.error('❌ Failed to register warranty:', error); return null; } } /** * Appel API générique avec gestion d'erreurs */ async apiCall(endpoint, options = {}) { try { const url = `${this.config.apiBaseUrl}${endpoint}`; const token = this.getAuthToken(); const defaultHeaders = { 'X-Shopify-Shop': this.config.shopifyStorefront, 'Accept': 'application/json' }; if (token && !options.headers?.['Authorization']) { defaultHeaders['Authorization'] = `Bearer ${token}`; } const response = await fetch(url, { ...options, headers: { ...defaultHeaders, ...options.headers } }); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } const data = await response.json(); return data; } catch (error) { console.error('❌ API call failed:', error); throw error; } } /** * Récupérer le token d'authentification */ getAuthToken() { // Essayer localStorage let token = localStorage.getItem('warranty_auth_token'); // Essayer sessionStorage if (!token) { token = sessionStorage.getItem('warranty_auth_token'); } // Essayer les cookies if (!token) { token = this.getCookie('warranty_token'); } return token; } /** * Sauvegarder le token */ setAuthToken(token, remember = true) { if (remember) { localStorage.setItem('warranty_auth_token', token); } else { sessionStorage.setItem('warranty_auth_token', token); } } /** * Récupérer un cookie */ getCookie(name) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) { return parts.pop().split(';').shift(); } return null; } /** * Attacher les événements aux boutons */ attachEventListeners() { // Bouton "Mes Garanties" const myWarrantiesBtn = document.querySelectorAll('[data-warranty-action="view-warranties"]'); myWarrantiesBtn.forEach(btn => { btn.addEventListener('click', (e) => { e.preventDefault(); this.openWarrantiesModal(); }); }); // Bouton "Faire une Réclamation" const claimBtn = document.querySelectorAll('[data-warranty-action="submit-claim"]'); claimBtn.forEach(btn => { btn.addEventListener('click', (e) => { e.preventDefault(); this.openClaimModal(); }); }); // Bouton "Suivre ma Commande" const trackBtn = document.querySelectorAll('[data-warranty-action="track-order"]'); trackBtn.forEach(btn => { btn.addEventListener('click', (e) => { e.preventDefault(); this.openTrackingModal(); }); }); } /** * Ouvrir le modal des garanties */ openWarrantiesModal() { if (!this.state.isLoggedIn) { this.showNotification('Veuillez vous connecter pour voir vos garanties', 'info'); window.location.href = '/account/login'; return; } // Créer le contenu du modal const modalContent = this.renderWarrantiesModal(); this.showModal('Mes Garanties', modalContent); } /** * Ouvrir le modal de réclamation */ openClaimModal() { if (!this.state.isLoggedIn) { this.showNotification('Veuillez vous connecter pour faire une réclamation', 'info'); window.location.href = '/account/login'; return; } const modalContent = this.renderClaimModal(); this.showModal('Faire une Réclamation', modalContent); } /** * Ouvrir le modal de suivi */ openTrackingModal() { const modalContent = this.renderTrackingModal(); this.showModal('Suivre ma Commande', modalContent); } /** * Générer le HTML du modal des garanties */ renderWarrantiesModal() { if (this.state.warranties.length === 0) { return `

Vous n'avez pas encore de garanties enregistrées.

Les garanties sont automatiquement enregistrées lors de vos achats.

`; } return `

${this.state.warranties.map(warranty => `

${warranty.product_name}

Numéro: ${warranty.warranty_number}

Date d'achat: ${this.formatDate(warranty.purchase_date)}

Expire le: ${this.formatDate(warranty.expiry_date)}

${warranty.status === 'active' ? '✓ Active' : '✗ Expirée'}

`).join('')}

`; } /** * Générer le HTML du modal de réclamation */ renderClaimModal() { return ` `; } /** * Générer le HTML du modal de suivi */ renderTrackingModal() { return `

Entrez votre numéro de commande pour suivre votre livraison:

`; } /** * Afficher un modal générique */ showModal(title, content) { // Créer ou récupérer le modal let modal = document.getElementById('warrantyModal'); if (!modal) { modal = document.createElement('div'); modal.id = 'warrantyModal'; modal.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; `; document.body.appendChild(modal); } modal.innerHTML = `

${title}

${content}

`; modal.style.display = 'flex'; // Fermer en cliquant en dehors modal.onclick = (e) => { if (e.target === modal) { this.closeModal(); } }; // Gérer la soumission du formulaire si c'est le modal de réclamation const form = document.getElementById('claimForm'); if (form) { form.onsubmit = async (e) => { e.preventDefault(); await this.handleClaimSubmit(form); }; } } /** * Fermer le modal */ closeModal() { const modal = document.getElementById('warrantyModal'); if (modal) { modal.style.display = 'none'; } } /** * Gérer la soumission du formulaire de réclamation */ async handleClaimSubmit(form) { const formData = new FormData(form); const claimData = { description: formData.get('description'), issueType: formData.get('issue_type'), files: formData.getAll('files') }; try { await this.submitClaim(formData.get('warranty_id'), claimData); this.closeModal(); } catch (error) { console.error('Failed to submit claim:', error); } } /** * Afficher une notification */ showNotification(message, type = 'info') { const notification = document.createElement('div'); notification.style.cssText = ` position: fixed; top: 20px; right: 20px; padding: 15px 25px; background: ${type === 'success' ? '#48bb78' : type === 'error' ? '#f56565' : '#4299e1'}; color: white; border-radius: 10px; z-index: 10000; font-family: 'Inter', sans-serif; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.3); animation: slideIn 0.3s ease; `; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.style.animation = 'slideOut 0.3s ease'; setTimeout(() => notification.remove(), 300); }, 3000); } /** * Mettre à jour l'interface */ updateUI() { // Mettre à jour les compteurs const warrantyCount = document.querySelector('[data-warranty-count]'); if (warrantyCount) { warrantyCount.textContent = this.state.warranties.length; } const claimCount = document.querySelector('[data-claim-count]'); if (claimCount) { claimCount.textContent = this.state.activeClaims.length; } // Afficher/masquer les éléments selon l'état de connexion const loggedInElements = document.querySelectorAll('[data-require-auth]'); loggedInElements.forEach(el => { el.style.display = this.state.isLoggedIn ? 'block' : 'none'; }); } /** * Formater une date */ formatDate(dateString) { const date = new Date(dateString); return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }); } } // Initialiser au chargement de la page let warrantyFooter; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { warrantyFooter = new WarrantyFooter(); }); } else { warrantyFooter = new WarrantyFooter(); } // Export pour utilisation externe window.warrantyFooter = warrantyFooter;

Votre panier est vide

Votre panier

Total estimé

Collection: Page d'accueil

Mini haut-parleur Bluetooth à bruit blanc rétro

Mini haut-parleur Bluetooth à bruit blanc rétro

${warranty.product_name}

${title}

Collection: Page d'accueil

Filtrer et trier

Filtrer

Mini haut-parleur Bluetooth à bruit blanc rétro

Mini haut-parleur Bluetooth à bruit blanc rétro

${warranty.product_name}

${title}