Maquette de la liste des produits

[The0o]

DoD

Général

Quand l'utilisateur navigue sur la page, il accède à la liste des produits vendus sur la catégorie qu'il a sélectionné. Les produits sont triés par défaut par les plus vendus. L'utilisateur pourra trier et filtrer les habits selon plusieurs critères. Il pourra trier les produits par "Nombre de produit vendu", "Prix ascendant", "Prix descendant" et "Nouveauté". Il est possible de filtrer les produits par la taille, la couleur, le prix du produit, le type de produit et la réduction sur le produit.

Barre de navigation

En haut de la page, une barre de navigation permet de rediriger vers l'accueil du site via le logo Wirefit. L'utilisateur peut accéder depuis la barre de navigation à la page "Homme", "Femme", "Enfant". Il suffit de cliquer sur un de ces trois textes pour être redirigé vers la page correspondante. De plus, lorsque la souris de l'utilisateur est sur une de ces catégories, des sous-catégories s'affichent (comme pantalon, shirt, t-shirt...).

Liste des tâches

• [x] La liste des produits est comforme à la liste des produits présents en base de données.
• [x] Il est possible de trier les produits par "Nombre de produit vendu", "Prix ascendant", "Prix descendant" et "Nouveauté"
• [x] Il est aussi possible de filtrer les produits par la taille, la couleur, le prix du produit, le type de produit et la réduction sur le produit
• [x] Chaque produit possède obligatoirement un prix, une catégorie et un nom. Ces valeurs correspondent à ceux en base de données
• [x] Cliquer sur un produit le redirige vers le produit en question
• [x] La barre de navigation est composé du logo Wirefit, d'un label "Homme", "Femme" et "Enfant".
• [x] Lors d'un clique sur le logo Wirefit, l'utilisateur est redirigé à l'accueil du site
• [x] Cliquer sur une de ces catégories dirige vers la page correspondante
• [ ] Si on passe la souris sur une des catégories, une liste de sous-catégorie apparaît.

[The0o]

La maquette de l'affichage de la liste des produits est fonctionelle et correspond à l'issue. La première image correspond à l'affichage "normal de la page". La deuxième image correspond au moment où un utilisateur passe sa souris sur une des catégories de la barre de navigation.