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.
ÉTAPE 1. Créer un contenu web
1. Accédez à “Contenu > Contenu web” et cliquez sur Créer un nouveau contenu web.
2. Choisissez le type de contenu web approprié, donnez-lui un nom et cliquez sur Créer un contenu web.
3. Incluez au moins un composant avancé de type Produits.
ÉTAPE 2. Insérer des classes et styles CSS
4. Ajoutez un Composant HTML en haut du design.
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>
É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.
7. Donnez un nom à la variable qui affichera le prix remisé. Vous pouvez l’appeler : "originalPrice".
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".
10. Rendez-vous dans l’onglet Variables et cliquez sur (Modifier) sur la variable récemment créée ("originalPrice").
11. Dans le champ Type de donnée, sélectionnez "Monnaie".
12. Cliquez sur Accepter pour enregistrer les modifications.
13. Sélectionnez à nouveau le bloc de produits dynamique et, dans l’onglet Propriétés, cliquez sur le bouton Modifier le code HTML.
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.
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}} <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> {{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.
17. Dans le nœud “Envoyer contenu web”, cliquez sur (Modifier la configuration du nœud) et configurez l’attribution des variables.
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.
Continuez à apprendre !
Pour tirer le meilleur parti de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :
- Afficher le pourcentage de remise uniquement en cas de réduction dans un e-mail, pour appliquer la même fonctionnalité dans les e-mails.
-
Recommandation sur la page d’accueil, pour afficher des produits recommandés selon l’activité du contact sur le site web.
- Meilleures ventes dans la fiche produit, pour afficher au contact, lorsqu’il visite un produit, les articles les plus vendus dans la même catégorie.
-
Recommandation au paiement, pour afficher dans le checkout des produits liés au panier.