Retour aux projets

Librairie Traces

Introduction du projet

  • En équipe
  • 6 sem.
  • Site de e-commerce
Réaliser en équipe de 3 la plateforme responsive de vente en ligne d'une librairie fictive, du catalogue à la confirmation de commande/payement.

Mes rôles

Conception, Programmation et Intégration des pages "Détail d'un article" et "Panier"

Technologies/outils

Structure MVC, PHP(v7.2.9), Blade(v3.31), TypeScript(v2.7.1), Programmation orientée objet, Scss(v4.12.0), Gulp(v4.0.2)

Code complet du projet disponible sur GitHub

Réalisations

  • Programmation pour l'affichage dynamique des informations et intégration responsive des styles de la page fiche d'un livre
  • Changement dynamique et styles du fil d'ariane pour les pages de deuxième et troisième niveau
  • Gestion de l'ajout d'items au panier (fenêtre modale, indices dans l'entête, styles généraux)
  • Affichage dynamique des informations et styles de la page du panier
  • Changement dynamique sans chargement (ajax) des informations dans le panier: ajustement du prix selon les options sélectionnées/le nombre d'items dans le panier
  • Validation côté client (avec TypeScript) des éléments de formulaires des étapes de la transaction

Capture vidéo

Interfaces - Fiche livre et page panier

Capture de la page fiche d’un article, format table. Les étiquettes sous le nom ainsi que le fil d’ariane s’affichent dynamiquement, et le blocs informatifs sous l’item changent selon les informations disponibles dans la base de données. Capture de la page du panier, en version table. Des champs spécifiques permettent à l’utilisateur de changer la quantité/supprimer un livre du panier, ou encore modifier la méthode de shipping, sans quitter la page. En utilisant Ajax, le montant total ainsi que la gratuité du shipping (si appliquable) se modifient immédiatement au changement, sans rechargement de la page. Capture de la page fiche d’un article. À l’ajoût d’un item au panier, une fenêtre modale de confirmation ouvre et affiche les informations de base. Le nombre indicateur à côté de l’icone du panier à l’entête augmente aussi. Capture de la page du panier, en version mobile.