E‑commerce: 12 optimisations qui augmentent la conversion

<!-- ❌ Image produit non optimisée -->
<img src="product-hero.jpg" alt="Product" />

<!-- ✅ Optimisation complète -->
<picture>
  <source 
    srcset="product-hero.webp" 
    type="image/webp"
    media="(min-width: 768px)"
  >
  <source 
    srcset="product-hero-mobile.webp" 
    type="image/webp"
    media="(max-width: 767px)"
  >
  <img 
    src="product-hero.jpg" 
    alt="Product name - detailed description for accessibility"
    width="600" 
    height="400"
    loading="eager"
    decoding="sync"
    fetchpriority="high"
  />
</picture>

/* CSS critique inline pour above-the-fold */
.product-hero { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 2rem; 
}
.product-price { 
  font-size: 2rem; 
  color: #e60012; 
  font-weight: 600; 
}
.add-to-cart { 
  background: #00a850; 
  color: white; 
  padding: 1rem 2rem; 
  border: none; 
  border-radius: 8px; 
}

// Galerie avec zoom et préchargement intelligent
const ProductGallery = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isZoomed, setIsZoomed] = useState(false)
  
  // Précharger image suivante pour fluidité
  useEffect(() => {
    if (images[currentIndex + 1]) {
      const img = new Image()
      img.src = images[currentIndex + 1].src
    }
  }, [currentIndex])
  
  return (
    <div className="product-gallery">
      <div className="main-image" onClick={() => setIsZoomed(true)}>
        <img 
          src={images[currentIndex].src}
          alt={images[currentIndex].alt}
          loading="eager"
        />
        <span className="zoom-indicator">🔍 Cliquer pour zoomer</span>
      </div>
      
      <div className="thumbnails">
        {images.map((img, index) => (
          <button
            key={index}
            onClick={() => setCurrentIndex(index)}
            className={index === currentIndex ? 'active' : ''}
          >
            <img src={img.thumbnail} alt="" />
          </button>
        ))}
      </div>
    </div>
  )
}

// Affichage prix avec urgence et preuve sociale
const ProductPrice = ({ product }) => {
  const discount = calculateDiscount(product.originalPrice, product.currentPrice)
  const remainingStock = product.stock
  
  return (
    <div className="price-section">
      <div className="price-main">
        <span className="current-price">{product.currentPrice}€</span>
        {product.originalPrice > product.currentPrice && (
          <span className="original-price">{product.originalPrice}€</span>
        )}
      </div>
      
      {discount > 0 && (
        <div className="discount-badge">-{discount}%</div>
      )}
      
      {remainingStock < 10 && remainingStock > 0 && (
        <div className="urgency-message">
          ⚡ Plus que {remainingStock} en stock
        </div>
      )}
      
      <div className="social-proof">
        ⭐ 4.8/5 ({product.reviewCount} avis)
      </div>
    </div>
  )
}

<div class="product-description">
  <div class="benefit-headline">
    <h2>Le sac parfait pour vos déplacements professionnels</h2>
    <p class="benefit-summary">
      Compartiment laptop rembourré + 15 poches organisées = 
      productivité maximale en déplacement
    </p>
  </div>
  
  <div class="key-features">
    <h3>Points forts</h3>
    <ul>
      <li>✅ Protection laptop jusqu'à 15.6"</li>
      <li>✅ Matériaux imperméables</li>
      <li>✅ Port USB intégré</li>
      <li>✅ Garantie 5 ans</li>
    </ul>
  </div>
  
  <div class="specifications">
    <h3>Dimensions</h3>
    <p>45cm x 32cm x 15cm | 1.2kg | Capacité 30L</p>
  </div>
</div>

// Checkout progressif avec sauvegarde auto
const CheckoutProgress = ({ currentStep, totalSteps }) => {
  const steps = [
    'Coordonnées',
    'Livraison', 
    'Paiement',
    'Confirmation'
  ]
  
  // Sauvegarde automatique toutes les 30s
  useEffect(() => {
    const interval = setInterval(() => {
      localStorage.setItem('checkout-progress', JSON.stringify(formData))
    }, 30000)
    
    return () => clearInterval(interval)
  }, [formData])
  
  return (
    <div className="checkout-progress">
      {steps.map((step, index) => (
        <div 
          key={step}
          className={`step ${index <= currentStep ? 'completed' : ''}`}
        >
          <span className="step-number">{index + 1}</span>
          <span className="step-label">{step}</span>
        </div>
      ))}
    </div>
  )
}

// Validation temps réel avec feedback positif
const CheckoutForm = () => {
  const [errors, setErrors] = useState({})
  const [validFields, setValidFields] = useState({})
  
  const validateField = (name, value) => {
    const validators = {
      email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
      phone: (v) => /^[0-9+\s-()]{10,}$/.test(v),
      postalCode: (v) => /^[0-9]{5}$/.test(v)
    }
    
    const isValid = validators[name]?.(value) ?? true
    
    if (isValid) {
      setErrors(prev => ({ ...prev, [name]: null }))
      setValidFields(prev => ({ ...prev, [name]: true }))
    } else {
      setValidFields(prev => ({ ...prev, [name]: false }))
      setErrors(prev => ({ 
        ...prev, 
        [name]: getErrorMessage(name, value) 
      }))
    }
  }
  
  return (
    <form className="checkout-form">
      <div className="form-group">
        <label htmlFor="email">
          Email *
          {validFields.email && <span className="valid-check">✓</span>}
        </label>
        <input
          type="email"
          id="email"
          onChange={(e) => validateField('email', e.target.value)}
          className={errors.email ? 'error' : validFields.email ? 'valid' : ''}
        />
        {errors.email && <span className="error-message">{errors.email}</span>}
      </div>
    </form>
  )
}

<div class="payment-section">
  <h3>Paiement sécurisé</h3>
  
  <div class="payment-methods">
    <button class="payment-option active">
      <img src="card-icon.svg" alt="Carte bancaire">
      Carte bancaire
    </button>
    <button class="payment-option">
      <img src="paypal-icon.svg" alt="PayPal">
      PayPal
    </button>
    <button class="payment-option">
      <img src="apple-pay-icon.svg" alt="Apple Pay">
      Apple Pay
    </button>
  </div>
  
  <div class="security-badges">
    <img src="ssl-badge.svg" alt="SSL sécurisé">
    <img src="visa-badge.svg" alt="Visa sécurisé">
    <span class="security-text">Paiement 100% sécurisé</span>
  </div>
  
  <div class="guarantees">
    <p>✅ Satisfait ou remboursé 30 jours</p>
    <p>✅ Livraison gratuite dès 50€</p>
    <p>✅ Service client 7j/7</p>
  </div>
</div>

// Affichage avis avec photos et vérification
const ProductReviews = ({ reviews, rating }) => {
  const [displayCount, setDisplayCount] = useState(3)
  const recentReviews = reviews
    .sort((a, b) => new Date(b.date) - new Date(a.date))
    .slice(0, displayCount)
  
  return (
    <div className="reviews-section">
      <div className="reviews-summary">
        <div className="rating-overview">
          <span className="rating-number">{rating}</span>
          <div className="stars">{'⭐'.repeat(Math.floor(rating))}</div>
          <span className="review-count">({reviews.length} avis)</span>
        </div>
      </div>
      
      <div className="reviews-list">
        {recentReviews.map(review => (
          <div key={review.id} className="review-item">
            <div className="review-header">
              <span className="reviewer-name">{review.name}</span>
              <span className="review-date">{formatDate(review.date)}</span>
              <div className="stars">{'⭐'.repeat(review.rating)}</div>
            </div>
            
            <p className="review-text">{review.comment}</p>
            
            {review.images && (
              <div className="review-images">
                {review.images.map(img => (
                  <img 
                    key={img} 
                    src={img} 
                    alt="Photo client"
                    loading="lazy"
                  />
                ))}
              </div>
            )}
            
            {review.verified && (
              <span className="verified-badge">✓ Achat vérifié</span>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

// Notifications d'activité pour créer l'urgence
const SocialNotifications = () => {
  const [notifications, setNotifications] = useState([])
  
  useEffect(() => {
    // Simuler notifications réelles (à connecter à votre API)
    const interval = setInterval(() => {
      const newNotification = {
        id: Date.now(),
        type: 'purchase',
        message: 'Sarah P. de Lyon vient de commander cet article',
        timestamp: new Date()
      }
      
      setNotifications(prev => [newNotification, ...prev.slice(0, 4)])
    }, 15000 + Math.random() * 30000) // Entre 15-45s
    
    return () => clearInterval(interval)
  }, [])
  
  return (
    <div className="social-notifications">
      {notifications.map(notification => (
        <div 
          key={notification.id} 
          className="notification animate-slide-in"
        >
          <span className="notification-icon">🛍️</span>
          <span className="notification-text">{notification.message}</span>
          <span className="notification-time">
            {formatTimeAgo(notification.timestamp)}
          </span>
        </div>
      ))}
    </div>
  )
}

/* Navigation sticky avec panier visible */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #eee;
  padding: 1rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 100;
}

.mobile-nav-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
}

.add-to-cart-mobile {
  background: #00a850;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  min-height: 44px; /* Touch target minimum */
}

.cart-icon-mobile {
  position: relative;
  min-width: 44px;
  min-height: 44px;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e60012;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// Recherche avec suggestions et filtres faciles
const MobileSearch = () => {
  const [query, setQuery] = useState('')
  const [suggestions, setSuggestions] = useState([])
  const [isOpen, setIsOpen] = useState(false)
  
  const debouncedSearch = useMemo(
    () => debounce(async (searchQuery) => {
      if (searchQuery.length >= 2) {
        const results = await searchProducts(searchQuery)
        setSuggestions(results.slice(0, 5))
      } else {
        setSuggestions([])
      }
    }, 300),
    []
  )
  
  useEffect(() => {
    debouncedSearch(query)
  }, [query, debouncedSearch])
  
  return (
    <div className="mobile-search">
      <div className="search-input-container">
        <input
          type="text"
          placeholder="Rechercher un produit..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onFocus={() => setIsOpen(true)}
        />
        <button className="search-button">🔍</button>
      </div>
      
      {isOpen && suggestions.length > 0 && (
        <div className="search-suggestions">
          {suggestions.map(product => (
            <a 
              key={product.id} 
              href={`/products/${product.slug}`}
              className="suggestion-item"
            >
              <img src={product.thumbnail} alt="" />
              <div>
                <div className="suggestion-name">{product.name}</div>
                <div className="suggestion-price">{product.price}€</div>
              </div>
            </a>
          ))}
        </div>
      )}
    </div>
  )
}

<div class="trust-indicators">
  <div class="shipping-info">
    <div class="shipping-option">
      <span class="icon">🚚</span>
      <div>
        <strong>Livraison gratuite</strong>
        <p>Dès 50€ d'achat</p>
      </div>
    </div>
    
    <div class="shipping-option">
      <span class="icon">⚡</span>
      <div>
        <strong>Expédition 24h</strong>
        <p>Commande avant 16h</p>
      </div>
    </div>
  </div>
  
  <div class="guarantees">
    <div class="guarantee-item">
      <span class="icon">↩️</span>
      <span>Retour gratuit 30 jours</span>
    </div>
    
    <div class="guarantee-item">
      <span class="icon">🛡️</span>
      <span>Garantie constructeur</span>
    </div>
    
    <div class="guarantee-item">
      <span class="icon">📞</span>
      <span>Support 7j/7</span>
    </div>
  </div>
  
  <div class="security-badges">
    <img src="ssl-certificate.svg" alt="Certificat SSL">
    <img src="trusted-site.svg" alt="Site de confiance">
    <img src="secure-payment.svg" alt="Paiement sécurisé">
  </div>
</div>

// FAQ contextuelle sur fiche produit
const ProductFAQ = ({ productId }) => {
  const [openFAQ, setOpenFAQ] = useState(null)
  
  const faqs = [
    {
      q: "Quelle est la taille qui me correspond ?",
      a: "Consultez notre guide des tailles détaillé avec mesures exactes. En cas de doute, commandez une taille au-dessus - les retours sont gratuits."
    },
    {
      q: "Puis-je retourner cet article ?",
      a: "Oui, retour gratuit sous 30 jours dans son emballage d'origine. L'étiquette de retour prépayée est fournie avec votre commande."
    },
    {
      q: "Délai de livraison ?",
      a: "Expédition sous 24h en semaine. Livraison standard 2-3 jours ouvrés, express 24h disponible au checkout."
    }
  ]
  
  return (
    <div className="product-faq">
      <h3>Questions fréquentes</h3>
      {faqs.map((faq, index) => (
        <div key={index} className="faq-item">
          <button
            onClick={() => setOpenFAQ(openFAQ === index ? null : index)}
            className="faq-question"
          >
            {faq.q}
            <span className={`faq-arrow ${openFAQ === index ? 'open' : ''}`}>
              ↓
            </span>
          </button>
          
          {openFAQ === index && (
            <div className="faq-answer">{faq.a}</div>
          )}
        </div>
      ))}
    </div>
  )
}

// Séquence email abandon panier
const cartAbandonmentSequence = [
  {
    delay: '1 hour',
    subject: 'Vous avez oublié quelque chose 👀',
    template: 'cart-reminder-1',
    incentive: null
  },
  {
    delay: '24 hours', 
    subject: 'Votre panier vous attend + 5% de remise',
    template: 'cart-reminder-2',
    incentive: 'COMEBACK5'
  },
  {
    delay: '72 hours',
    subject: 'Dernière chance : 10% sur votre commande',
    template: 'cart-reminder-3', 
    incentive: 'LASTCHANCE10'
  }
]

// Trigger automatique
const handleCartAbandonment = async (userId, cartItems) => {
  // Attendre 1h d'inactivité avant premier email
  await scheduleEmail(userId, cartAbandonmentSequence[0], cartItems)
}

// Intent de sortie avec offre contextuelle
const ExitIntentModal = ({ cart }) => {
  const [showModal, setShowModal] = useState(false)
  
  useEffect(() => {
    const handleExitIntent = (e) => {
      // Détection sortie de page
      if (e.clientY <= 0 && cart.items.length > 0) {
        setShowModal(true)
      }
    }
    
    document.addEventListener('mouseleave', handleExitIntent)
    return () => document.removeEventListener('mouseleave', handleExitIntent)
  }, [cart])
  
  if (!showModal) return null
  
  return (
    <div className="exit-intent-modal">
      <div className="modal-content">
        <h2>Attendez ! 🎁</h2>
        <p>
          Votre panier de {cart.total}€ vous attend.<br/>
          Profitez de 10% de remise pour finaliser maintenant.
        </p>
        
        <div className="offer-code">
          Code: <strong>KEEPCART10</strong>
        </div>
        
        <div className="modal-actions">
          <button 
            className="complete-order"
            onClick={() => window.location.href = '/checkout'}
          >
            Finaliser ma commande
          </button>
          
          <button 
            className="close-modal"
            onClick={() => setShowModal(false)}
          >
            Non merci
          </button>
        </div>
      </div>
    </div>
  )
}