Caso d'uso delle variabili: Mostrare la percentuale di sconto solo quando è presente uno sconto in un contenuto web

Evidenziare i prezzi scontati e la percentuale di sconto nei prodotti consigliati permette di aumentare le conversioni nell’eCommerce. Tramite stili e classi CSS, potrai mostrare la percentuale di sconto e l’importo originale barrato, accanto al valore attuale, solo nei prodotti in offerta. 

In questo articolo imparerai come mostrare nei contenuti web la percentuale di sconto solo quando esiste un’offerta.

  

Tempo di implementazione: 15 minuti.
Difficoltà: Media
Quando utilizzarlo?: Nei contenuti che mostrano prodotti con e senza sconto.

 

PASSO 1. Crea un contenuto web

1. Accedi a “Contenuto > Contenuto web” e fai clic su  Crea nuovo contenuto web.

Mostrar_porcentaje_de_rebaja_en_WEB_-__1.png

2. Scegli il tipo di contenuto web adatto, assegnagli un nome e clicca su  Crea contenuto web.

Mostrar_porcentaje_de_rebaja_en_WEB_-__2.png

Se ti interessa sapere di più sui cinque tipi di contenuto web, fai clic qui.

3. Includi almeno un componente avanzato di tipo Prodotti.

Mostrar_porcentaje_de_rebaja_en_WEB_-__3.png

  

Per questo passaggio ti consigliamo di dare un’occhiata al Editor di contenuto web e a come creare un blocco di prodotti personalizzati in un contenuto web. 

 

PASSO 2. Inserisci classi e stili CSS

4. Aggiungi un Componente HTML nella parte superiore del layout.

Mostrar_porcentaje_de_rebaja_en_WEB_-__4.png

5. Inserisci il seguente frammento di codice, sostituendo il contenuto dell’elemento HTML.

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

Mostrar_porcentaje_de_rebaja_en_WEB_-__5.png

 

PASSO 3. Crea le variabili nel contenuto dinamico

6. Seleziona il blocco di prodotti dinamico e, nell’editor all’interno delle Proprietà, fai clic su Variabili per crearne una nuova nel punto in cui desideri visualizzare il prezzo scontato.

Mostrar_porcentaje_de_rebaja_en_WEB_-__6.png

7. Dai un nome alla variabile che mostrerà il prezzo scontato. Puoi chiamarla: "originalPrice"

Mostrar_porcentaje_de_rebaja_en_WEB_-__7.png

8. Fai clic su  Accetta per salvare le modifiche.

9. Ripeti le azioni dei punti 6, 7 e 8 per creare la variabile che conterrà lo sconto. Puoi chiamarla: "discount".

Mostrar_porcentaje_de_rebaja_en_WEB_-__8.png

 

Evidenziare le percentuali di sconto con un design accattivante aiuterà il contatto a prestare maggiore attenzione, quindi ti invitiamo a personalizzarne lo stile per aumentare la probabilità di conversione.

Nel nostro esempio, lo sconto è mostrato con testo bianco su sfondo rosso e il prezzo originale è barrato. Puoi copiare il codice CSS al punto 14.

10. Vai alla scheda Variabili e fai clic su  (Modifica) nella variabile appena creata ("originalPrice"). 

Mostrar_porcentaje_de_rebaja_en_WEB_-_9.png

11. Nel campo Tipo di dato seleziona "Valuta". 

Mostrar_porcentaje_de_rebaja_en_WEB_-__10.png

12. Clicca su  Accetta per salvare le modifiche. 

  

Alla variabile "discount" non viene assegnato un formato per facilitare il funzionamento del codice introdotto nel componente HTML. Tuttavia, viene aggiunto il simbolo percentuale (%) nell’editor per mostrarlo nel contenuto.

13. Seleziona di nuovo il blocco di prodotti dinamico e, nella scheda Proprietà, clicca sul pulsante Modifica codice HTML.

Mostrar_porcentaje_de_rebaja_en_WEB_-__11.png

14. Nell’editor del contenuto dinamico, assegna la classe CSS "cn_discount_{{discount}}" agli elementi che mostrano le variabili del prezzo originale e dello sconto.

Mostrar_porcentaje_de_rebaja_en_WEB_-__12.png

Il blocco che include la percentuale di sconto è il seguente (riga 2 del codice):

<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>


Il blocco che include il prezzo originale barrato è il seguente (riga 3 del codice):

<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. Fai clic su  Applica per salvare le modifiche dell’HTML e su  Salva per salvare il contenuto web.

 

PASSO 4. Crea un workflow per mostrare il contenuto web

16. Accedi a “Workflows” e fai clic su  Crea nuovo workflow.

 

Per semplificare il compito, puoi utilizzare uno dei nostri modelli, ad esempio: raccomandatore nella scheda prodotto oppure crosselling nella homepage. Ricorda che dovrai configurare il workflow seguendo le istruzioni prima di continuare con questo articolo.

Se desideri progettare la strategia da zero, ti consigliamo di dare un’occhiata a come Mostrare prodotti personalizzati in un contenuto.

17. Nel nodo “Invia contenuto web”, fai clic su  (Modifica configurazione del nodo) e configura l’assegnazione delle variabili.

Mostrar_porcentaje_de_rebaja_en_WEB_-__13.png

18. Clicca su Fine   per salvare le modifiche nel nodo e su  Salva per salvare tutte le modifiche del workflow.

19. Fai clic su  Avvia per attivare il workflow.

20. Accedi al tuo sito web e verifica che le percentuali di sconto vengano mostrate correttamente.

Mostrar_porcentaje_de_rebaja_en_WEB_-__14.png

 

 

 Successo!
Le percentuali di sconto dei tuoi prodotti verranno mostrate quando sarà applicato uno sconto.


Continua a imparare!

Per sfruttare tutto il potenziale del tuo account in Connectif, ti consigliamo di continuare con i seguenti articoli: