La page Produit seul (Single product) - location et seconde main

Modifié le Mar, 22 Août, 2023 à 9:49 H

La page Single Product présente tous les détails sur un produit.

Prérequis : Pour bien démarrer sur Prismic

Cartographie de la page Single Product

Page produit de location

Page produit de seconde main

Cas particulier d'une page d'un produit à louer et à vendre en seconde main

TABLE DES MATIÈRES

Cartographie de la page Single Product

Eléments de la cartographie

1. Titre du header

General > Main > Baseline

2. Bandeau image (identique pour le shop et les packs)

Affichage du header si Single Product > Layout > Display Hero section = Show
General > Main > Hero Banner : format desktop (1440 x 178px), xl (1920 x 178px), tablette et mobile (375 x 196px)
ou bien possibilité de mettre simplement une couleur de fond : General > Main > Hero Background Color, affichée si la Hero Banner est vide.
Possibilité de mettre un fondu noir par-dessus l'image : General > Main > Hero Banner Overlay = true
Versus sans fondu :

3. Bouton retour

General > Common Product/Pack Texts > Previous_button

4. Taille de l'image par rapport au texte (version desktop seulement)

La photo du produit est toujours à gauche, le texte à droite, ce n'est pas modifiable.
Taille de l'image indiquée en fonction de la largeur prise par le texte de description : Single Product > Layout > Column Layout :
- 2/3 - 1/3 : idéal si les images sont de très bonne qualité et qu'il y a peu de texte car l'image prend les 2/3 de la largeur de l'écran et le texte prend le 1/3 restant.
- 1/2 - 1/2 : répartition identique en largeur d'écran entre l'image et le texte.
- 1/3 - 2/3 : l'image ne prend qu'1/3 de la largeur de l'écran, idéal si l'image est de mauvaise qualité

5. Nom du produit

Vient de la fiche produit définie dans l'OMS Sylius.
Taille, couleur, police définie lors de la repasse css faite par les développeurs Lizee.

6. Prix du produit

Le montant vient de la variante de la fiche produit dans l'OMS Sylius
L'unité vient de General > Config >

7. Montant total sur la durée de location (en date à date uniquement)

Optionnel, à activer via Single Product > Main > display total rental price = true
Toujours affiché sous le prix à la journée
Phrase à compléter, le montant total et le nombre de jours de location s'insèrent entre les bouts de texte :
'Total rental price text' (pas de valeur par défaut) + Montant total + devise + 'total rental price for' (par défaut : pour) + durée + 'total rental price day singular ou plural' (selon la durée de location, par défaut, jour ou jours)

8. Description du produit

Vient de la description du produit dans l'OMS
Respecte la mise en forme de la description : liste à puce, image, lien hypertexte
Dans l'exemple, l'indication des autres coloris de la même robe vient se fait de cette façon :
Indiquer qu'un produit existe dans des couleurs différentes

9. Tailles

General > Common Product/Pack Texts > Sizes. Par défaut : Tailles

10. Produit indisponible aux dates choisies

Pour les produits avec plusieurs tailles ou variantes, cette mention n'apparait qu'après avoir cliqué sur une taille
Mention valable pour les dates sélectionnées en mode date à date, en fonction du stock actuel en flex et classic subscription.
Textes possibles : General > Stock Texts >
- few_products_left : par exemple "Plus que quelques produits disponibles"
- back_soon : par exemple "bientôt de retour"
- in_stock : "en stock"

11. Affichage de la prochaine disponibilité du produit (date à date uniquement)

Pour le flex et la classic subscription, mettre en place une alerte sur le retour des produits en stock, voir ci-dessous.
Single Product > Availability Checker > Availability Checker (DAD only) = Enable
Texte affiché au-dessus du bouton Louer : Single Product > Availability Checker > Availability Checker Text
Lien pour afficher le calendrier de disponibilités : Single Product > Availability Checker > Availability Checker Link
Titre de la modale : Single Product > Availability Checker > Availability Checker Modal Title. Ex : "Vérifiez la disponibilité"
Petit texte d'explication : Single Product > Availability Checker > Availability Checker Modal Description. Ex : "L'article n'est pas disponible lorsque les dates sont grisées."

Mettre en place une alerte sur le retour des produits en stock (flex et classic subscription)

Affiché au-dessus de la description produit, par exemple :
Titre "Ce kit n'est plus en stock" : Single Product > Main > Single product Main stock alert Title
Pour les packs, l'alerte se met au même endroit, dans Single Product, seul le titre change, il vient de Single Product > Main > Single Product Main Stock Alert Pack Title
Phrase "Pour être alerté de son retour, ..." : Single Product > Main > Single product Main Stock alert Text
Placeholder (exemple de texte dans le champ email pour indiquer le format) : Single Product > Main > Single product Main Stock alert input placeholder
Libellé du bouton : Single Product > Main > Single product Main Stock alert Button (par défaut : "M'avertir")
Message d'erreur rouge quand l'adresse email n'est pas valide : Single Product > Main > Single Product Main Stock Alert Already Fail Message
Message vert quand tout est bon après avoir cliqué sur le bouton : Single Product > Main > Single Product Main Stock Alert Validation Message. Par défaut : “Merci pour l’intérêt que vous portez à ce produit. Vous serez notifié par mail dès qu’il sera de nouveau disponible”
Message orange si le client a déjà mis une alerte sur ce produit : Single Product > Main > Single Product Main Stock Alert Fail Message. Par défaut : "Vous avez déjà renseigné ce mail pour cet article".

12. Bouton Louer

Texte dans Single Product > Main > choose_button
Possibilité de choisir sa position : Single Product > Layout > 'Add to cart button'
- entre le prix du produit et la description : Above
- Après la description : Below
- Avant et après la description : Both
Pour les produits ayant des variantes, le bouton est grisé tant que la taille n'est pas choisie. Pour mieux guider le client, possibilité de mettre une info-bulle (version desktop seulement) pour indiquer qu'il faut choisir une taille :
Single Product > Main > Choose button tooltip

13. Bouton essayage

Pour activer l'option essayage sur certains produits, cocher la case 'Essayage activé' dans la variante de la fiche produit concernée dans l'OMS Sylius.
Par défaut, le libellé du bouton contient le montant à payer pour essayer la pièce, indiqué dans le champ 'Prix de l'essayage' de la variante de la fiche produit. Ce montant est compris pour toute la durée de location, il n'est pas proportionnel à la durée.
Possibilité d'afficher du texte avant ce prix d'essayage, dans Single Product > Main > 'try_out_button'. Par exemple : "Option essayage |"
Le fonctionnement de l'option essayage chez Lizee est le suivant : il n'est possible d'essayer un produit que si un autre produit est à louer dans le panier. C'est donc "1 produit loué donne le droit à 1 produit en essayage". S'il y a 2 produits à louer dans le panier, il est possible de mettre en essayage 2 autres produits, qu'ils soient de la même référence que les produits à louer, ou pas.
Une info-bulle peut être ajoutée pour indiquer quand le bouton essayage s'active : Single Product > Main > 'try out tooltip'

14. Onglet d'informations identique sur toutes les fiches produit et packs

General > Common Product/Pack Texts > '+ Add a new element in Informations'
Titre dans Label, Contenu dans Content
Liens hypertextes acceptés
Possibilité d'afficher ce contenu sous forme d'onglets (exemple de la cartographie) ou d'accordéon comme ci-dessous

15. Affichage des autres photos du produit

Soit sous forme de carrousel avec flèches de navigation (idem mobile) : Single Product > Layout > 'Product layout' = Carousel
Soit les unes sous les autres, Single Product > Layout > 'Product layout' = Sticky, comme dans l'aperçu ci-dessous :

16. Liens hypertextes, communs à toutes les fiches produits et packs

Possibilité d'ajouter des liens hypertextes, affichés en petit, identiques sur toutes les fiches produit et pack, pour rassurer le client par exemple.
General > Common Product/Pack Texts > '+ Add a new element in bottom menu links' puis Name et Link.

17. Produits associés

Associations de produits affichées si Single Product > Main > Display associations = Show
Définition des pièces associées à la fiche produit dans Sylius > Fiche produit > Association > Liste de produits.
Titre affiché au-dessus des produits associés : Single Product > Main > Association text
Si plusieurs types d'associations sont définis, ils se retrouvent tous sous ce même titre.

18. Bouton + sur les produits associés

Possibilité de l'afficher ou pas avec Single Product > Main > 'display add to cart button on associated item'

19. Libellé "Seconde main" sous le nom du produit

TakeBack > Product Page > Second Hand label

20. A partir de

TakeBack > Product Page > Price start

21. Prix d'origine

TakeBack > Product Page > Original Price

22. Sélectionner la taille

General > Common Product/Pack Texts > Sizes

23. Etat

TakeBack > Product Page > state label

24. Commentaire spécifique à ce produit de seconde main

TakeBack > Product Page > take back description

25. Onglets Location et Seconde main

Utile uniquement pour les marques proposant la location et la seconde main sur le même site ecommerce
TakeBack > Product Page > Tab label Second Hand pour l'onglet de Seconde main
TakeBack > Product Page > Tab label Rental pour l'onglet de Location