Le projet
Ce projet à été réalisé pour un site web de vente en ligne de paniers cadeaux. Jusqu’à maintenant, il ne vendait que des paniers cadeaux déjà faits, où les produits étaient présélectionnés. Afin de le rendre cela plus attractif et personnalisable, il nous a été demandé de concevoir un outil donnant la possibilité aux clients de réaliser eux-mêmes leur panier cadeau, un configurateur. Nous avons défini avec le client les différentes caractéristiques du configurateur et nous avons trouvé ces points :
- Le configurateur aura 4 étapes.
- La sélection de la boîte.
- La sélection des produits.
- La sélection d’un éventuel emballage cadeau.
- Et pour finir, la sélection éventuelle d’une carte de veux avec un texte.
- Certaines étapes ne seront accessibles que sous certaines conditions.
- Le configurateur devra afficher le taux de remplissage du panier cadeau en fonction des produits choisis.
- Une fois que le panier cadeau sera ajouté au panier, il devra être possible de le rouvrir afin de l’éditer et de mettre à jour le produit dans le panier.
- Les produits affichés devront être filtrable de la même manière que sur une page de catégorie classique.
- Chaque étape du configurateur correspondra à une catégorie créée spécialement pour elle dans l’administration de Shopware. Le client pourra assigner les produits dynamiquement à ces catégories afin de gagner du temps.
Réalisation
Pour commencer, n’ayant jamais travaillé avec le framework Shopware 6, nous pensions implémenter le configurateur en étendant et réutilisant les templates des catégories. Cependant, cette option s’est vite montrée trop compliqué à implémenté et ne correspondait pas à nos besoins. Après quelques recherches, nous avons trouvé que Shopware 6 proposait une API très complète permettant d’exécuter des requêtes sur toutes les entités du framework. Implémentait le configurateur avec cette API nous a semblé la meilleure solution, car nous ne voulions pas rafraichir la page entre chaque étape de la réalisation du panier cadeaux. Nous avons donc réalisé un configurateur quasiment entièrement côté client en Javascript. Seul le chargement initial de la page, l’ajout au panier et la récupération du panier en cas d’échec du payement, on était implémenté côté serveur. Nous avons donc commencé par implémenter le design du configurateur puis nous avons conçu toute la partie en JS de récupération des produits, des filtres des produits ainsi que la pagination. Pour finir, nous avons implémenté les contraintes définies par le client afin d’empêcher les clients du site web d’acheter par exemple des paniers cadeaux sans aucun produit ou des produits sans boîte pour les contenir. Nous avons aussi ajouté quelques informations comme l’affichage de la description du produit dans un pop-up au clique sur le produit, la saisie du texte de la carte de vœux.
Les challenges
Durant ce projet, nous avons dû surmonter de nombreux challenges.
- Pour commencer, il a fallu optimiser un maximum nos requêtes à l’API de Shopware afin d’écrire le moins de code JS possible et de le rendre plus flexible. Au total seul trois requêtes sont implémentées. Une pour la récupération des produits, une pour récupérer le contexte actuel afin d’afficher notamment la bonne devise et une dernière pour ajouter la configuration au panier.
- Le second challenge a été de faire fonctionner l’ajout au panier. Pour cela il a fallu créer un nouveau type de produit dans Shopware et implémenter toutes les classes nécessaires au calcul du prix ainsi qu’à « l’enrichissement » des produits dans le panier.
- Un autre challenge a été la récupération du panier en cas d’échec du payement. Nous utilisons un fournisseur externe de services de payement afin de gérer la partie payement des commandes. Le principal problème était que shopware n’intègre pas de fonctionnalité de récupération du panier lorsqu’un payement échoue. Le seul moyen est donc que le plugin de notre fournisseur de services de payement implémente cette fonctionnalité afin de renvoyer sur la page du panier pour pouvoir re-exécuter le payement d’une autre manière. Cette récupération des produits du panier fonctionne par type de produits, nous avons donc dû implémenter la nôtre afin de pouvoir récupérer un panier avec des paniers cadeaux après un échec du payement. Ce n’était pas évident, car le plugin du fournisseur de services de payement n’était pas très stable. Après quelques échanges avec les développeurs du plugin, nous avons pu trouver des solutions aux problèmes du plugin et faire fonctionner notre fonctionnalité pour notre nouveau type de produit.
Conclusion
Créer un configurateur avec l’API proposée par Shopware 6 a été une expérience très intéressante. Étant plutôt développeurs backend, nous avons pu enrichir nos compétences en développement front avec Javascript. La flexibilité des requêtes que l’ont peu envoyer à l’API de Shopware est vraiment très pratique et nous a permis de réaliser notre configurateur sur une seule page. De plus, les différents challenges que nous avons eu à relever durant la réalisation de ce projet on était très enrichissant en termes de compétences de développement logiciel.