Use case for variables: Show discount percentage only when there’s a discount in web content

Highlighting sale prices and their discount percentage on recommended products helps you to increase ecommerce conversions. Using CSS styles and classes, you can show the discount percentage and the original amount crossed out, together with the current price, on sale products only.

In this article, you’ll learn how to show the discount percentage in web content only when there is a discount.

  

Implementation time: 15 minutes.
Difficulty: Medium.
When to use it: In content that shows products with and without discount.

 

STEP 1. Create web content

1. Go to “Content > Web” and click  Create new web content.

Mostrar_porcentaje_de_rebaja_en_WEB_-__1.png

2. Choose the appropriate type of web content, give it a name, and click  Create web content.

Mostrar_porcentaje_de_rebaja_en_WEB_-__2.png

If you’re interested in learning more about the five types of web content, click here.

3. Include at least one advanced-type Products component.

Mostrar_porcentaje_de_rebaja_en_WEB_-__3.png

  

For this step we recommend taking a look at Web Content Editor  and How to create a custom product block in web content. 

 

STEP 2. Insert CSS classes and styles

4. Add an HTML component at the top of the design.

Mostrar_porcentaje_de_rebaja_en_WEB_-__4.png

5. Enter the following code snippet, replacing the content of the HTML element.

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

Mostrar_porcentaje_de_rebaja_en_WEB_-__5.png

 

STEP 3. Create variables in the dynamic content

6. Select the dynamic product block and, in the editor included under Properties, click Variables to create a new block where you want to show the discounted price.

Mostrar_porcentaje_de_rebaja_en_WEB_-__6.png

7. Name the variable that will display the discounted price. You can call it: "originalPrice"

Mostrar_porcentaje_de_rebaja_en_WEB_-__7.png

8. Click  Accept to save your changes.

9. Repeat points 6, 7 and 8 to create the variable that will contain the discount. You can call it: "discount".

Mostrar_porcentaje_de_rebaja_en_WEB_-__8.png

 

Highlighting the discount percentages with an appealing design will draw the contact’s attention to them, so we recommend it giving it some style to increase the likelihood of conversion.

In our example, the discount is shown in white letters on a red background and the original price has been crossed out. You can copy the CSS code in point 14.

10. Go to the Variables tab and click  (Edit) on the newly created variable ("originalPrice"). 

Mostrar_porcentaje_de_rebaja_en_WEB_-_9.png

11. In the Data type field, select "Currency". 

Mostrar_porcentaje_de_rebaja_en_WEB_-__10.png

12. Click  Accept to save the changes. 

  

The "discount" variable is not formatted, to make it easier for the code entered in the HTML component to work. However, the percentage symbol (%) is added in the editor so that it is displayed in the content.

13. Select the dynamic product block again, and on the Properties, tab, click the Edit HTML code button.

Mostrar_porcentaje_de_rebaja_en_WEB_-__11.png

14. In the dynamic content editor, assign the CSS class "cn_discount_{{discount}}" to the elements that display the original price and discount variables.

Mostrar_porcentaje_de_rebaja_en_WEB_-__12.png

The block that includes the discount percentage is as follows (line 2 of the 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>


The block that includes the original price crossed out is as follows (line 3 of the 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. Click  Apply to save the HTML changes and  Save to save the web content.

 

STEP 4. Create a workflow to display web content

16. Go to “Workflows” and click  Create new workflow.

 

To speed up the task, you can use one of our templates, for example: Inline in product's page: recommended products or crosselling en home. Remember that you will have to configure the workflow according to the instructions before continuing with this article.

If you’d like to design the strategy from scratch, we recommend taking a look at Show personalized products in content .

17. In the “Send web content”, node, click  (Edit node settings) and configure the variable mapping.

Mostrar_porcentaje_de_rebaja_en_WEB_-__13.png

18. Click Finish   to save changes to the node and  Save to save all changes to the workflow.

19. Click  Start to activate the workflow.

20. Access your website and check that the discount percentages are displayed correctly.

Mostrar_porcentaje_de_rebaja_en_WEB_-__14.png

 

 

 Success!
The discount percentages of your products will be shown when they have applied a discount.


Keep learning!

To make the most of your Connectif account, we recommend reading these articles next:

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0