Blendee permette, oltre ai template default, di poter creare dei template personalizzati sia per le Recommendations che per i Behavioural message.
Vediamo punto per punto come fare:
Il primo step è recarsi nella sezione Impostazioni->Gestione template, scegliere la tipologia di web personalization per cui vogliamo creare il template: se behavioral message, recommendations, email o widget.
In questo caso facciamo l’esempio con un behavioural message, ma il procedimento è uguale anche per gli altri elementi.

Cliccando su Template per Behavioural Message si apre una pagina in cui ci sono tre tab contenenti i template:
Generali: quindi quelli default che fornisce Blendee
Personali: sono quelli personalizzati dall’utente,
Archiviati: è la sezione dove possiamo archiviare i template inutilizzati.

Successivamente andremo a clonare il template che vogliamo utilizzare come base per le nostre personalizzazioni utilizzando il pulsante clone in basso a destra per ogni template.
Premendo clona si apre un wizard di configurazione del template, dove possiamo impostare, al primo step, il nome del template e se dovrà contenere o meno delle raccomandazioni di prodotti. E’ possibile impostare anche la tipologia di template se overlay o meno, ossia se dovrà comparire come elemento su un layer posto al di sopra della nostra pagina di partenza o come elemento integrato all’interno di quelli presenti nella pagina, andando quindi a modificare la struttura del DOM.

Allo step 2 possiamo impostare le chiavi che verranno interpretate in fase di inserimento all’interno della pagina e che ci permettono di impostare delle variabili per la personalizzazione del template, come colori, dimensioni e campi.

All’ultimo step è possibile inserire la parte di HTML e CSS relativa al nostro template personalizzato.
Una volta conclusa la configurazione, troveremo il template personalizzato nella sezione “Personali”.
Per modificare il template appena creato è sufficiente andare nella tab Personali e cliccare su “Modifica” per ritornare alla sezione di configurazione.
Una volta creato il template sarà disponibile alla sezione “Personali” in fase di creazione del messaggio comportamentale.
Con Blendee è possibile inserire prodotti raccomandati sia in Messaggi comportamentali che in Recommendation, infatti, tramite la clonazione di un template è possibile modificare il codice in modo da personalizzarlo al meglio.
Vediamo come poter aggiungere il codice base per poter inserire prodotti raccomandati ovunque.
foreach.{{products}} ..inserire il proprio codice html da ripetere per ogni elemento, ad esempio: <div class="ADB_IDRCTX_PLACEHOLDER_price_product ADB_hidden_##ADB_sc_card_price_bool##"> <div class="ADB_IDRCTX_PLACEHOLDER_price_original_product"> <span class="ADB_IDRCTX_PLACEHOLDER_amount">{{products}}.{{priceOriginal}}</span> <span class="ADB_IDRCTX_PLACEHOLDER_currency">{{products}}.{{currencySymbol}}</span> </div> <div class="ADB_IDRCTX_PLACEHOLDER_price_discount_product"> <span class="ADB_IDRCTX_PLACEHOLDER_amount">{{products}}.{{priceDiscounted}}</span> <span class="ADB_IDRCTX_PLACEHOLDER_currency">{{products}}.{{currencySymbol}}</span> </div> </div> ... endforeach
Il codice che vediamo sopra, serve a ripetere la struttura HTML inserita per ogni prodotto mostrato, estratto dall’algoritmo.
L’accesso ai valori relativi al prodotto raccomandato è possibile grazie all’utilizzo delle chiavi:
{{products}}.{{nomecampo}}
Come possiamo vedere dal codice sopra è possibile anche modificare il nome delle classi in real time tramite l’uso delle chiavi create in fase di personalizzazione del template (es: ##ADB_sc_card_price_bool## nel codice sopra che assumerà il valore true/false a seconda del valore selezionato nel menù laterale visibile sotto)

Le chiavi utilizzabili relative ai prodotti sono:
{{products}}.{{image}}: Url dell’immagine del prodotto
{{products}}.{{priceOriginal}}: Prezzo originale del Prodotto
{{products}}.{{priceDiscounted}}: Prezzo finale del Prodotto
{{products}}.{{priceDelivery}}: Prezzo di spedizione
{{products}}.{{name}}: Titolo del Prodotto
{{products}}.{{descriptionShort}}: Descrizione Breve del Prodotto
{{products}}.{{discount}}: Percentuale di sconto sul Prodotto
{{products}}.{{shopLink}}: Link al prodotto
{{products}}.{{currencySymbol}}: Simbolo della valuta
{{products}}.{{sku}}: SKU del prodotto
{{products}}.{{idExt}}: Id del prodotto
{{products}}.{{brand}}: Brand del prodotto
{{products}}.{{model}}: Modello del prodotto
{{products}}.{{availableQuantity}}: Quantità disponibile del prodotto
{{products}}.{{insertionDate}}: Id della categorie di appartenenza separati da spazio
{{products}}.{{categoryIds}}: Id delle categorie associate al prodotto separati da virgola.
Thanks for contributing!