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 |
À l'aide des options de cette section, vous pouvez définir certains paramètres graphiques relatifs aux boîtes présentant les produits figurant dans la liste.
La boîte d’un Produit est composée des éléments suivants, tous configurés en fonction de ce qui a été défini dans E-commerce| FenêtreParamètres de produit :
| • | Couverture : reprend la première image ajoutée pour le Produit dans la section Image de la fenêtre Paramètres de produit ; |
| • | Détails : comprend la Catégorie, les Variantes de Produit, la Disponibilité, le Prix, l’affichage de la TVA, le Champ Quantité ; |
| • | Bouton : présente le lien pour ajouter le Produit dans le panier. |
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é, en travaillant avec l’édition Pro, 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.
Tout d’abord, avec les options disponibles dans la section Paramètres des Fiches, vous devez définir leur composition et leur mise en page, en choisissant un type d’affichage, parmi les options suivantes :
|
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
|
|
Indépendamment de la typologie choisie, sur le nom et éventuellement sur l'image présents dans les boîtes produit est automatiquement activé le lien placé à l'aide des options disponibles dans lasection Détails de la fenêtre Paramètres de produit.
|
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. |
De plus, vous pouvez définir le Style de la boîte en intervenant sur les options suivantes :
| ▪ | Dimension de la couverture (%) : configure la largeur de l’image de Couverture par rapport aux contenus, si elle est placée à droite ou à gauche, ou par rapport à la hauteur de la boîte, si elle est placée en haut, au-dessus ou en dessous du Nom du Produit. |
| ▪ | Marge de la couverture / Marges des contenus : configurent respectivement la valeur en pixel de la distance entre l’image de Couverture ou le contenu (Nom et Description) et les bords de la boîte. |
Une fois ces paramètres définis, vous pouvez ensuite configurer les propriétés graphiques des différents éléments qui composent les boîtes des Produits. Une fois que vous avez sélectionné l'Élément sur lequel vous souhaitez intervenir, les options suivantes vous sont proposées :
| ▪ | Visible : fait en sorte que l’élément de la boîte soit visible ou non. Cette option n’est pas disponible pour le Arrière-plan ni la Couverture. En sélectionnant l’élément Détails, en revanche, vous pouvez spécifier si vous souhaitez afboîter ou non les informations telles que la Catégorie, la Disponibilité ou le Prix. |
| ▪ | Police : précise le type de caractère, les dimensions et le Style du texte pour le Prénom du Produit, la Description, les Détails 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 Prénom du Produit, 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. |
| ▪ | Couleur d'arrière-plan : précise la couleur du Arrière-plan de la boîte et du Bouton. |
| ▪ | Epaisseur : précise l’épaisseur des bords du Arrière-plan de la boîte et du Bouton. |
| ▪ | Couleur : précise la couleur des bords du Arrière-plan de la boîte et du Bouton. |
| ▪ | Coins arrondis : définit le facteur d'arrondissement des angles du Arrière-plan de la boîte et du Bouton. |
| ▪ | Ombre : applique une ombre au Arrière-plan de la boîte, en définissant sa couleur, sa position, sa diffusion et ses dimensions. |
| ▪ | 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. |
| ▪ | Afficher Catégorie : afboîte 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é : afboîte 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 disponibilité : afboîte 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 : afboîte le prix associé au Produit, avec ou sans TVA, dans la boîte Produit. |
| ▪ | 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. |
| ▪ | Marges : configure la valeur en pixels de la marge entre le texte et le bord du Bouton. |
Enfin, uniquement dans l'édition Pro, 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  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 :
| ▪ | Ajouter le produit sans montrer le Panier : fait en sorte que, en cliquant sur le bouton d'achat, le Client ajoute directement le Produit dans sa commande sans être automatiquement redirigé vers le Panier. |
| ▪ | Activer l'affichage des images en ShowBox : active sur les différentes images de la boîte Produit le lien avec les images correspondantes agrandies. Ces agrandissements s’afboîtent avec la Boîte d'affichage. Ce lien est remplacé par le lien éventuellement configuré à l’aide de l’option prévue à cet effet et présente dans la section Détails de la fenêtre Paramètres de produit | Général. |
|
