Site e-Commerce pour IkeMana

IkeMana 

J’ai été contacté pour développer un site e-Commerce pour IkeMana qui disposait déjà d’un site Shopify. Malheureusement le site ne fonctionnait pas très bien, était très peu performant et ne plaisait plus à sa gérante.
 
 J’ai travaillé en collaboration avec une designeuse qui s’est occupée de construire la maquette Figma. J’ai contribué à cette dernière en créant le design du parcours d’inscription utilisateur, l’espace utilisateur et le panier.
 

Le cahier des charges du site web 

Le site web devait permettre aux utilisateurs de découvrir les services et soins de Sonia, ainsi que proposer une partie boutique en ligne permettant aux clients de commander des produits directement via le site.
 
Voici une liste des fonctionnalités attendues: 

• Site web responsive et performant 
• Un parcours permettant l’inscription utilisateur. 
• Un espace membre avec historique des commandes et réservations. 
• Une page permettant de réserver des soins en ligne et de payer immédiatement. 
• Un espace e-Commerce 
• Un panier 
• Un espace administrateur permettant la mise en ligne d’articles de blog, de produits et de créneau de thérapies. 

Les choix techniques 

La gérante ne voulant plus de Shopify et étant à l’aise avec Laravel, j’ai décidé d’utiliser ma stack habituelle, la stack TALL : 

• TailwindCSS 
• AlpineJS 
• Laravel 
• Livewire 
• Et filament 

À cette stack j’ai dû ajouter un package pour me faciliter le travail côté e-Commerce. J’ai donc utilisé le package Open-Source LunarPHP, qui permet de mettre en oeuvre de nombreuses fonctionnalités e-Commerce en headless. Ce package offre également une interface administrateur dédiée au e-Commerce et ready-to-ship, il me fallait donc développer tout le front-end et le connecter au back-end préparé par l’équipe de Lunar.
 
Enfin pour le payment processing j’ai opté pour Mollie et son API qui permettent de propsoer les paiements par carte bancaire et PayPal. 

Les défis de développement 

1. Le parcours utilisateur

J’ai dû pour ce project, mettre en place un système d’inscription/connexion utilisateur. Laravel permet de le mettre en place avec beaucoup d’aisance nativement. 
 
J’ai créé de nombreuses vues pour ce parcours : 

• Page connexion (formulaire classique) 
• Page inscription 
• Page Validation de l’inscription (attente de vérification par mail) 
• Espace membre 
• Mes réservations (Permet d’obtenir son historique de réservations) 
• Mes commandes (Permet d’obtenir son historique de commandes) 
• Mon profil (permet de modifier ses données utilisateur, son adresse, etc…) 

Grâce à la vérification par mail le système est sécurisé. Enfin j’ai dû créer un système Event/Listener qui s’active lorsqu’un compte est créé afin de l’associer à un compte Lunar, ce qui permet d’automatiquement relier un compte client à l’entité qui va interfacer avec le package e-Commerce Lunar.
 

2. La partie e-Commerce

J’ai dû pour cette partie, développer de nombreux systèmes à raccrocher au back-end Lunar. Notamment: 

• Un composant panier et sa page associée 
• Un système de vérification des stocks (Pour permettre l’ajout au panier) 
• Le parcours de paiement (Validation de commande, adresses de facturation, mode de paiement…) 
• Une fonction de calcul des frais de livraison en fonction du poids des articles du panier 
• Connexion à l’API Mollie pour process le paiement de la commande de manière sécurisée 
• Affichage de la réussite ou non de la commande 
• Envoi de mails automatique aux diverses étapes de la commande 

Tout cela a pris énormément de temps pour s’assurer qu’il n’y ait pas de failles techniques et que l’UX soit agréable. J’ai designé l’intégralité de ce process sur Figma. 

3. La partie thérapie 

Il était primordial pour ce projet que la gérante puisse ajouter des séances de thérapies, choisir le nombre de place, la date, le prix, etc…
J’ai créé une entité thérapie administrable via l’interface Filament, j’ai créé divers composants front-end pour afficher ces thérapies et permettre leur réservation.

Voici comment fonctionne le parcours : 

1. L’utilisateur sélectionne un créneau et clique sur réserver

   

2. Un modal lui demande de s’inscrire/se connecter ou continuer en tant qu’invité

   

3. Il entre ses coordonnées et valide

   

4. Il est amené sur le portail de paiement Mollie 
5. Il est redirigé sur une page de remerciement lors de la finalisation du paiement. 
6. La gérante est notifiée de la réservation et le client reçoit automatiquement un mail de confirmation/remerciement.
    

J’ai également créé une commande qui est éxecutée plusieurs fois par jours qui va vérifier s’il y a des séances de thérapies à venir, lorsqu’une séance est dans moins de 48h, la commande va envoyer un mail aux personnes ayant réservé pour leur rappeler leur réservation et leur fournir le lien de la visio si la thérapie a lieu en ligne (Le même lien devient alors visibile dans le profil utilisateur). 

Leçons et difficultés rencontrées 

Personnellement, bien que j’ai pris du plaisir à développer de nombreuses solutions techniques pour ce projet, j’ai trouvé sa complexité très élevée et j’estime que pour une équipe aussi réduite, il serait, à l’avenir plus judicieux d’utiliser Shopify/Prestashop ou WooCommerce pour développer une solution e-Commerce.