La page Shop

Modifié le Mar, 26 Sept., 2023 à 8:42 H

La page Shop présente tous les produits côte à côte, qu'ils soient à louer ou à acheter.

Prérequis : Pour bien démarrer sur Prismic

Que faire si la page Shop ne s'affiche pas ? Il faut forcément avoir une catégorie de produits appelée "Catégorie" et mettre les autres catégories dedans dans Sylius, vérifier cela.

Les cartographies

Cartographie de la page Shop

Modale de choix de taille

Filtres

Formules proposées en classic subcription

TABLE DES MATIÈRES

Les cartographies

Eléments des cartographies

1. Sur-titre

Optionnel, à mettre dans Shop > Main > Hero Top Title
Couleur venant de General > Main > Hero Text color (attention, cette couleur est aussi appliquée au titre principal au-dessus de la main image ou main video de la Homepage)

2. Titre

Shop > Main > Hero Title (max 230 caractères)
Couleur du titre du Shop ajustable dans General > Main > Hero Title color
Couleur de la bannière du shop dans General > Main > Hero Background color
Possibilité de le faire varier automatiquement en fonction de la catégorie de produits sélectionnée en activant Shop > Main > Use taxon title = true (intéressant pour le SEO et pour que les utilisateurs s'y retrouvent)

3. Bandeau image (identique pour la page packs )

General > Main > Hero Banner : format desktop (1440 x 178px), xl (1920 x 178px), tablette et mobile (375 x 196px)

4. Bouton confirmer (identique pour la page packs)

General > Date picker > Confirm button

5. Promesse de dates

Funnel > Shipping > 'Delivered on' : Livré le
Funnel > Shipping > 'To return before' : A retourner le

6. Description du shop

Il est important de savoir qu'il y a 2 modes d'affichage pour le desktop : horizontal et vertical. Le mode horizontal est le plus fréquemment utilisé. En mobile, ces modes n'ont pas d'incidence.
Réglable via General > Config > Page Shop Layout : Full width (horizontal) ou Column (Vertical)
Mode horizontal :

Mode vertical :

La description et l'encart livraison sont optionnels.
En format mobile, ils peuvent être réduits sous un bouton "En savoir plus" en activant Shop > Main > 'is display accordion on mobile page' = true. Choix du nom de l'accordéon dans 'accordion shop title'
Titre dans titleShop
Description dans Shopdescription
Pour respecter les mises à la ligne et autres mises en page de votre description 'raw formatted shop description' à true

7. Encart livraison

composé d'un logo (60 x 60 px) et d'un texte
couleur modifiable en css uniquement
Activé avec 'Has shipping card' = true
Remplissage de shippingimage et shipping description

8. Bouton Filtres

Shop > Filters > Filter

9. Voir uniquement les produits disponibles

Checkbox pas obligatoire.
Par défaut quand on arrive sur le shop, elle est cochée de sorte que seuls les produits disponibles sont affichés.
S'il n'y a aucun produit disponible dans une catégorie donnée, le message venant de Shop > Main > 'no stock available text' est affiché au milieu de la page. (mettre par exemple "Cette catégorie de produits n'est pas disponible à la location dans votre magasin.")
Shop > Main > activer 'show only available checkbox' = true
Shop > Main > 'Show only available text'. Par défaut : 'Voir uniquement les produits disponibles'

10. Bouton vers les packs

Valable uniquement si la page pack est activée (General > Config > 'Pack page available' = true)
Shop > Main > 'shop to packs button'

11. Affichage du prix du produit

Traduction de la mention "jour" ou "mois" dans General > Config > 'Day or month' et 'Day or month short' pour la version courte du prix
Si des réductions sont appliquées en fonction de la durée, possibilité d'afficher :
- le prix sans réduction, même s'il y a une promo -> General > Config > 'discounted price display format' = 'price without discount'
- le prix réduit uniquement -> General > Config > 'discounted price display format' = 'discounted price only'
- l'ancien prix masqué et le prix réduit -> General > Config > 'discounted price display format' = 'discounted price with details'
- l'option "ancien prix et prix réduit" ne s'affiche pas pour les packs, on n'a que le choix entre le prix sans réduction et le prix avec réduction

Modèle flex : Affichage du prix des produits par jour au lieu du prix par mois :General > Config > Display flex price a day = true.
- Ceci permet d'afficher le prix par jour dans :
  - le shop
  - les fiches produit
  - le panier
  - le compte client.
  - les packs

12. Sélecteur de quantité

Si le produit n'a qu'une seule taille OU si un filtre de taille a déjà été appliqué, alors on peut afficher directement le sélecteur de quantité.
Si le produit a plusieurs tailles, on affiche la modale de sélection de taille (cf point 14)
Si on ne veut pas du sélecteur de quantité, juste un bouton + : General > Config > Quantity selector = false. On aura alors le simple bouton + qui ajoute le produit au panier pour les produits n'ayant qu'une taille ou dont la taille est déjà filtrée.
Si on ne veut pas du bouton + ni du sélecteur de taille, car on veut que l'utilisateur rentre obligatoirement dans la fiche produit avant de l'ajouter au panier : General > Config > 'prevent adding to cart without details' = true

13. Format et taille images
4 formats possibles pour les images, celui choisi est utilisé pour les MainHeroProducts de la Homepage également.
Les images sont croppées pour s'adapter au format choisi, ce qui peut donner l'impression d'un effet de zoom.
Conseil : importer à la base (dans Sylius) des images de même format pour tous les produits, afin d'avoir un bel ensemble.
General > Config > Thumbnail ratio :
Square
Portrait
Landscape 4:3
Landscape 16:9

Taille des images dépendant directement du nombre de produits à afficher par ligne sur desktop : General > Config > 'Page shop desktop columns' : 3, 4, 5 ou 6

14. Affichage de la modale de sélection de taille

Pour les produits ayant plusieurs tailles disponibles, le bouton + permet d'accéder à la modale de sélection de taille.
Voir point 19 pour la configuration de cette modale
Si on ne veut pas du bouton + ni du sélecteur de taille, car on veut que l'utilisateur rentre obligatoirement dans la fiche produit avant de l'ajouter au panier : General > Config > 'prevent adding to cart without details' = true

15. Prix produit à acheter

Le prix des produits à acheter vient de Sylius, dans la fiche produit
Il est possible d'afficher les produits à acheter au milieu des produits à louer, s'ils sont mis dans la même catégorie de produits dans Sylius
Possibilité d'afficher un petit texte précisant que le produit est à acheter : General > Config > 'display buyable mention'. Par exemple (à acheter)
Pour les produits de seconde main, un encart seconde main est directement ajouté sur la vignette du produit

16. Victime de son succès

Shop > Main > Sold out
Ce champ n'est valable que pour la page Shop, pas pour la page Single Product, ni Packs, ni Single Pack

17. Boutons "Précédent" et "Suivant"

Soit on a ces boutons et donc des pages de produits, soit le bloc décrit au point 18 pour charger plus de produits. Pour les boutons, choisir "pages" dans Shop > Main > Pagination mode
Shop > Main > Pagination Previous
Shop > Main > Pagination Next

18. Bouton pour charger plus de produits : Voir plus

Soit on a ce bloc "Voir plus", soit les boutons Précédent et Suivant décrits au point 17 de cet article. Pour le "Voir plus", choisir "Load more" dans Shop > Main > Pagination mode
Affichage de 48 produits par défaut et à chaque chargement supplémentaire, possibilité de changer ce nombre via Shop > Main > product_limit_per_load
Libellé du bouton : Shop > Main > Load more button
Début de la phrase (par défaut "vous avez vu") : Shop > Main > you have seen XXX
Fin de la phrase (par défaut "articles sur") : Shop > Main > articles on XXX

19. Modale de choix de taille

Shop > Size Modal > 'Title size modale'. Par exemple "Sélectionner la taille avant d'ajouter au panier :"
Shop > Size Modal > 'product size modal cta add' : bouton pour ajouter au panier
Affichage des tailles possibles : tant que le nombre de tailles est en-dessous d'un certain nombre, les tailles sont affichées dans des cases, au-dessus, elles sont affichées dans une liste déroulante. Ce nombre se définit dans General > Config > Modal size select display limit. Si ce nombre est 5, on affichera les tailles dans des cases uniquement s'il y a maximum 5 tailles, à partir de 6 tailles, on affichera dans une liste déroulante.

20. Panneau de filtres

Site de location, panneau de filtres composé par défaut :
- de catégories
- de tailles
- d'une fourchette de prix
Site de seconde main, panneau de filtres composé par défaut :
- de catégories
- de tailles
- des états des produits

Possibilité d'ajouter plus de filtres différents en ajoutant des valeurs d'attributs aux produits dans Sylius. Comment ajouter un attribut et donner des valeurs aux produits pour les filtrer plus facilement ?
Pour modifier le nom des filtres de taille, voir cet article : Gérer les catégories de produits
De manière automatique, lorsque le nombre de catégories est supérieur à 10, un accordéon regroupe toutes les catégories. en haut du panneau de filtres. Ce comportement n'est pas modifiable.
L'ordre des catégories de produits dépend directement de l'ordre dans Sylius. Voir Gérer les catégories de produits pour changer cet ordre.
Pour voir l'impact des sous-catégories, voir également l'article sur les catégories de produits cité juste au-dessus.
Possibilité de retirer le filtre sur la fourchette de prix :
Demander à ajouter la variable d’environnement front : NO_PRICE_FILTER = True

Sur Prismic > Shop, vous pouvez configurer les différents champs liés au panneau des filtres :
1. filter : Correspond au bouton situé sur la page shop. Valeur par défaut : Filtres
2. close button : Correspond au bouton permettant de fermer le volet des filtres. Valeur par défaut : Fermer
3. categories title : Correspond au titre de l’accordéon qui regroupe toutes les catégories (quand il y en a + de 10). Valeur par défaut : Catégories
4. apply button : correspond au bouton permettant de valider la sélection de filtres. Valeur par défaut : Appliquer
5. reset button : Permet de réinitialiser tous les filtres sélectionnés. Valeur par défaut : Réinitialiser
6. states : Correspond au libellé pour afficher les états. Valeur par défaut : États
7. filter_by : correspond au texte situés au dessus des tailles. Valeur par défaut : Filtrer par :
8. filter_price : Correspond au titre de l’accordéon “fourchette de prix”. Valeur par défaut : Prix :
9. price_fork : correspond au texte situé au dessus de la fourchette de prix. Valeur par défaut : Sélectionnez votre fourchette de prix
10. between : Correspond au texte situé avant le prix le plus bas. Valeur par défaut : Entre
11. and : Correspond au texte après le prix le plus bas et avant le prix le plus haut. Valeur par défaut : et
12. return : Correspond au boutant permettant de revenir en arrière quand une catégorie a été ouverte sur les sous-catégories (catégories enfant). Valeur par défaut : Retour

21. Encart de présentation des formules

Titre : Classic subscription spec > RateCard > Title
Sous-titre : Classic subscription spec > RateCard > subtitle (par défaut : "Votre forfait s’ajuste en fonction de votre sélection.")

22. Articles maximum

Article : Classic subscription spec > RateCard > article singular et article plural
maximum : Classic subscription spec > RateCard > maximum