Apparence (Smart Content web uniquement)
Flèches (pour les Smart Contents site web uniquement)
Bouton Ajouter au panier (uniquement pour le Smart Content site web)
Remarque : La plupart de ces paramètres graphiques ne s'appliquent qu'au contenu intelligent « Web ». Pour le Smart Content « Email », vous pouvez créer votre Smart Content de manière visuelle.
Général
Activer/Désactiver l'affichage
L'affichage On/Off active et désactive la visibilité du Smart Content. Voici les deux paramétrages possibles :
| Paramètre Graphique |
Explication |
|---|---|
|
Le Smart Content est masqué sur votre site web. Il ne sera pas affiché et occupera 0 pixel en largeur et en hauteur. |
|
Le Smart Content est activé et s'affichera sur votre site web, partout où la balise div du Smart Content est placée. Tous les paramètres que vous avez configurés seront appliqués. |
Si vous avez configuré un catalogue multilingue, un bouton gris intitulé "Par langue/emplacement" s'affiche. Il vous permet de configurer un paramètre permettant d'afficher/de masquer spécifiquement chaque version de votre site web international. Par exemple, si vous avez configuré un emplacement « Belgique » et trois langues (FR, EN, DE) pour votre site web et que vous ne souhaitez afficher le Smart Content que pour les sites web des langues FR et DE (et non pour le site EN), votre paramètre devrait ressembler à ceci :
Pour utiliser ce paramètre, le paramètre global "Activer/Désactiver l'affichage" doit être défini sur "Activé".
ID Smart Content
L'ID du Smart Content utilisé par Recommendations pour trouver et placer le Smart Content sur une page web ou dans un e-mail. Cet ID peut contenir uniquement des lettres, des nombres ou des caractères de soulignement (_).
Avertissement :
Si vous avez déjà configuré un Smart Content sur votre site Web et que vous modifiez son ID, ce dernier n'apparaîtra plus, car l'élément <div> de placement aura toujours l'ancien ID du Smart Content.
Nom Smart Content
Le nom du Smart Content est utilisé dans le tableau de bord de Recommendations pour identifier le Smart Content. Contrairement à l'ID Smart Content, le nom du Smart Content peut contenir n'importe quel caractère, sans restrictions.
Apparence (Smart Content web uniquement)
Format du Smart Content
Le Type définit le style graphique global du Smart Content et son orientation. Les types de Smart Content disponibles sont décrits dans la table suivante.
| Nom du type | Description |
|---|---|
| Horizontal Moderne |
Il s'agit du format de Smart Content le plus fréquemment utilisé ; il affiche les produits sur une ligne. Il s'adapte parfaitement à tout type de page (accueil, catégories, panier, produits) :
Si la largeur est définie sur -1 (automatique), le Smart Content va s'adapter automatiquement à l'espace disponible horizontalement. Si la hauteur est définie sur -1, le Smart Content va adapter automatiquement sa hauteur afin de s'assurer que tout le contenu est visible. |
| Horizontal |
Il s'agit d'un Smart Content horizontal, similaire au type Horizontal Moderne. Sa particularité est qu'il utilise d'anciennes technologies web (pas de CSS3) ce qui le rend compatible avec tous les navigateurs à partir d'IE7. Les inconvénients liés à l'utilisation de ce Smart Content est que certains aspects et effets graphiques (par exemple, l'effet de glissement) seront moins fluides. Si vous êtes dans l'obligation de prendre en charge d'anciennes technologies web, nous vous recommandons d'utiliser ce type. Si ce n'est pas le cas, nous vous recommandons d'utiliser le type de Smart Content Horizontal Moderne. |
| Vertical |
Ce type vous permettra d'afficher les produits en colonne et non sur une ligne. Ce type de Smart Content est principalement utilisé dans les barres de navigation latérales. Le glissement des produits sera effectué verticalement. Si aucun produit ne s'affiche dans l'aperçu lorsque vous configurez le type vertical, c'est probablement parce que vous devez augmenter la hauteur du Smart Content ou réduire la taille des images.
|
| Grille |
Ce type de Smart Content affiche une table des produits comprenant plusieurs lignes et colonnes. Cette table est responsive et s'adapte à la taille de votre écran. Ce Smart Content n'est pas associé à un comportement de glissement.
|
Largeur
La largeur du Smart Content en pixels. Elle peut être définie sur toute valeur non négative ou sur -1, ce qui signifie que la largeur du Smart Content s'adapte à l'espace disponible.
Remarque : Si vous souhaitez définir une valeur relative spécifique, par exemple : "75 % de la largeur disponible", vous devrez insérer votre balise div Smart Content dans une balise div parent pour laquelle vous définirez la largeur sur 75 % :
<div style="width: 75%;">
<div class="thRecommendations" data-widgetid="my-widget"></div>
</div>
Hauteur
La hauteur du Smart Content en pixels. Elle peut être définie sur n'importe quelle valeur non négative ou sur -1, ce qui signifie que le Smart Content s'affiche automatiquement autour de son contenu.
Apparence de la zone de titre
La forme graphique de la zone rectangulaire contenant le titre du Smart Content.
| Valeur de paramètre | Détails |
|---|---|
| Standard |
La zone de texte s'étend sur toute la largeur du Smart Content. En association avec des modifications de la catégorie Zone de titre, vous pouvez obtenir un titre qui ressemble à ceci :
Pour obtenir cette conception, nous avons défini les paramètres suivants pour la Zone de titre : taille de bordure=2, couleur de fond=000000, couleur de police=FFFFFF, alignement=centré |
| Style tabulation |
La zone de texte ne va pas s'étendre sur tout le Smart Content, elle s'adaptera à la largeur du texte qu'elle comprend. Avec l'apparence de style tabulation et les mêmes paramètres définis pour la zone de titre, voici ce à quoi le Smart Content ressemblerait :
|
Nombre de produits
Le nombre maximum de produits affichés dans le Smart Content. Si le "Nombre de produits" configuré dépasse le nombre de produits pouvant être affichés dans le Smart Content (en raison de sa largeur), des flèches peuvent être utilisés pour défiler parmi les produits disponibles.
Généralement, le nombre de produits sera exactement égal au paramètre "Nombre de produits". Cependant, en fonction de la configuration de l'algorithme/des filtres, il est possible que le nombre de produits réellement affichés soit inférieur à ce paramètre. Cela peut être le cas par exemple si les filtres configurés sont trop restrictifs.
Par exemple, s'il n'y a que 3 produits dans le catalogue dont le prix est inférieur à 10, et que le filtre utilisé est "Le prix des produits dans le Smart Content doit être inférieur à 10", le nombre de produits affiché dans le Smart Content sera de 3 (maximum), même si le "Nombre de produits" configuré est 10.
Couleur des bordures
La couleur de la bordure qui entoure le Smart Content. La valeur peut être n'importe quelle couleur au format XXXXXX, par exemple : 000000 ou FFBA0F ou le mot transparent (pour une bordure transparente). Voir le paramètre "Apparence de la zone de titre" ci-dessus pour un exemple graphique.
Taille de la bordure
La taille de la bordure entourant le Smart Content, définie en pixels. Voir le paramètre "Apparence de la zone de titre" ci-dessus pour un exemple graphique, avec une taille de bordure de 2 px.
Taille border-radius
La taille border-radius correspond à la propriété CSS border-radius. Cette dernière permet de définir des coins arrondis pour les quatre coins du Smart Content.
Le même Smart Content avec l'apparence standard utilisée dans "l'Apparence de la zone de titre" avec une "Taille border-radius" de 10 ressemblerait à ceci (notez les coins arrondis) :
Zone de titre
Texte
Le texte du titre à afficher en haut du Smart Content. Si ce texte est vide, la zone de texte ne s'affichera pas.
Pour un site web disposant d'un catalogue multilingue, un bouton "Traductions" s'affiche :
Lorsque vous cliquez sur le bouton, une fenêtre lightbox s'affiche en chevauchement pour vous permettre de définir les traductions dans toutes les langues configurées :
Couleur de fond
La couleur de fond de la zone de titre au format hexadécimal XXXXXX (par exemple : 000000 pour noir, FFFFFF pour blanc), ou la valeur "transparent" pour un fond transparent. Voir paramètre "Apparence Zone de titre" pour un exemple avec un fond de couleur noire et d'autres variantes de bordure et de type de Smart Content.
Famille de polices
Ce paramètre représente les polices utilisées pour la zone de titre. Lorsque vous cliquez sur le champ, une liste déroulante affiche les polices disponibles.
Pour vous assurer que la police sera rendue correctement, nous vous recommandons de sélectionner l'une des polices de cette liste déroulante.
Si vous souhaitez utiliser une police personnalisée (définie dans le champ HTML personnalisé), vous pouvez saisir n'importe quelle combinaison de noms de polices séparés par une virgule (ce champ Famille de polices contrôle la propriété CSS font-family). Les noms de police qui contiennent des espaces doivent être placés entre guillemets (par ex. "Times New Roman", Georgia, Serif).
Les polices sont généralement un sujet complexe. L'affichage correct des polices dépend en effet du navigateur et du système d'exploitation de vos visiteurs. Il existe de nombreux documents à ce sujet sur le web et vous trouverez de nombreuses polices "web safe" que à utiliser comme valeurs pour ce paramètre. En voici une liste restreinte.
Pour ajouter vos propres polices, veuillez consulter le paramètre "HTML personnalisé".
Taille de la police
La taille de la police, en points. Par exemple : 14 ou 20.
Couleur de la police
La couleur de la police au format hexadécimal (XXXXXX). Une police noire serait ainsi associée à la valeur 000000. Si vous avez l'impression que votre texte ne s'affiche pas, veuillez vous assurer que la couleur de la police de votre texte n'est pas identique à la couleur de fond.
Poids de police
Il s'agit du poids de la police. Ce paramètre utilise la propriété CSS font-weight. Vous pouvez utiliser les valeurs gras, normal, léger ou des nombres comme 100, 200, 300, etc.
Espacement des caractères
Ce paramètre définit l'espacement entre les caractères dans le texte du titre. Il utilise la propriété CSS letter-spacing. Les valeurs sont définies en pixels (valeurs positives ou négatives). Par exemple : -1, 3, 0.1
Remplissage du texte
Ce paramètre définit l'espace (en pixels) entre le texte du titre et le bord de la zone de titre.
Le Smart Content suivant dispose d'un Remplissage du texte égal à 6 :
Voici le même Smart Content avec un remplissage du texte égal à 24 :
Alignement
Ce paramètre définit l'alignement du texte du titre : Gauche, Centré ou Droite. Ce paramètre s'applique uniquement si le type du Smart Content est défini sur "Standard". Si le type sélectionné est "Tabulation", ce paramètre n'a aucun effet.
Lien titre
Si vous souhaitez que le titre soit un lien cliquable, vous pouvez insérer une URL dans ce paramètre. Le lien sera identique pour tous les visiteurs, chaque fois que le Smart Content est affiché.
Ce paramètre est principalement utilisé dans le cadre de la configuration d'un Smart Content avec un filtre spécifique à la catégorie. Si vous définissez un titre comme Nos produits populaires dans la catégorie X, vous pouvez ajouter un lien vers la catégorie X dans le lien du titre.
Image produit
Largeur de l'image et proportion hauteur de l'image (pour site web uniquement)
La taille des images des produits dans le Smart Content (en pixels) est définie ici. La largeur de l'image est obligatoire, la hauteur est facultative. Le redimensionnement de l'image conserve toujours le rapport hauteur/largeur.
Les dimensions finales de l'image dépendent des dimensions de l'image originale.
- Si seule la largeur est indiquée et que la hauteur est laissée vide, l'image est redimensionnée proportionnellement à la largeur souhaitée.
- Si la largeur et la hauteur sont toutes deux indiquées, l'image est redimensionnée proportionnellement à la dimension la plus longue de l'image d'origine.
Par exemple, si « 100 » est saisi pour les deux dimensions dans les paramètres et que l'image d'origine était de 400 de large par 260 de haut, l'image redimensionnée sera de 100 de large x 65 de haut.
| Largeur Image Définie
|
Hauteur Définie | Largeur réelle de l'image | Hauteur réelle de l'image | Capture d'écran du résultat |
|---|---|---|---|---|
| 100px | 90px | 75px | 100px | L'image est redimensionnée à une hauteur de 90 pixels. La largeur est redimensionnée et centrée en respectant les proportions. |
| 100px | 100px | 15 px | 120px | L'image est redimensionnée à une largeur de 100 pixels et la hauteur est redimensionnée et centrée en respectant le rapport d'aspect. |
| 100px | aucune valeur | 150px | 200px | Bien que la largeur soit inférieure à la hauteur, l'image est redimensionnée en fonction de la largeur entrée. Il en résulte une image de 100 pixels de large. La hauteur suit le redimensionnement, en respectant les proportions. |
Si le paramètre "Proportion Hauteur de l'image" est défini sur la valeur "Relative" avec une largeur de 100 px, l'image a toujours une largeur de 100 px et les proportions (et de ce fait la hauteur) sont conservées. Ce paramètre ne garantit pas le placement d'autres blocs graphiques. Les images seront cependant plus grandes. Vous avez la possibilité d'effectuer des ajustements dans le paramètre "CSS personnalisé".
Bordure de l'image, couleur et taille
Ces paramètres permettent d'ajouter une bordure autour des images produit dans les Smart Contents. Le paramètre "Taille de la bordure" définit la taille de la bordure en pixels et le paramètre "Couleur de la bordure" définit sa couleur au format hexadécimal (XXXXXX). Si vous définissez une taille de bordure de 5 px et une couleur de bordure de 000000 (noir), voici le résultat que vous obtiendriez pour les deux images ::
Zoom image
Si ce paramètre est défini sur Activé, les images produit seront zoomées (agrandies) lorsque vous passez le curseur de la souris dessus.
Flèches (pour les Smart Contents site web uniquement)
Type de flèche
Les différents types de flèches. Toutes les flèches s'adaptent automatiquement au "type" général du Smart Content : haut/bas pour les Smart Contents verticaux, gauche/droite pour les Smart Content horizontaux/horizontaux modernes.
Vous pouvez également utiliser une image de flèche personnalisée si vous définissez le champ CSS personnalisé de sorte à remplacer les images existantes fournies par Recommendations. Voici un exemple (vous devez remplacer les URL pour que cela fonctionne) :
.arrow-img.arrow-next {background: url('https://www.my-shop1.com/arrow_right.png') 22px 0 no-repeat;}
.arrow-img.arrow-prev {background: url('https://www.my-shop1.com/arrow_left.png') no-repeat;}Taille de la flèche
La taille des flèches fournies par Recommendations :
- Variations grandes flèches 40 x 40 px
- Variations petites flèches 20 x 20 px
Ce sont les tailles réelles des images qui s'afficheront. Vous pouvez bien sûr modifier la taille de ces images avec un CSS personnalisé, si vous souhaitez ajuster la largeur/hauteur des flèches au pixel près.
Opacité initiale de la flèche
L'Opacité initiale des flèches correspond à une valeur décimale comprise entre 0 et 1, qui définit le niveau de transparence. En voici un exemple avec le paramètre défini sur 0,4 et 1 :
Opacité de la flèche au survol
Identique à "l'opacité initiale de la flèche", mais définit la valeur du paramètre défini dynamiquement lorsque vous passez le curseur de la souris sur la flèche.
Type de fond de la flèche
Il s'agit du format de la zone/du fond affiché derrière le symbole Flèche.
| Valeur | Description | Illustration |
|---|---|---|
| Aucun | Aucun fond ne s'affichera |
|
| Arrondi | Un cercle s'affichera autour de la flèche |
|
| Carré | Un carré s'affichera autour de la flèche |
|
Couleur de fond de la flèche
La couleur de fond affichée derrière la flèche, au format hexadécimal (par exemple 000000 pour noir, FFFFFF pour blanc). Voici un exemple de configuration pour ce paramètre, ainsi que pour tous les paramètres associés au fond :
Et voici le résultat de cette configuration. La capture d'écran de gauche illustre l'état initial, la capture de droite illustre l'état au moment du survol.
Couleur de la bordure du fond de la flèche
Ce paramètre définit la couleur de fond affichée derrière la flèche (au format hexadécimal XXXXXX). Si le type de fond de la flèche est défini sur "Aucun", ce paramètre n'a aucun effet.
Dans l'exemple précédent, ce paramètre était défini sur 000000.
Remplissage fond de la flèche
Ce paramètre définit l'espace (en pixels) entre la flèche elle-même et la bordure de fond. Dans l'exemple précédent, sa valeur est définie sur 10.
Opacité initiale du fond de la flèche
Ce paramètre est une valeur comprise entre 0 et 1 (par exemple, "0,4" comme dans l'exemple précédent) qui définit le niveau de transparence du fond. Comme vous pouvez le voir dans l'exemple, le fond rose (ffc0c0) d'origine est légèrement plus pâle que sa version "survolée".
Opacité du fond de la flèche au survol
Ce paramètre est une valeur comprise entre 0 et 1, qui définit le niveau de transparence de l'arrière-plan lors du survol de la flèche avec le curseur.
Inverser les couleurs
Le paramètre Inverser les couleurs permet d'inverser toutes les couleurs hexadécimales définies pour les flèches et le fond. Étant donné que les images des flèches sont foncées par défaut, ce paramètre vous permet d'obtenir très facilement des flèches claires sur un fond foncé. L'exemple précédent (avec la couleur de fond rose) ressemblera à ceci si l'option "Inverser les couleurs" est activée :
Curseur automatique
Si le paramètre Curseur automatique est activé, le Smart Content horizontal, moderne horizontal et vertical défile automatiquement, en utilisant les paramètres du minuteur et de l'intervalle.
S'il est défini sur Désactivé, ce paramètre, ainsi que le Minuteur de début du curseur automatique et l'intervalle de répétition du curseur automatique n'ont aucun effet. Si le Nombre de produits est inférieur ou égal au nombre de produits que peut réellement contenir le Smart Content en fonction de sa largeur, le Curseur automatique n'a aucun effet, même s'il est défini sur Activé.
Minuteur de début Curseur automatique
Ce paramètre définit le délai (en nombre de secondes) après lequel le curseur entame le premier glissement.
Intervalle de répétition du curseur automatique
Ce paramètre définit le délai (en nombre de secondes) pendant lequel le curseur attend entre chaque glissement après le premier.
Chevauchement Bouton Flèche
Ce paramètre indique comment les flèches sont intégrées dans le Smart Content. Si ce paramètre est activé, les produits vont occuper la longueur totale du Smart Content et les boutons vont les chevaucher, comme dans cet exemple :
S'il est désactivé, les flèches occuperont 20 px ou 40 px défini de chaque côté des produits (en fonction du type de flèche). Le résultat sera le suivant pour le même exemple de Smart Content :
La différence se remarque particulièrement à gauche du Smart Content. Vous pouvez constater que la flèche dispose de son propre espace horizontal, avant l'affichage du premier produit.
Texte Description
Police Description
Ce paramètre désigne la police utilisée dans les descriptions de produit. Il s'agit du texte qui s'affiche sous les images produits. Veuillez consulter le paramètre "Famille de police" ci-dessus pour obtenir de plus amples informations sur les polices autorisées.
| Police : Georgia |
|---|
|
| Police : Helvetica |
|---|
|
Taille de police - Description
La taille de la police utilisée dans le texte qui s'affiche sous l'image du produit, définie en points. Par exemple : 14 ou 20.
Couleur de police - Description
La couleur de la police utilisée dans le texte qui s'affiche en dessous de l'image du produit, exprimée au format hexadécimal (XXXXXX). Une police noire serait ainsi associée à la valeur 000000.
Alignement - Description
Ce paramètre définit l'alignement du bloc de texte qui s'affiche sous l'image du produit : Gauche, Centré ou Droite. Ce bloc comprend le titre du produit, sa description, son prix et d'autres paramètres activés à l'aide du paramètre "Champs affichés".
Souligner le titre au survol
S'il est "Activé", ce paramètre permet de souligner le titre du produit (sous l'image du produit) lorsque l'on passe le curseur de la souris dessus. S'il est "Désactivé", ce paramètre n'a aucun effet. Ce paramètre est "Activé" par défaut.
Afficher au survol
S'il est "Désactivé" (par défaut), le bloc de texte (qui contient le titre, la description, le prix et d'autres paramètres activés à l'aide du paramètre "Champs affichés") s'affichera sous l'image du produit.
S'il est "Activé", ce bloc de texte s'affichera au-dessus de l'image du produit, tout en masquant l'image du produit avec un chevauchement noir semi-transparent.
Voici un exemple :
| Affichage au survol défini sur DÉSACTIVÉ | Affichage au survol défini sur ACTIVÉ | Affichage au survol défini sur ACTIVÉ avec CSS personnalisé |
|---|---|---|
|
|
|
L'opacité de la boîte qui s'affiche en chevauchement, ainsi que les autres paramètres peuvent être affinés en utilisant le paramètre "CSS personnalisé". La troisième colonne affiche un exemple de ce que vous pouvez faire avec un "CSS personnalisé" et un "JS personnalisé" (pour lancer une bande-annonce de film directement à partir d'un bouton personnalisé).
Prix
Police - Prix
Ce paramètre définit la police utilisée pour le "Prix" et "Prix de vente", affichés sous l'image du produit. Veuillez consulter les paramètres "Police Description" et "Famille de police" pour obtenir de plus amples informations sur les polices autorisées.
Taille de police - Prix
La taille de la police utilisée pour le "Prix" et le "Prix de vente" affichés sous l'image du produit, définie en points. Par exemple : 14 ou 20.
Couleur de police - Prix
La couleur de la police utilisée pour le paramètre "Prix de vente" affiché sous l'image du produit, exprimée au format hexadécimal (XXXXXX). Une police noire serait ainsi associée à la valeur 000000.
Poids de la police - Prix
Ce paramètre définit le poids de la police "Prix". Veuillez consulter le paramètre "Poids de police" pour obtenir la liste des valeurs possibles et de plus amples informations sur son utilisation.
Préfixe - Prix
Ce paramètre peut contenir une chaîne de caractères affichée avant le "Prix" et "Prix de vente", dans le bloc de texte sous l'image du produit. Ce paramètre est souvent utilisé pour ajouter un préfixe "à partir de" à utiliser pour les produits dont le prix est variable (par ex. places de marché avec différents vendeurs, produits avec différentes options).
Taille de la police - Préfixe de Prix
La taille de la police du préfixe en points. Par exemple : 10 ou 11 (généralement inférieure à la taille de la police du "Prix"/"Prix de vente"). Si aucun préfixe de prix n'est défini, ce paramètre n'a aucun effet.
Couleur de la police - Préfixe de Prix
La couleur du "préfixe de prix", qui précède le Prix/Prix de vente (à gauche). Elle doit être au format hexadécimal (XXXXXX). Une police gris clair disposerait de la valeur EAEAEA (le préfixe est généralement plus clair que le Prix/Prix de vente).
Couleur de la police - Prix de vente
La couleur de la police utilisée pour le paramètre Prix de vente affiché sous l'image du produit, exprimée au format hexadécimal (XXXXXX). Une police noire serait ainsi associée à la valeur 000000.
Séparateur des décimales - Prix
Ce paramètre permet de définir le type de séparateur utilisé pour les prix décimaux. Un prix de "€2,99" s'affichera comme €2,99 si ce paramètre est défini sur "Virgule" et comme €2.99 si ce paramètre est défini sur "Point".
Supprimer les zéros à droite du prix
S'il est défini sur "Oui", ce paramètre supprimera les zéros à droite d'un prix si celui-ci est un nombre entier, mais écrit au format décimal.
Par exemple, au lieu d'afficher "29,00", il affichera "29".
Si ce paramètre est défini sur "Non", quand le prix est "29,00", il continuera de s'afficher comme "29,00". "Non" est le paramètre par défaut.
Bouton Ajouter au panier (uniquement pour le Smart Content site web)
Il est très facile de définir un bouton "Ajouter au panier" sans utiliser de code si votre site web propose un lien direct pour ajouter un produit spécifique au panier. Voici un exemple vous expliquant comment définir un bouton Ajouter au panier en dessous de chaque produit dans le Smart Content Recommendations.
Le résultat ressemblera à ceci, les boutons verts associant un ajout au panier du produit situé juste au-dessus :
Voici la configuration utilisée pour paramétrer le bouton :
CSS personnalisé pour le style du bouton Ajouter au panier
Custom CSS
.item-col .bottom-btn {
cursor: pointer;
background: #4da50b;
color: #ffffff;
width: 100%;
}- Le type d'action du bouton Ajouter au panier doit être défini sur Hyperlien. Cela signifie que lorsqu'une personne clique sur le bouton, l'action déclenchée est de suivre un lien défini dans le champs URL de base de l'hyperlien et Lien du bouton Ajouter au panier.
- Le texte Titre du bouton définit le texte placé dans le bouton. Si votre site web existe en une seule langue, il s'agit de la seule zone de texte que vous devez compléter. Si votre site web dispose d'un catalogue multilingue, cliquez sur le bouton "Traductions". L'écran suivant s'affiche. Il vous permet de définir une traduction pour chaque langue définie :
- L'URL de base de l'hyperlien est le premier bloc de l'URL qui sera appelé lorsque le visiteur clique sur le bouton Ajouter au panier. Si vous ne disposez pas d'un catalogue plurilingue, définissez ce paramètre au début de l'URL qui doit être appelée, sans les paramètres variables qui dépendent du produit spécifique sur lequel l'utilisateur clique (par exemple : http://www.myshop1.com/cart). Si votre catalogue est multilingue, cliquez sur le bouton "Traductions" et complétez les différentes URL de base, qui sont probablement différentes pour chaque langue que vous définissez.
Le lien du bouton Ajouter au panier est le deuxième bloc de l'URL qui viendra s'ajouter au paramètre précédent URL de base de l'Hyperlien. Ce paramètre est un template contenant des variables, qui seront automatiquement remplacées par des paramètres spécifiques aux produits. Utilisez la notation suivante pour les champs produit :
| Nom du paramètre | Notation template |
|---|---|
| Votre URL de base de l'hyperlien | #{base_url} |
| ID Unique | #{item_pid} |
| URL de la page | #{item_url} |
| URL de l'image | #{image_url} |
| Titre | #{title} |
| Sous-titre | #{subtitle} |
| Description | #{description} |
| Prix | #{price} |
| Prix de vente | #{sale_price} |
| Catégorie | #{category} |
| Quantité | #{quantity} |
| Type | #{type} |
| Marque | #{brand} |
| Disponibilité | #{availability} |
| Condition | #{condition} |
| Couleur | #{color} |
| N'importe quelle propriété personnalisée, par exemple, Catégorie de produit | #{productCategory} |
| L'URL de suivi (*) | #{follow_url} |
(*) L'URL de suivi est nécessaire pour générer le suivi des conversions. Les connaissances des données fourniront ensuite des informations sur la conversion.
Dans l'exemple ci-dessus, le lien du bouton Ajouter au panier est défini sur :
#{base_url}?add=1&id_product=#{item_pid}
Généralement, "le lien du bouton Ajouter au panier" commence par #{base_url}. Cette variable contient "l'URL de base de l'hyperlien" traduite. Il vous suffit ensuite d'ajouter le deuxième bloc de votre URL directe Ajouter au panier, en remplaçant les paramètres spécifiques au produit par le bon champ du template, comme indiqué dans la table ci-dessus.
Prenons un exemple, avec les hypothèses suivantes :
- Nous analysons une page produit dans laquelle est inséré notre Smart Content.
- Le Smart Content est configuré avec les paramètres précédents pour l'ajout d'un bouton Ajouter au panier.
- La page que nous analysons est en français.
- Nous cliquons sur le bouton Ajouter au panier sous le produit portant l'IDP 1234.
Voici le lient vers lequel nous allons être redirigés :
http://www.myshop.fr/panier?add=1&id_product=1234
"L'URL de base de l'hyperlien" pour une page en français est "http://www.myshop.fr/panier" et le bloc contenant les paramètres spécifiques au produit est : "?add=1&id_product=1234" pour le produit portant l'ID unique égal à 1234.
Bouton En savoir plus
Le bouton En savoir plus est bien plus simple que le bouton Ajouter au panier avec la configuration ci-dessous. Le seul paramètre à définir est "le bouton Texte du Titre", qui désigne tout simplement le texte qui va s'afficher dans le bouton. Ce bouton va toujours rediriger le visiteur vers "l'URL de la page" du produit lorsqu'il clique dessus. Si votre catalogue est un catalogue multilingue, vous devez ajouter des traductions en cliquant sur le bouton Traductions.
Le résultat peut ressembler à ceci (avec les boutons 4n savoir plus et Ajouter au panier):
CSS personnalisé pour le bouton En savoir plus (affiché en bas à gauche de chaque article) et le bouton Ajouter au panier (affiché en bas à droite de chaque article) :
Custom CSS
.item-col .bottom-btn, .item-col .bottom-half-left-btn {
cursor: pointer;
background: #e5e0e0;
color: #0091c9;
}
.item-col .bottom-btn, .item-col .bottom-half-right-btn {
cursor: pointer;
background: #4da50b;
color: #ffffff;
}Divers
Couleur de police - Marque
La couleur du "nom de la marque" qui s'affiche sous le bloc titre/description/prix, si le paramètre marque est configuré et analysé correctement dans la mise à jour du catalogue. Il doit être au format hexadécimal (XXXXXX).
Couleur de fond - Produits
La couleur de fond du Smart Content dans lequel les produits s'affichent. Elle doit être au format hexadécimal (XXXXXX) ou définie sur la valeur "transparent" si vous souhaitez que le fond soit transparent.
Dans l'exemple suivant, la couleur du fond est défini sur gris clair (fafafa) :
Couleur de fond - Conteneur de l'élément
La couleur de fond de chaque produit affiché individuellement. Elle doit être au format hexadécimal (XXXXXX) ou définie sur la valeur "transparent" si vous souhaitez que le fond soit transparent.
Dans l'exemple suivant, nous avons utilisé le même Smart Content que dans l'exemple "Couleur de fond Produits". Le seul paramètre qui change est le paramètre "Couleur de fond du Conteneur d'élément", qui est défini sur un bleu clair (cddbff).
Couleur et taille de la bordure de la colonne de l'élément
Ces deux paramètres permettent de définir la couleur et la taille de la bordure entourant chaque produit. Dans le Smart Content utilisé pour l'exemple "Couleur de fond Produits", la "couleur de bordure" a été définie sur un gris moyen clair (cecece) et la "taille de la bordure" est définie sur 1. Ce sont ces deux paramètres qui permettent de créer une bordure grise autour de chaque produit.
De plus, plusieurs CSS personnalisés ont été ajoutés pour arrondir les bordures et ajouter un effet d'ombre autour de chaque produit (parmi d'autres effets graphiques) :
#recList .item-col {
border-radius: 5px;
box-shadow: rgb(0 0 0 / 35%) 5px 5px 5px;
}Marge supérieure - Liste de produits
Ce paramètre permet de définir une distance en pixels entre la "zone de titre" et le bloc contenant tous les produits. Dans l'exemple précédent, ce paramètre était défini sur 4.
Placement des éléments côte à côte
Par défaut, les produits s'affichent séparés les uns des autres par un espace blanc de taille variable, qui s'adapte à la taille de l'écran. Cela permet d'afficher facilement les Smart Contents sur un mobile, puisque vous ne devez rien changer pour adapter le nombre de produits affichés à la taille de l'écran.
Il peut cependant arriver que vous souhaitiez placer vos produits côte à côte, sans aucune marge ou avec une marge codée en dur. Voici un exemple de ce à quoi pourrait ressembler ce type de Smart Content :
Si vous ne souhaitez pas que les éléments se touchent, vous pouvez ajouter des "CSS personnalisés" pour ajouter automatiquement une marge à droite de chaque produit. Voici le code que vous devez utiliser pour ajouter une marge de 8 pixels à droite de chaque produit :
#recList .item-col {
margin-right: 8px !important;
}Données de texte en haut
Si ce paramètre est Activé, le bloc de texte (contenant le titre, la description, le prix, la marque et toutes les propriétés activées dans le paramètre "Champs Affichés") s'affiche au-dessus de l'image du produit. Par défaut, ce paramètre est défini sur Désactivé.
| DÉSACTIVÉ — Données de texte en dessous de l'image du produit | ACTIVÉ — Données de texte au-dessus de l'image du produit |
|---|---|
|
|
Marge Conteneur d'élément
Ce paramètre définit l'espace en pixels entre la bordure de l'image du produit et la bordure du conteneur du produit.
| Marge Conteneur d'élément de 4 px |
|---|
|
| Marge Conteneur d'élément de 20 px |
|---|
|
Voici une capture d'écran des options Divers qui ont été utilisées pour configurer le précédent Smart Content (avec un remplissage de 4 px) :
Champs affichés
Ce paramètre active l'affichage des paramètres produit facultatifs. Ces paramètres proviennent de la configuration que vous avez définie dans l'importation de votre catalogue.
Le paramètre s'affiche si la case correspondante est cochée et si le paramètre est disponible pour le produit spécifique affiché. Si le paramètre n'est pas disponible (pas configuré ou configuré, mais pas importé pour le produit spécifique), il ne s'affichera pas sans artéfact graphique. Par exemple, dans la capture d'écran de configuration ci-dessus, les options de la "marque" et du "prix de vente" sont cochés, mais ne sont pas disponibles.
HTML personnalisé pour chaque produit
Si les paramètres produit que vous souhaitez afficher pour chaque produit ne sont pas disponibles dans le paramètre "Champs affichés", vous pouvez les ajouter via ce paramètre "HTML personnalisé".
Ce paramètre est un template dans lequel vous pouvez saisir un code HTML qui comprend les paramètres spécifiques au produit. Ces paramètres sont écrits sous la forme #{paramètre} et sont remplacés par la valeur de ce paramètre pour ce produit spécifique lorsque le Smart Content est rendu.
Le code suivant est un exemple de ce que vous pourriez saisir dans votre champ HTML personnalisé :
<a href="#{manufacturer_url}" class="highlight-link">#{manufacturer}</a>Si le paramètre manufacturer_url" du produit est égal à "https://www.selligent.com" et si le paramètre "manufacturer" est égal à "Selligent", le code HTML suivant sera rendu sous chaque image produit :
<a href="https://www.selligent.com" class="highlight-link">Selligent</a>Remarque : Pour que cela fonctionne, vous devez également configurer deux champs personnalisés nommés "manufacturer" et "manufacturer_url" dans la configuration de l'importation de votre catalogue.
Cette fonctionnalité vous permet de configurer des graphiques avancés pour chaque produit. Même s'il est toujours plus facile d'utiliser le configurateur graphique de votre tableau de bord, certaines fonctionnalités spécifiques que vous souhaiterez implémenter peuvent ne pas être prises en charge. Le code "HTML personnalisé pour chaque produit" vous permet d'aller plus loin dans la personnalisation. L'exemple suivant vous présente ce que vous pourriez faire, ainsi que le code HTML personnalisé qui a été utilisé pour le générer.
| Résultat | Code HTML personnalisé |
|---|---|
|
|
Aucun |
|
|
<a href="#{item_url}" class="info" target="_top">
|
Dans la dernière ligne de la table ci-dessous, un système a été implémenté pour lancer une bande-annonce lorsqu'une personne clique sur le bouton Lire qui s'affiche sur la miniature d'un film. Pour lancer la bande-annonce, le Smart Content envoie un déclencheur à la balise Recommendations, qui appelle à son tour une fonction Javascript existante dans la page parent. Le paragraphe suivant vous explique en détail le fonctionnement de cet extrait de code.
Dans l'HTML personnalisé, le bouton Bande-annonce contient une classe Recommendations spécifique appelée "custom-action-btn". L'ajout de cette classe à un élément HTML dans un Smart Content va déclencher un appel vers la fonction appellée "setReceiveDataFunction", lorsque l'utilisateur clique sur cet élément. Cet appel va également disposer d'un paramètre : toutes les données contenues dans le paramètre "data-obj" de l'élément HTML, qui doit être un objet "stringified".
La fonction "setReceiveDataFunction" appelée lorsque l'utilisateur clique sur la bande-annonce est définie dans la balise. L'HTML personnalisé ne lance que la bande-annonce si la balise Recommendations déclare la fonction "setReceiveDataFunction" comme celui-ci :
<script type="text/javascript">
var _thq=_thq||[];
_thq.push(['setId','CustomerX']);
_thq.push(['trackPageView']);
_thq.push(['trackEvents']);
_thq.push(['detectChanges']);
_thq.push(['setReceiveDataFunction', function(data){launchTrailer(data);}]);
(function(){
var th=document.createElement('script');
th.type='text/javascript';
th.async=true;
th.src=('https:'==document.location.protocol?'https://':'http://')+'www..com/static/th.js';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(th,s);
}) ();
</script>Un clic sur le bouton Bande-Annonce dans le Smart Content appelle la fonction suivante qui doit être définie dans la page parente contenant le Smart Content.
launchTrailer({
"trailer": "#{trailer}",
"popin":"#{item_pid}",
"name": "#{title}",
"videotype":"#{video_type}",
"cover":"#{image_url}"
});HTML personnalisé inséré dans la balise head du Smart Content
Ce paramètre vous permet d'insérer un HTML statique dans la section
du Smart Content. Ce code HTML sera chargé avant le code CSS personnalisé et tous vos paramètres graphiques standard.Recommendations propose par défaut un nombre de polices limité (décrites dans la section Famille de police Titre). L'HTML personnalisé dans la balise head est souvent utilisé pour ajouter des polices personnalisées et réutiliser ces polices dans vos paramètres graphiques (police du titre ou de la description).
Pour ajouter une police personnalisée hébergée sur vos serveurs (nous utilisons le domaine myshop.com comme exemple) :
<style type="text/css">
@font-face{
font-family:"Helvetica Neue Std";
src:url('//www.myshop.com/static/fonts/helveticaneue.ttf') format('truetype'),
url('//www.myshop.com/static/fonts/helveticaneue.woff') format('woff'),
url('//www.myshop.com/static/fonts/helveticaneue.svg') format('svg'),
url('//www.myshop.com/static/fonts/helveticaneue.eot') format('embedded-opentype')
}
</style>Ce code sera inséré tel quel dans la section <head></head>
CSS personnalisé
Ce paramètre fonctionne de la même manière que le paramètre HTML personnalisé <head> précédent, mais il est spécifique au code CSS. Tout CSS personnalisé ajouté dans ce champ va "écraser" les propriétés CSS précédemment définies (suivant les règles CSS standard).
Pour nous assurer que l'ordre d'insertion des différents paramètres personnalisés dans le code HTML est clair, voici un exemple :
<html>
<head>
[**Custom HTML**]
[Smart Content default CSS]
[**Custom CSS**]
</head>
<body>
[Smart Content HTML]
[**Custom JS**]
</body>
</html>Si vous souhaitez ajouter une marge de gauche de 20 px au titre de votre Smart Content et définir la police sur "Helvetica Neue Std" police que vous avez ajoutée à votre paramètre HTML personnalisé, vous pourriez écrire ceci dans votre CSS personnalisé :
.rec_title {
left-margin: 20px;
font-family: "Helvetica Neue Std";
}Remarque : Pour obtenir le nom des éléments HTML et classes CSS utilisés dans le bloc de Smart Content, cliquez avec le bouton droit de la souris sur un bloc de Smart Content et sélectionnez l'option "Inspecter l'élément" dans la liste déroulante (dans l'aperçu du tableau de bord ou dans les blocs de Smart Content déjà affiché sur votre site web) si vous utilisez le navigateur Google Chrome.
Si vous ne savez absolument pas comment fonctionne CSS, consultez cette introduction à CSS.
JS personnalisé
Ce paramètre fonctionne de la même manière que le paramètre CSS personnalisé précédent. Il est placé à la fin de l'élément <body></body> et sera exécuté après l'exécution du Javascript standard de votre Smart Content.
Ce champ est souvent utilisé pour ajouter un code de suivi Google Analytics dans un Smart Content. Étant donné que ce champ vous permet d'exécuter un code JS indésirable sur le domaine Recommendations.com, notre équipe doit valider le code saisi dans ce champ avant qu'il puisse être activé dans vôtre Smart Content. Lorsque vous rédigez votre code JS et enregistrez votre configuration, ce champ ressemblera à ceci, avec une info-bulle "Validation en attente" :
Dès que notre équipe l'a validé, ce même paramètre disposera d'une info-bulle "Valide et activé !" :
Si vous rencontrez des problèmes avec la procédure de validation, n'hésitez pas à nous contacter via le chat en direct ou par e-mail.
Avertissement : L'exemple suivant de code JS personnalisé est réservé aux utilisateurs avancés. Nous vous déconseillons de l'utiliser sauf si vous savez exactement ce que vous faites.
Ce même paramètre JS personnalisé peut-être utilisé pour manipuler du contenu dans le Smart Content.
Par exemple, si vous souhaitez absolument que le titre du Smart Content s'affiche sur deux lignes, chaque ligne disposant d'une police et taille de police différentes, vous ne pourrez pas le faire facilement avec un simple CSS personnalisé. Vous devrez configurer quelque chose qui ressemble à ce qui suit dans votre JS personnalisé pour diviser la ligne simple en deux :
var t = document.querySelectorAll('.rec_title');
if (t.length && t[0].innerHTML.length) {
var ar = t[0].innerHTML.split(' ');
var i1;
if (ar.length < 4) {
i1 = 2;
} else {
i1 = 4;
}
var t1 = ar.slice(0,i1).join(' ');
var t2 = ar.slice(i1,ar.length).join(' ');
var parent = t[0].parentNode;
parent.innerHTML = '<div class="rec_title"><div class="rec_title_top">'
+ t1 +'</div><div class="rec_title_bottom">' + t2 + '</div></div>';
}Sur la base de ce nouvel HTML, vous pouvez ajouter un CSS personnalisé pour les éléments nouvellement créés :
#top_bar {
height: 80px;
}
.rec_title_top {
font-family: Economica, Verdana, Arial, sans-serif;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 3px;
height: 10px;
}
.rec_title_bottom {
font-family: CheddarJack, Verdana, Arial, sans-serif;
font-size: 34px;
text-transform: lowercase;
}
Rubriques connexes