Dans la Page de recherche sont affichés tous les Produits présents dans le catalogue qui répondent aux critères de recherche définis : chaque Produit est présenté sur une Fiche spécifique.
 | | Exemple d'une Boîte Produit sur la Page de Recherche |
La Fiche Produit est composée de différents éléments : outre les éléments purement graphiques, les autres reprennent les informations définies sur la fenêtre E-commerce | Paramètres de produit. Plus précisément, les éléments qui composent une carte sont les suivants :
| • | Couverture : reprend la première image ajoutée pour le Produit dans la section Image de la fenêtre Paramètres de produit ; |
| • | Titre : le nom du Produit ; |
| • | Détails : comprend la Catégorie, les Variantes de Produit, la Disponibilité, le Champ Quantité ; |
| • | Prix : c'est-à-dire les informations relatives au Prix, avec la possibilité d'afficher la TVA et les Remises appliquées ; |
| • | Bouton : pour ajouter un Produit au Panier et procéder avec son achat ; |
| • | Liste des souhaits : pour ajouter le Produit à la Liste des souhaits, c'est-à-dire la liste de produits que le client peut acheter plus tard. |
Bien entendu, si des éléments tels que la Couverture ou les Variantes de Produit ne sont pas précisés, ces informations ne figureront pas dans la boîte.
En ce qui concerne la disponibilité, non seulement l'icône pour la Disponibilité indicative s’afboîte dans la boîte Produit, mais également le chiffre qui en indique la Disponibilité effective.
Grâce aux options disponibles dans la section Paramètres des Fiches vous pouvez donc définir leur composition et leur mise en page. Tout d'abord, il est nécessaire de définir la Disposition des Fiches sur la Page, en choisissant parmi les options suivantes :
|
Hauteur fixe : les Fiches sont disposées dans une grille. Étant donné que toutes les Fiches ont la même hauteur, la grille est régulière et compacte.
|
|
Hauteur variable : les Fiches sont toujours disposées en grille, mais la hauteur de chacune varie en fonction des proportions de l'image utilisée comme Couverture. Les Fiches peuvent donc ne pas occuper complètement les cellules de la grille dans lesquelles elles sont insérées : il peut donc y avoir de l'espace vide entre les Fiches. Cette disposition est particulièrement indiquée lorsqu'une seule Fiche est affichée par ligne, ou lorsque l'affichage est prévu sur une seule ligne divisée en plusieurs colonnes.
|
|
Masonry : dans ce cas également, la hauteur des Fiches varie en fonction des proportions de l'image de Couverture. La différence par rapport à la disposition précédente est que les Fiches ne sont pas rangées dans une grille régulière, mais alignées sur plusieurs lignes et colonnes sans laisser d'espaces pour compenser les dimensions plus petites de certaines d'entre elles.
|
Une fois la Disposition définie, il est nécessaire de décider comment les différents Contenus doivent être disposés à l'intérieur de la Fiche. Dans ce cas, il est possible de choisir parmi :
|
Couverture à gauche, titre et contenus à droite
|
|
Titre et contenus à gauche, couverture à droite
|
|
Couverture en haut, titre et contenus en bas
|
|
Titre et contenus en haut, couverture en bas
|
|
Couverture comme Arrière-Plan
|
Une fois le type d’affichage configuré, vous pouvez intervenir sur les options suivantes :
| ▪ | Fiches par ligne : permet d'indiquer combien de boîtes doivent être placées côte à côte sur une seule ligne. |
| ▪ | Lignes par page : définit le nombre maximum de lignes à afboîter dans la Page de Recherche. |
| ▪ | Hauteur des fiches : permet d'indiquer la valeur en pixels correspondant à la hauteur de chaque boîte produit. En fonction de ce paramètre, les images associées aux produits sont redimensionnées automatiquement. Si les textes de description des produits sont trop longs pour être affichés entièrement, la barre de défilement apparaît automatiquement. Si les textes de description des Produits sont trop longs pour pouvoir être affichés entièrement, la barre de défilement apparaît. |
| ▪ | Marge des Fiches : configure la valeur en pixels de la distance qui doit être conservée entre les boîtes. |
Une fois ces paramètres définis, il est ensuite possible d'utiliser les options de la section Style de la Fiche pour définir les propriétés graphiques des différents éléments qui composent les Fiches des Produits. En fonction de l'Élément sélectionné via le menu approprié, différentes options sont ensuite proposées :
| ▪ | Couleur d'arrière-plan : spécifie la couleur du Arrière-plan de la Fiche et du Bouton. La fenêtre Couleur offre la possibilité d'agir également sur l'opacité et de définir ainsi dans quelle mesure la couleur choisie doit être transparente ou opaque. Pouvoir agir sur l'opacité est particulièrement utile si vous choisissez la disposition "Couverture comme arrière-plan" : dans ce cas, en effet, les contenus seront superposés à l'image de couverture et pourront être rendus plus lisibles en les insérant dans un cadre dont il est possible de déterminer, en effet, la couleur et l'opacité. |
| ▪ | Bordure : spécifie l'épaisseur, la couleur, le facteur de biseau pour les coins et l'ombre des bordures du Arrière-plan de la Fiche et du Bouton. |
| ▪ | Marges : définissent la distance en pixels entre l'image de Couverture ou le Contenu et les bords de la Fiche, ou entre le texte et le bord du Bouton. |
| ▪ | Adapter les dimensions : si elle est active, cette option fait en sorte que l’image de Couverture occupe tout l'espace à disposition à l’intérieur de la boîte, aussi bien en largeur qu’en hauteur. Dans le cas où les proportions ne correspondent pas, l’image est centrée et coupée. Si, en revanche, cette option n'est pas active, l’image de Couverture est adaptée soit à la largeur soit à la hauteur de l'espace à disposition. |
| ▪ | Largeur (%)/Hauteur : définit l'espace occupé par les Contenus par rapport à la Fiche. Dans le cas où les Contenus sont positionnés à gauche ou à droite de la Fiche, il est possible de définir la largeur en pourcentage de la zone qui leur est dédiée. En revanche, si les Contenus sont positionnés en haut ou en bas, ou si la Couverture est utilisée comme arrière-plan, il est possible de définir la hauteur en pixels de la zone qu'ils occupent. |
| ▪ | Alignement : définit si les Contenus doivent être alignés à droite, à gauche ou au centre. |
| ▪ | Visible : fait en sorte que l’élément de la boîte soit visible ou non. Cette option est disponible pour le Titre, la Description, le Bouton et la Liste de souhaits. |
| ▪ | Police : précise le type de caractère, les dimensions et le Style du texte pour le Titre, la Description, les Détails, le Pix et le Bouton. La liste déroulante propose toutes les polices présentes sur l'ordinateur, la commande pour appliquer la Police par défaut (définie par le Style de l’élément Texte de la page dans la fenêtre Style du texte) ; la liste des Polices sécurisées, c'est-à-dire des polices présentes sur tous les dispositifs et qui ne requièrent aucune publication, tous les Google Fonts et les Polices Web ajoutés à l’aide de la fenêtre Ajouter des polices web rappelée par la commande Autres types de caractère. |
| ▪ | Couleur de texte : précise la couleur du texte pour le Titre, la Description, les Détails et le Bouton. En sélectionnant l’élément Détails, la couleur définie pour le Texte est également utilisée pour la ligne située dessous la Description. |
| ▪ | Afficher Catégorie : afficher dans la boîte Produit la Catégorie où, en fonction de ce qui a été défini dans la fenêtre E-commerce | Produits, est inséré le Produit. |
| ▪ | Afficher le champ quantité : afficher dans la boîte Produit un Champ Quantité pour permettre au Client de préciser la quantité du Produit qu’il souhaite ajouter au panier. |
| ▪ | Afficher les Options du Produit : pour afficher les Options du Produit disponibles si vous les avez définies depuis la fenêtre E-commerce | Produits. |
| ▪ | Afficher disponibilité : afficher dans la boîte Produit, en plus de l'icône pour la Disponibilité indicative, également le chiffre qui en spécifie la Disponibilité effective. |
|
Si vous activez l'option Afficher disponibilité et qu'au moins un Produit pour lequel est prévu l'affichage de ce type de disponibilité est présent, pour la Page où figure l'Objet Catalogue des produits l'extension .PHP doit être configurée : vous pouvez le faire à l'aide de l'option Extension du fichier créé présente dans la fenêtre Propriétés de la page | Avancées.
|
| ▪ | Afficher le prix : afficher le prix associé au Produit, avec ou sans TVA, dans la boîte Produit. |
| ▪ | Prix final / Prix rimisé : spécifient les couleurs à utiliser pour le prix final et le prix rimisé. |
| ▪ | Modalité : spécifie si le Bouton correspond à un Texte ou à une Image. Dans le premier cas, vous pouvez utiliser les options disponibles pour définir le style du lien textuel ; dans le deuxième en revanche, vous devez importer le Fichier Image à utiliser avec le champ prévu à cet effet. |
| ▪ | Ajouter le produit sans montrer le Panier : disponible pour l'élément Bouton, avec cette option le Client peut ajouter directement le Produit sans avant afficher le Panier. |
| ▪ | Couleur : pour spécifier la couleur pour icône de coeur utilisée pour ajouter un Produit à la Liste de souhaits. |
| ▪ | Ajouter sans afficher la Liste de souhaits : que disponibles pour l'élément Liste de souhaits, avec cette option le Client peut ajouter le Produit directement à sa liste de souhaits sans l'afficher avant. |
Pour mettre en évidence des produits plutôt que autres, vous pouvez appliquer des boîtes Produits Rubans en définissant :
| ▪ | Type de ruban : définit les paramètres pour les rubans à afboîter dans les boîtes produit dans les cas de "Nouveau produit" ou "Produit avec remise". |
| ▪ | Fichier image : définit l'image qui doit être utilisée comme un ruban. Vous pouvez cliquer sur la flèche dans le champ pour sélectionner une image de votre bibliothèque ou cliquez sur le bouton  (Fichier Local) et importer le fichier graphique (. JPG,. GIF,. PNG.) relatif à l'image à utiliser. |
| ▪ | Alignement : précise la façon dont le ruban doit être aligné dans la boîte produit. |
| ▪ | (%) largeur : définit la largeur du ruban en pourcentage de la taille de la boîte produit. |
Enfin, à l’aide des fonctions du cadre Options , vous pouvez définir :
| ▪ | Activer l'affichage des images en ShowBox : configurez les différentes images de la Fiche avec le lien vers les images agrandies correspondantes. Si activée, au passage de la souris sur l'image présente dans la Fiche, un bouton avec l'icône de la loupe s'affiche en superposition : en cliquant sur ce bouton, les utilisateurs pourront visualiser les images agrandies via la fenêtre ShowBox. Si dans la section Détails de la fenêtre Paramètres de produit | Général une Page Fiche Produit ou un lien a été associé, un autre bouton avec l'icône d'une fiche détaillée sera ajouté au bouton avec la loupe : en cliquant sur ce second bouton, les utilisateurs pourront accéder à la Page Fiche Produit ou à la ressource associée. |
|
