Le tunnel de conversion est composé de 3 pages : 

• La connexion/inscription (sautée si la personne est déjà connectée)
• Le choix du mode de livraison
• Le paiement

Chacune de ces pages a une URL propre.

Toutes les informations pour ces 3 pages sont regroupées dans le document Prismic appelé "Funnel".

Cartographies du funnel

Etape 1 : Connexion / Inscription

Commander en tant qu'invité :

Page d'inscription dans le tunnel de conversion : 

Page "mot de passe oublié" :

Etape 2 : Livraison

Etape 3 : Paiement

Détail des éléments des cartographies

1. Titre et libellés des onglets

• Titre principal dans Funnel > Main > Premier champ 'Title'
• Noms des onglets dans les navigation title des étapes.

2. Bouton retour

• Funnel > Main > return_button

3. Bouton "Continuer en tant qu'invité"

• Commander en tant qu'invité permet de passer commande sans créer de compte. Les infos demandées au client sont les mêmes (email, adresse, téléphone etc), sauf le mot de passe. 
• Certaines marques préfèrent retirer cette option afin que tous les utilisateurs puissent faire le suivi de leurs commandes depuis leur compte.
• Pour afficher cette possibilité de passer commande sans créer de compte : Account > UserConnectedFunnel > is display guest link = true
• Libellé du bouton : Account > UserConnectedFunnel > Guest link

4. Bloc pour se connecter

• Possibilité de faire arriver l'utilisateur directement sur une page s'inscription plutôt que sur une page de connexion : Funnel > Information > First form to show : Register form pour la page d'inscription ; Login form pour la page de connexion
• Titre et sous-titre du bloc dans Account > Login > title_login et subtitle
• Email et mot de passe dans Account > Login > login_email et login_password
• "Mot de passe oublié ?" dans Account > Login > forget password link
• Libellé du bouton pour se connecter dans Account > Login > login_button
• "Pas encore de compte ? S'inscrire" dans Account > Login > register_link
• Si le mot de passe ou l'email est erroné, remplir Account > Login > error login

5. Bloc de réassurance

• Affiché si Account > Protected > 'is displayed on login' = true
• Logo venant de Account > Protected > protected_data_image
• Titre dans Account > Protected > title_data
• Sous-titre dans Account > Protected > text_data

6. Informations personnelles de la commande en tant qu'invité

• Funnel > Information > First Name, Last Name, Email et Phone

7. Adresse pour la commande en tant qu'invité

• General > Search App Texts > label et placeholder

8. Boutons Suivant et Créer un compte

• Funnel > Information > 'Next' et 'create account link'

9. Page de création de compte depuis le tunnel de conversion

• Tout le contenu se gère depuis Account > Register, comme suit.
• 'custom cgu link for in store' permet de mettre un lien spécifique pour chaque magasin qui aurait ses propres conditions générales de location (si ce sont des franchises par exemple)
• Possibilité de ne pas afficher le bloc de texte en bas de la page en mettant 'is display text box' = false
• Remplir ce bloc de texte (visible sous le bloc "Stay cool") via Account > Data text
• Possibilité de retirer le bloc "Stay cool" via Account > Protected > 'is displayed on register'= false
  

10. Mot de passe oublié

• 4 champs à remplir dans Account > ForgetPassword
• L'email envoyé avec le nouveau mot de passe est configurable dans Emails > Password forgotten

11. Rappel dates de location

• Texte modifiable via : Funnel > Shipping > 'Your rental from' pour 'Votre location du' et 'Your rental to' pour 'au'

12. Rappel dates livraisons et renvoi

• Titres modifiables dans Funnel > Shipping > Delivery Title et Return title
• Encadrés gris modifiables via Funnel > Shipping > 'Delivered on' pour 'Livré le' et 'return before' pour 'A retourner avant le'
• Attention, dans les modèles Flex et Classic subscription, seule la date de gauche s'affiche et elle correspond à la date de début d'abonnement, mettre donc 'Date de début d'abonnement' au lieu de 'Date de livraison prévue'

13. Choix du mode de livraison

• L'ensemble des options de livraison ainsi que leur prix se définit dans Sylius et Forest Admin
• Pour les points relais, le bouton 'Choisir' s'ajuste dans Funnel > Shipping > Choose
• Si aucun point de livraison n'est trouvé, le texte dans Funnel > Shipping > 'no parcel shop' s'affiche
• Si la livraison est à 0€, l'interface affiche le contenu de  Funnel > Shipping > 'free' au lieu du prix.
• Si c'est une livraison à domicile qui est choisie, d'autres boutons apparaissent :
  
  • 'Changer mon adresse' :  Funnel > Shipping > 'Change my address'
  • 'Suivant' :  Funnel > Shipping > 'Next' 

13. Recherche par code postal dans les modes de livraison

• Pour trouver un point relais proche d'une autre adresse que celle du compte client
• General > Config > display search delivery point on shipping = true
• Côté client, prise en compte du code postal en fonction du mode de livraison. Si le client est dans la recherche de point relais, et qu'il se rend dans la livraison en magasin, il devra à nouveau changer le code postal de référence.

14. Textes explicatifs sur la location ou la seconde main (le retour, la garantie, etc.)

• Autant d'éléments que l'on veut avec titre + texte
• Pour la location: À ajouter dans Funnel > Shipping > Return
• Pour la seconde main: À ajouter dans Funnel > Shipping > Return for second hand

15. Champ pour ajouter un code promo

• Bloc optionnel, à activer avec Funnel > Payment > Disable coupon = false
  
• Titre du bloc : Coupon title
• Exemple écrit dans la case (placeholder) : Coupon label
• Libellé du bouton de validation : coupon CTA
• Quand l'application du code promo fonctionne : le texte dans 'coupon applied' s'affiche, suivi du nom du code utilisé :
• Message d'erreur dans coupon error. Exemple de rendu visuel :

16. Partie carte bancaire pour paiement

• à remplir même quand le code promo appliqué retire 100% du montant à payer (car une empreinte bancaire de 300€ est alors prise).
• Titre venant de title form, tout en haut du document Funnel > Payment.
• Libellé pour le numéro de carte dans General > Card Form texts > Card number
• Libellé pour la date d'expiration dans General > Card Form texts > Expiry date
• Libellé pour le code CVC dans General > Card Form texts > CVC code
• Les placeholders (textes d'exemples affichés dans les champs et qui s'enlèvent dès qu'on écrit) ne sont pas configurables.

17. Validation des CGL, activation droits de rétractation et paiement

• Case pour accepter les conditions générales de location : Funnel > Payment > cgu
• Affichage de la case de renoncement au droit de rétractation si Funnel > Payment > Enable Retractation agreement = true
• Durée de rétractation en jours définie dans 'Retractation duration'. En fonction de cette durée et des dates de location choisies, la case apparait ou non à l'étape du paiement. (elle n'apparait que si la date de début de loc est comprise entre aujourd'hui et aujourd'hui + durée de rétractation)
• LIbellé de la case de rétractation dans 'Retractation agreement'
• Libellé du bouton de paiement tout en haut de la page dans Pay
• Possibilité d'ajouter des informations dans un cadre de données en dessous du bouton de paiement, en les mettant dans 'data_text'

18. Encadrés de réassurance

• Possibilité d'en mettre autant que voulu (mais affichage non centré par défaut, voir lors de la repasse css si nombre impair)
• A ajouter dans Funnel > Payment > '+Add a new element in commitment' avec une image (60 x 60 px), un titre et un texte à chaque fois. (format d'icone recommandé : carré)