Une boutique en ligne personnalisée

J'ai été chargé du développement de ce site. J'ai donc fait le choix de commencer par développer le front-end, ce qui permet au client d'avoir une vision sur le produit final plus rapidement dans le développement du projet.

J'ai utilisé la bibliothèque Bootstrap pour m'aider dans la conception, notamment pour faciliter la transition au format mobile.

Les produits proposés à la vente par IG Print sont relativement complexes : ils comportent les données standard (nom, description, image...), mais sont également largement configurables. J'ai donc dû imaginer un système permettant la gestion de toutes ces configurations. J'ai choisit pour cela de créer une table correspondant à chaque option des produits (Color, Finishing, Size, Support...), reliés par une relation OneToOne avec le produit.

Cette conception permet alors de visualiser un produit avec toutes ces options depuis la page dédiée.

Pour configurer le produit, j'ai développé une page correspondant à la maquette fournie par le designer de mon entreprise. Pour rendre cette page dynamique, j'ai dû ajouter du Javascript, de manière à récupérer les prix en fonction des options choisies au clic. J'ai donc créé une fonction Ajax, qui fait appel à une route API que j'ai développé, qui permet de récupérer le prix du produit en fonction des identifiants des options qu'elle reçoit. De cette manière, le client a directement une vision sur le prix et ne doit pas attendre la page suivante pour voir le prix que le produit va lui coûter.

Pour alimenter le site en produit et configurer leurs options, il m'as été demandé de créer un back-office. Le back-office comporte quatres sections : les produits, les catégories de produits, les commandes et les statuts de commandes. J'ai commencé par la création du CRUD (Create, Read, Update, Delete) des produits, car cela me semblait être la partie la plus importante.

Pour que l'ajout des produits soit le plus simple possible, j'ai mis en page la configuration des options de la même manière que dans le front, ce qui permet de mieux s'y retrouver. Cette configuration est également implémentée en Ajax, ce qui permet de ne pas perdre de temps à chaque ajout d'option.

Une fois les options définies, il est nécessaire de renseigner un prix pour chacunes d'elles. Pour ce faire, j'ai créé une page "remplir les prix manquants". Cette page récupère toutes les options avec un prix manquant pour le produit et invite l'utilisateur à les remplir. Si un prix n'est pas renseigné, l'option est considérée comme "indisponible".

Une entitée Price représente une combinaison spécifique d'options sur un produit, une variation du produit.

Une fois le back-office développé, nous l'avons présenté au client, qui en fut très content. Cependant, étant donnée le nombre de produits et d'options proposés par IG Print, il aurait été très chronophage de tout rentrer manuellement. En effet, rien que le produit "Flyer" comporte à lui seul plus de 500 combinaisons différentes, une vrai perte de temps si on le fait manuellement.

J'ai proposé, à la suite d'un rendez-vous, de développer un système d'import via un fichier excel. En effet, le client utilisait déjà excel pour le calcul de ses prix et il fut beaucoup plus simple pour lui de renseigner les prix de cette manière.

Pour ce faire, j'ai utilisé la bibliothèque PHPOffice / PhpSpreadsheet, qui permet la lecture / écriture de tableau excel (.xlsx, .csv...) via le langage PHP.

Le code ensuite est plutôt simple : boucler sur chaque ligne du fichier, lire le nom du produit (en première colonne), le créer si il n'existe pas, puis créer toutes les options de la ligne (si elle n'existent pas), puis créer un prix correspondant (entitée Price).

Pour rendre cette fonctionnalitée plus complète, j'ai ajouté la possibilité d'archiver les produits précédents au moment de l'import, de manière à pouvoir plus facilement effectuer une mise à jour complète des produits.

Archiver, oui ! le site proposant un historique des achats pour les clients, il n'est donc pas possible de supprimer les produits, leurs options et prix. Il est donc impossible de supprimer quoi que ce soit sur le site ! Cependant, il est quand même nécessaire d'archiver certains produits ou options, si l'entreprise ne les proposent plus. J'ai donc choisit de proposer l'archivage à la place de la suppression. La majorité des entités du projet ont donc une colonne 'active', qui représente leur état (actif ou archivé).

Le site étant un e-commerce, j'ai dû intégrer une solution de payement. La solution retenue par le client fut Stripe, système de payement leader du marché. Nous avons opté pour la redirection vers la page de payement hébergée par Stripe, pour des questions de simplicité de mise en place et de sécurité. L'utilisateur est ensuite redirigé vers la page payement accepté. Pour sécuriser cette page (elle à pour rôle de valider la commande dans la base de données), j'ai choisit d'utiliser un token (chaine de caractères aléatoires), transmit à Stripe au moment de l'envoie vers la page. Cela permet de bloquer l'accès à la page, car seul notre serveur et celui de Stripe y ont accès. De plus, un token est lié uniquement à une commande et est consommé une fois la commande validée. Il est donc impossible de l'utiliser plusieurs fois.