SScale Themedocs
EN

Animation visuelle lors de l'ajout au panier avec 3 styles - Image, Dot et Line. Feedback satisfaisant et engagement.

Fly to Cart

L'animation Fly to Cart donne un feedback visuel satisfaisant quand le client ajoute un produit au panier. Un élément anime "vole" depuis le bouton d'ajout jusqu'à l'icône du panier dans le header.

Activation

SettingDescriptionDéfaut
Activer Fly to CartActive l'animation d'ajoutOui

Les 3 styles

SettingOptionsDéfaut
Type d'animationImage / Dot / LineDot

Image

L'image du produit en miniature "vole" depuis la position du bouton d'ajout jusqu'à l'icône du panier dans le header.

  • L'image diminue de taille pendant le vol
  • Trajectoire courbe naturelle
  • L'icône du panier rebondit à l'arrivee

Idéal pour : une expérience premium et engageante. Le client voit clairement ce qu'il vient d'ajouter.

Dot

Un point coloré (dot) anime vole depuis le bouton jusqu'àu panier.

  • Animation légère et rapide
  • Moins de ressources que le mode Image
  • Discret mais efficace

Idéal pour : un feedback subtil sans distraire le client. Bon compromis performance/UX.

Line

Une ligne animée trace le chemin depuis le bouton jusqu'àu panier.

  • Effet de tracage fluide
  • Style moderne et minimaliste
  • L'icône du panier rebondit à l'arrivee

Idéal pour : un design épuré et contemporain.

Comportement

  1. Le client clique sur "Ajouter au panier"
  2. L'animation se déclenché immédiatement (durée : ~1.1 seconde)
  3. L'élément anime suit une trajectoire courbe vers l'icône panier
  4. L'icône du panier rebondit brievement
  5. Le compteur du panier se met à jour
  6. Le Cart Drawer s'ouvre (si le setting "Ouvrir à l'ajout" est active)
ℹ️L'animation se joue en parallèle de l'ajout au panier (requête API). Elle ne bloque pas l'expérience. Si le drawer est configure pour s'ouvrir automatiquement, il s'ouvre après l'animation.

Performance

L'animation est optimisée pour la performance :

  • Utilise uniquement transform et opacity (GPU-accelerated)
  • Pas de reflow du DOM
  • L'élément anime est cree dynamiquement et supprimé après l'animation
  • Durée courte (1.1s) pour ne pas freiner le parcours
CritereDetail
Proprietes animéestransform, opacity
Durée1100ms
Impact LighthouseNegligeable
Respect `prefers-reduced-motion`L'animation est désactivée si l'utilisateur a demande des mouvements réduits

Configuration dans le code

Le Fly to Cart est configure via une variable JavaScript globale injectee dans la page :

window.flyToCartConfig = {
  enabled: true,
  type: 'dot',  // 'image', 'dot' ou 'line'
  duration: 1100
};

Le composant <fly-to-cart> est un Web Component qui ecoute les événements d'ajout au panier et déclenché l'animation appropriee.

Cas d'utilisation

Boutique de mode (premium)

  • Type : Image
  • Le client voit le vetement voler vers son panier
  • Expérience memorable et satisfaisante

Boutique high-volume

  • Type : Dot
  • Animation rapide et légère
  • Ne ralentit pas le flux d'achat rapide

Boutique minimaliste

  • Type : Line
  • Design épuré en accord avec l'esthétique
  • Feedback présent mais discret
💡Le type Dot est le meilleur choix par défaut. Il fonctionne bien dans tous les contextes et a le meilleur ratio impact/performance. Reservez le type Image pour les boutiques ou l'aspect visuel premium est prioritaire.
⚠️Sur mobile, l'animation est plus courte car la distance entre le bouton et l'icône panier est réduite. Le type Image peut sembler encombrant sur de petits écrans. Testez sur mobile avant de choisir.

Prochaines étapes

PrécédentUpsellsSuivantTrust Badges