MMI Nouméa
Développement Front (S3)
Développement Front (S3)
  • Séance 1
  • Séance 2
  • Séance 3
  • Séance 4
  • Séance 5
  • Séance 6
  • Séance 7
  • Séance 8
Powered by GitBook
On this page
  • Tunnel de commande "interactif"
  • Organisation des séances
  • Rendu
  • Travail de la séance
  • Quelques ressources
  • Abandon de panier...
  • La réglementation française

Séance 1

Mise en place d'un tunnel de commande interactif.

Tunnel de commande "interactif"

Dans ces 8 séances, nous allons reflechir et concevoir un tunnel de commande, de la page des produits jusqu'à la page de paiement. Nous allons utiliser les technologies suivantes:

  • HTML

  • CSS (avec bootstrap)

  • Javascript (sans jQuery)

Organisation des séances

  • Séance 1 : Présentation du projet et reflexion sur les éléments nécessaires dans les différentes pages (catalogue, panier, paiement). Croquis, et début de l'intégration

  • Séance 2 : Mise en place de la page panier avec des données provenant d'un tableau javascript

  • Séance 3 : Mise en place des boutons permettant de gérer le panier (+, -, supprimer, ...)

  • Séance 4 : Mise en place du catalogue de produits avec ajouter au panier, indication du nombre de produits dans le panier, ...

  • Séance 5 : Finalisation de la page panier et articles/catalogue. Ergonomie, accessibilité, bootstrap, ...

  • Séance 6 : Mise en place de la page de paiement et des données utilisateurs avec validation des données en javascript

  • Séance 7 : Mise en place de la page de confirmation de commande et soumission des données au serveur

  • Séance 8 : Finalisation

Rendu

Le résultat de ce projet sera à rendre à l'issue des séances, et fera l'objet d'une note.

La notaiton prendra en compte les points suivants :

  • Fonctionnalités intégrées

  • Mise en page et ergonomie (UX) de la proposition

  • Respect des critères d'accessibilités

Travail de la séance

En vous basant sur votre expérience en tant que client, sur les articles ci-dessous, proposez des gabarits pour les 3 pages suivantes :

  • Page catalogue permettant l'ajout d'un produit au panier

  • Page panier

  • Page(s) de validation de la commande (données clients, paiement, ...)

    • Vous pouvez imaginer un processus en une seule page avec des étapes ou en plusieurs pages. Dans tous les cas, il est important d'indiquer où se situe le client dans le processus.

Pour chacune des pages identifiez les éléments obligatoires (cf. articles ci-dessous) et les éléments nécessaires pour favoriser l'expérience client.

Quelques ressources

Abandon de panier...

La réglementation française

NextSéance 2

Last updated 2 years ago

LogoPanier d’achat et e-commerce : définition et 5 exemples concrets pour vous inspirerShopify
Logo10 paniers e-commerce dont vous devriez vous inspirer - Codeur BlogCodeur.com
Logo7 conseils pour réduire l'abandon de panier - SendinblueSendinblue
LogoE-commerce : 12 conseils pour réduire les abandons de panierBDM
LogoFaire du commerce en ligne (e-commerce) : règles à respecterservicepublicfr
LogoE-commerce & loi Hamon : comment mettre aux normes son tunnel de commandejournaldunet
LogoQuelles mentions obligatoires pour un site internet (ecommerce) ? | Assistant-juridique.fr