Cas d'utilisation des variables : Afficher le pourcentage de remise uniquement lorsqu'une réduction existe dans un contenu web

Mettre en valeur les prix réduits et leur pourcentage de remise sur les produits recommandés permet d’augmenter les conversions dans le eCommerce. Grâce aux styles et classes CSS, vous pouvez afficher le pourcentage de remise et le montant original barré, à côté de la valeur actuelle, uniquement pour les produits en promotion. 

Dans cet article, vous apprendrez comment afficher dans les contenus web le pourcentage de remise uniquement lorsqu’il y a une réduction.

  

Temps de mise en œuvre : 15 minutes.
Difficulté : Moyenne
Quand l’utiliser ? : Dans les contenus affichant des produits avec et sans remise.

 

ÉTAPE 1. Créer un contenu web

1. Accédez à “Contenu > Contenu web” et cliquez sur  Créer un nouveau contenu web.

Afficher_pourcentage_de_remise_WEB_-__1.png

2. Choisissez le type de contenu web approprié, donnez-lui un nom et cliquez sur  Créer un contenu web.

Afficher_pourcentage_de_remise_WEB_-__2.png

Si vous souhaitez en savoir plus sur les cinq types de contenu web, cliquez ici.

3. Incluez au moins un composant avancé de type Produits.

Afficher_pourcentage_de_remise_WEB_-__3.png

  

 

ÉTAPE 2. Insérer des classes et styles CSS

4. Ajoutez un Composant HTML en haut du design.

Afficher_pourcentage_de_remise_WEB_-__4.png

5. Ajoutez le fragment de code suivant, en remplaçant le contenu de l’élément HTML.

<style text="text/css">
.cn_discount_0 {
display: none !important;
}
</style>

Afficher_pourcentage_de_remise_WEB_-__5.png

 

ÉTAPE 3. Créer les variables dans le contenu dynamique

6. Sélectionnez le bloc de produits dynamique et, dans l’éditeur inclus dans Propriétés, cliquez sur Variables pour en créer une nouvelle à l’endroit où vous souhaitez afficher le prix avec remise.

Afficher_pourcentage_de_remise_WEB_-__6.png

7. Donnez un nom à la variable qui affichera le prix remisé. Vous pouvez l’appeler : "originalPrice"

Afficher_pourcentage_de_remise_WEB_-__7.png

8. Cliquez sur  Accepter pour enregistrer les modifications.

9. Répétez les actions des points 6, 7 et 8 pour créer la variable qui contiendra la remise. Vous pouvez l’appeler : "discount".

Afficher_pourcentage_de_remise_WEB_-__8.png

 

Mettre en valeur les pourcentages de remise avec un design attrayant aidera le contact à y prêter plus d’attention, c’est pourquoi nous vous encourageons à le styliser pour augmenter les chances de conversion.

Dans notre exemple, la remise s’affiche en lettres blanches sur fond rouge et le prix d’origine est barré. Vous pouvez copier le code CSS au point 14.

10. Rendez-vous dans l’onglet Variables et cliquez sur  (Modifier) sur la variable récemment créée ("originalPrice"). 

Afficher_pourcentage_de_remise_WEB_-_9.png

11. Dans le champ Type de donnée, sélectionnez "Monnaie". 

Afficher_pourcentage_de_remise_WEB_-__10.png

12. Cliquez sur  Accepter pour enregistrer les modifications. 

  

Aucun format n’est appliqué à la variable "discount" pour faciliter le fonctionnement du code introduit dans le composant HTML. Toutefois, le symbole pourcentage (%) est ajouté dans l’éditeur pour qu’il soit affiché dans le contenu.

13. Sélectionnez à nouveau le bloc de produits dynamique et, dans l’onglet Propriétés, cliquez sur le bouton Modifier le code HTML.

Afficher_pourcentage_de_remise_WEB_-__11.png

14. Dans l’éditeur de contenu dynamique, assignez la classe CSS "cn_discount_{{discount}}" aux éléments affichant les variables du prix d’origine et de la remise.

Afficher_pourcentage_de_remise_WEB_-__12.png

Le bloc qui inclut le pourcentage de remise est le suivant (ligne 2 du code) :

<div class="cn_element_products_2_name" style="margin-top: 15px; word-wrap: break-word; white-space: normal; overflow: hidden; height: 2.1em; line-height: 1em; box-sizing: border-box;"><strong>{{name}}&nbsp; <span class="cn_discount_{{discount}}" style="color: white; background-color: #ff0000;">{{discount}}%</span></strong></div>


Le bloc qui inclut le prix d’origine barré est le suivant (ligne 3 du code) :

<div class="cn_element_products_2_unit_price" style="color: #999999; font-size: 0.9em; word-wrap: break-word; white-space: normal; overflow: hidden; height: 1.1em; line-height: 1em; box-sizing: border-box;"><span style="font-size: 12pt;"><span class="cn_discount_{{discount}}" style="font-size: 14.4px; text-decoration-line: line-through;">{{originalPrice}}</span>&nbsp;{{unitPrice}}</span></div>

 

15. Cliquez sur  Appliquer pour enregistrer les modifications du HTML, puis sur  Enregistrer pour sauvegarder le contenu web.

 

ÉTAPE 4. Créer un workflow pour afficher le contenu web

16. Accédez à “Workflows” et cliquez sur  Créer un nouveau workflow.

 

Pour gagner du temps, vous pouvez utiliser l’un de nos modèles, par exemple : recommandation dans la fiche produit ou crosselling sur la page d’accueil. N’oubliez pas de configurer le workflow comme indiqué avant de continuer cet article.

Si vous préférez concevoir la stratégie depuis zéro, nous vous recommandons de consulter comment afficher des produits personnalisés dans un contenu.

17. Dans le nœud “Envoyer contenu web”, cliquez sur  (Modifier la configuration du nœud) et configurez l’attribution des variables.

Afficher_pourcentage_de_remise_WEB_-__13.png

18. Cliquez sur Terminer   pour enregistrer les modifications dans le nœud et sur  Enregistrer pour sauvegarder toutes les modifications du workflow.

19. Cliquez sur  Démarrer pour activer le workflow.

20. Accédez à votre site web et vérifiez que les pourcentages de remise s’affichent correctement.

Afficher_pourcentage_de_remise_WEB_-__14.png

 

 

 Succès !
Les pourcentages de remise de vos produits seront affichés lorsqu’une réduction est appliquée.


Continuez à apprendre !

Pour tirer le meilleur parti de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :