Tworzenie wiadomości z ramką produktową w HTML

W systemie SALESmanago możesz wysyłać
wiadomości dynamiczne zawierające w treści:

  • produkty ostatnio oglądane na stronie
  • produkty z porzuconego koszyka

Możesz albo samodzielnie dodać kod do szablonu wiadomości w kreatorze HTML,
albo stworzyć szablon w kreatorze drag & drop (zaawansowany widżet

„Ramka produktowa”automatycznie dodaje kod tam, gdzie trzeba).

Jak stworzyć ramkę produktową w kreatorze HTML?

Do szablonu zakodowanego w HTML możesz dodać ramkę, do której będą zaciągane informacje o produktach. Dane o produkcie trafiają do szablonu przy użyciu elementów zastępczych. Informacje o produkcie muszą znajdować się w pliku XML. Podstawowe dane o produkcie to m.in. nazwa, cena, obrazek i URL do strony produktu.

Zaciągana informacja o produkcie Element zastępczy w szablonie HTML1
Obrazek $prodRec[1].imgSrc$
URL na stronie $prodRec[1].url$
Nazwa  $prodRec[1].name$
Kategoria  $prodRec[1].category$
Opis  $prodRec[1].description$
Cena  $prodRec[1].price$
Cena promocyjna $prodRec[1].promoPrice$
Szczegół produktu2 $prodRec[1].detail1$
Ograniczenie zaciąganych znaków3 $prodRec[1].detail1.length[50]$

Element zastępczy w szablonie HTML1 – jeżeli chcesz mieć w szablonie 2 (lub więcej) produktów, oznacz to następująco:

$prodRec[1].imgSrc$ – cyfra w kwadratowym nawiasie oznacza numer produktu – w tym przypadku informacje będą zaciągane o pierwszym produkcie. Jeżeli do nawiasu kwadratowego wstawisz inną wartość, np. $prodRec[2].imgSrc$ wówczas informacje będą zaciągane o drugim produkcie itd.

Szczegół produktu2 – dodatkowa, dowolna informacja o produkcie określona w pliku XML. Maksymalnie do opisu produktu może być zaciągnięte 5 szczegółów: $prodRec[1].detail1$ ; $prodRec[1].detail2$ ; $prodRec[1].detail3$ ; $prodRec[1].detail4$ ; $prodRec[1].detail5$

Dodanie ograniczenia zaciąganych znaków3 – pozwala ustawić limit np. gdy opisy produktów są bardzo długie. Możesz ograniczyć liczbę znaków zaciąganych do pola w szablonie przez dodanie parametru .length[wartość] W przypadku przykładu w tabeli będzie to 50 znaków. Dodanie ograniczenie jest dobrym pomysłem w przypadku opisu i szczegółów produktu.

 

Jak wysłać wiadomość z szablonem produktowym? 

Szablon wiadomości z informacją o produktach w HTML koduje się w jeden sposób. O konkretnej funkcji (czy szablon posłuży do wysłania porzuconego koszyka, czy ostatnio oglądanych produktów) możesz zdecydować w regułach automatyzacji, w ustawieniach akcji.

Jak wysłać wiadomość z porzuconym koszykiem z reguł automatyzacji >>

Jak wysłać wiadomość z ostatnio oglądanymi produktami z reguł automatyzacji >>

WAŻNE: Jeżeli zakodujesz szablon dla określonej ilości X produktów w porzuconym koszyku, a użytkownik porzuci ich X-n, wówczas taka wiadomość nie zostanie wysłana do tego użytkownika. Jeśli natomiast użytkownik porzuci X+n, wówczas do szablonu trafi tylko X produktów, w kolejności dodania do koszyka.

W jednej wiadomości z ostatnio oglądanymi produktami mieści się maksymalnie 12 produktów. Jeśli użytkownik oglądał mniejszą ilość produktów, zostaną dobrane podobne produkty (po kategorii), tak aby zapełnić wszystkie dostępne pola produktowe.

 

Przykład ramki produktowej 

Poprawnie zakodowana ramka produktowa dla 3 produktów, która może zostać umieszczona w szablonie wiadomości.







$prodRec[1].description$

$prodRec[2].description$

$prodRec[3].description$

$prodRec[1].price$

$prodRec[2].price$

$prodRec[3].price$

ZOBACZ

ZOBACZ

ZOBACZ

 

Kod HTML powyższej tabelki:

<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff">
<!--zdj-->
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff"> <tr> <td width="20"></td> <td width="200"> <a href="$prodRec[1].url$"> <img border="0" src="$prodRec[1].imgSrc$" alt="" title="" width="200" style="border:none; display:block; width:200px;"/> </a> </td> <td width="20"></td> <td width="200"> <a href="$prodRec[2].url$"> <img border="0" src="$prodRec[2].imgSrc$" alt="" title="" width="200" style="border:none; display:block; width:200px;"/> </a> </td> <td width="20"></td> <td width="200"> <a href="$prodRec[3].url$"> <img border="0" src="$prodRec[3].imgSrc$" alt="" title="" width="200" style="border:none; display:block; width:200px;"/> </a> </td> <td width="20"></td> </tr> </table> </td> </tr> <!--break--> <tr> <td height="20"></td> </tr> <!--opis--> <tr> <td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff"> <tr> <td width="20"></td> <td width="200" align="center"> <p style="margin: 0;padding:0;font-size:16px;color:#343434;font-family:open sans,arial,sans-serif;">$prodRec[1].description$</p> </td> <td width="20"></td> <td width="200" align="center"> <p style="margin: 0;padding:0;font-size:16px;color:#343434;font-family:open sans,arial,sans-serif;">$prodRec[2].description$</p> </td> <td width="20"></td> <td width="200" align="center"> <p style="margin: 0;padding:0;font-size:16px;color:#343434;font-family:open sans,arial,sans-serif;">$prodRec[3].description$</p> </td> <td width="20"></td> </tr> </table> </td> </tr> <!--break--> <tr> <td height="10"></td> </tr> <!--cena--> <tr> <td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff"> <tr> <td width="20"></td> <td width="200" align="center"> <p style="margin: 0;padding:0;font-size:20px;color:#b91111;font-family:open sans,arial,sans-serif;">$prodRec[1].price$</p> </td> <td width="20"></td> <td width="200" align="center"> <p style="margin: 0;padding:0;font-size:20px;color:#b91111;font-family:open sans,arial,sans-serif;">$prodRec[2].price$</p> </td> <td width="20"></td> <td width="200" align="center"> <p style="margin: 0;padding:0;font-size:20px;color:#b91111;font-family:open sans,arial,sans-serif;">$prodRec[3].price$</p> </td> <td width="20"></td> </tr> </table> </td> </tr> <!--break--> <tr> <td height="15"></td> </tr> <!--button--> <tr> <td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff"> <tr> <td width="20"></td> <td width="200" align="center" bgcolor="#3a3963" height="30"> <p style="margin: 0;padding:0px;font-size:20px;color:#ffffff;font-family:open sans,arial,sans-serif;"><a href="$prodRec[1].url$" style="text-decoration: none; color: #ffffff">ZOBACZ</a></p> </td> <td width="20"></td> <td width="200" align="center" bgcolor="#3a3963" height="30"> <p style="margin: 0;padding:0px;font-size:20px;color:#ffffff;font-family:open sans,arial,sans-serif;"><a href="$prodRec[2].url$" style="text-decoration: none; color: #ffffff">ZOBACZ</a></p> </td> <td width="20"></td> <td width="200" align="center" bgcolor="#3a3963" height="30"> <p style="margin: 0;padding:0px;font-size:20px;color:#ffffff;font-family:open sans,arial,sans-serif;"><a href="$prodRec[3].url$" style="text-decoration: none; color: #ffffff">ZOBACZ</a></p> </td> <td width="20"></td> </tr> </table> </td> </tr> </table>