Cahier des charges
I. Présentation du site :
Site Web Diamant : c’est un site de vente en ligne des divers articles
II. Objectif du site :
III. Header:
1. Menu principal :
Horizontalement à gauche on trouve le menu :
Logo : cliquable -> redirige vers le menu home
Home : cliquable -> redirige vers le menu home
About us : non cliquable
Page : non cliquable
Portfolio : non cliquable
Blog : non cliquable
Shop : non cliquable, lorsqu’on survole sur le menu Shop un sous menu
s’affiche :
g.1 : Product : lorsque je clique sur product, redirection vers la page produit.
g.2 : Single product
g.3 : Cart
Product column : non cliquable
2. Menu réseaux sociaux :
Horizontalement sous le menu principal à droite :
Facebook : cliquable ->redirige vers la page Facebook
Twitter : cliquable ->redirige vers la page Twitter
Instagram : cliquable ->redirige vers la page Instagram
YouTube : cliquable ->redirige vers la page YouTube
3. Rechercher :
Se trouve à droite de l’icône YouTube.
Si on clique sur la loupe, un pop-up s’affiche qui contient un champ de recherche
(voir image N°),
Le champ de recherche doit être alphanumérique
Lorsque on tape 3 premiers caractères, s’affiche par défaut des propositions
Le pop-up contient un bouton X pour se fermer
4. Panier :
Se trouve à droite de l’icône loupe.
Par défaut le panier s’affiche avec le compteur 0 (voir image N°)
Si on clique sur le panier vide, un message s’affiche : no product in the cart
On peut ajouter N produits dans le panier
Si on ajoute le même produit N fois, le produit s’affiche dans le pop-up sous la forme de :
o Image cliquable qui fais la redirection vers page détail produit
o Nom produit : non cliquable
o Quantité(N) x prix avec N le nombre de produit ajouté
Si on ajoute le même produit N fois en promotion, le produit s’affiche dans le pop-up sous la
forme de :
o Image cliquable qui fais la redirection vers page détail produit
o Nom produit : non cliquable
o Quantité(N) x nouveau prix avec N le nombre de produit ajouté
Si on ajoute 02 produits différents avec N quantité :
o Ligne 1 : Le produit 1 en promotion avec n quantité x le prix
o Ligne 2 : Le produit 2 n’est pas en promotion avec n quantité x le prix
Si on ajoute un produit le compteur(n) dans le panier s’incrémente par rapport à la quantité
ajoutée
Si on ajoute plus que 05 produits dans le panier un scroll bar s’affiche
Si on clique sur la photo du produit, on se redirige vers la page détail produit
En bas de la liste s’affiche le total : somme des achats : somme = m(produit) x n(quantité )
On trouve sous le total deux (02) boutons : view Cart(cliquable redirection vers la page view
cart) - commande(cliquable redirection vers la page commande )
Dans chaque ligne : en haut à droite on trouve un bouton x pour supprimer le produit
Lorsque je clique sur le bouton x, le produit sera supprimé quelque soit la quantité du produit
Page Product
En cliquant sur l’icône Product, on se redirige vers la page produit
La page est découpée en trois blocs :
Header
Body
Footer
1. Header :
a. Menu principal
b. Bannière :
la couleur du fond en Gris
label Home(lien hypertext) à gauche et redirige vers la page
home
le label home change en vert si on survole le curseur
le label Produit : non cliquable, en Gras et souligné en vert
2. Body
Chaque page affiche 09 produits affiché sous la forme 3/3
Chaque produit est affiché avec son image
Sous chaque produit s’affiche : le nom du produit souligné en vert – le prix –
bouton ajouter au panier
Sous chaque image produit à gauche il existe des étoiles (ces Etoiles
correspondent au classement du produit)
La Catégorie du produit s’affiche à droite sous les étoiles et elle est cliquable et
elle redirige vers la page des produits de même catégorie.
Si un produit est en promotion :Une icône PROMO en vert au-dessus de l’image
s’affiche
Si un produit est en promotion, le prix s’affiche sous la forme : prix ancien barré
et nouveau prix est affiché en vert
Sous un Produit hors stock : le bouton ajouter devient lire la suite (et on ne peut
pas l’ajouter dans le panier)
Plus que 09 produits , un système de pagination apparait au fond de la page :
a. Si on a 10 produits ou plus et si on se pointe sur la première page : le
système de pagination s’affiche sous la forme : page 1 grisée – page 2 et a
coté à droite s’affiche une flèche cliquable , alors que si on est sur la
deuxième le système de pagination s’affiche sous la forme : page 2 grisée
– page 1 cliquable et a coté à gauche s’affiche une flèche cliquable
b. Plus que 03 pages et si on se pointe sur la deuxième page, le système de
pagination s’affiche sous la forme : une flèche dirigé vers la gauche - la
page1 cliquable– page 2 grisée- page3 cliquable à coté –trois points
( …)non cliquable - une flèche dirigée vers la droite cliquable .
En haut dans le bloc body à gauche existe un compteur sous la forme : n(nbre du
1er produit)-m(nbre du dernier produit)/X(nbre total des produits dans le site)
Ex : si on a 20 produits
Dans la Page 1 le compteur s’affiche comme suit : 1-9/20
Dans la Page 2 le compteur s’affiche comme suit : 10-18/20
Dans la Page 3 le compteur s’affiche comme suit : 19-20/20
En haut dans le bloc body à droite existe un filtre sous forme de liste déroulante
et qui contient les 6 choix :
i. Tri par défaut : Tri plus récent au plus ancien
ii. Tri par popularité : si deux produits ont le même taux de vente,
on applique le tri par défaut.
iii. Tri par note moyenne (1-5)(chaque produit a une note et les
produit dans ce tri sont classé par ordre décroissant) : si deux
produits ont la même note moyenne , on applique le tri par
popularité.
iv. Tri plus ancien au plus récent
v. Tri par prix croissant : si deux produits ont le même prix, on
applique le tri par note moyenne.
vi. Tri par prix décroissant : si deux produits ont le même prix, on
applique le tri par note moyenne
