A continuación te vamos a explicar en qué consiste este carrusel de productos que muestra el precio de tus productos tanto original como el rebajado en el caso de que esté en promoción. ¡Todo quedará listo para una experiencia de usuario 10.
¡Aquí lo tienes en acción!
¿Cómo sabe el carrusel que tiene que mostrar el precio rebajado?
Esto lo podemos hacer de diversas maneras. En este caso, lo hacemos mediante la declaración de clases que dependiendo de un valor harán que la caractarística display:none trabaje o no, mostrando ambos precios.
Aquí te presentamos una forma que pensamos es muy sencilla e intuitiva.
Por seguir un orden, lo primero que hacemos es declarar una variable que vamos a llamar «discount» (en inglés suena más pro ?), tipo de dato «Número» y en Formato elegimos en el desplegable sin decimales, tal y como vemos en esta imagen ⬇️.
Ahora creamos una clase de estilos denominada cn_hide_{{discount}} que usará la variable dinámica que acabamos de declarar y que asignaremos a ella. Este trozo de código queda incluido dentro de un bloque tipo html dentro de connectif.
<style>
.cn_hide_0 {
display:none;
}
</style>
Cuando vayamos a paremetrizar el workflow tendremos que asignar la variable «Porcentaje de rebaja» del nodo «obtener productos» a nuestra variable «discount».
<span style="font-size:0.85em;color:{{color-unitPrice}};">{{unitPrice}}</span> <span class="original_price cn_hide_{{discount}}" style="font-size:0.7em;color:{{color-originalPrice}};"><strike>{{originalPrice}}</strike></span>Y con esto hemos terminado, a partir de ahora podrás configurar tus carruseles de producto de connectif de forma sencilla y sin necesidad de tener conocimientos en programación. ⬇️¡Descargátelo más abajo!⬇️
