Back to projects

Librairie Traces

Project introduction

  • Team of 3
  • 6 weeks
  • E-commerce website
Our task was to complete the responsive e-commerce platform of a fictive library. Fully fledge website, it included a landing page, full catalogue, detailed page for each article, cart page and add-to-cart functionality, as well as a three step payment section.

My roles

Conception, Programming and intergration of pages "Item details" and "Cart"

Technologies/tools

MVC structure, PHP(v7.2.9), Blade(v3.31), TypeScript(v2.7.1), Object Oriented Programming, Scss(v4.12.0), Gulp(v4.0.2)

Full code available on GitHub

Accomplishments

  • Programming the dynamic fields of information as well as all responsive styles for the "Item details" page
  • Dynamique changes and styles of the fil d'Ariane for every second and third level page
  • Managing the add-to-cart functionalities (popup window, added visual guide in header, as well as all styles)
  • Dynamically show all details in the cart page, as well as all styles
  • Change cart informations dynamically without refreshing the page (ajax): the subtotal price adjusts itself depending on the number of books chosen, as well as the options selected for shipping.
  • Client side validation (with TypeScript) of the different form fields for the transaction.

Video capture

Screens - Item and Cart pages

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.