OC administrácia -> Predaj -> E-mail
Nastavíme si:
Od: "Predvolené"
Pre: "Všetci zákazníci"
Predmet: napr. "Opencart.sk 12/10 E-leták"
A teraz prichádza tá komplikovanejšia časť - Správa. Do okna správy (Po kliknutí na možnosť "ZDROJ") vložíme nakódovanú jednoduchú HTML stránku.
Poďme sa teda pustiť do kódovania jednoduchej HTML stránky (Ak by sa niekto strácal, http://www.jakpsatweb.cz možno pomôže):
1. Vytvoríme si v grafickom programe nejakú grafickú šablónu, ktorú chceme posielať. Následne ju rozrežeme na potrebné kúsky.
2.Vytvoríme si index.html vložíme mu nasledovný text:
(nechce sa mi vysvetľovať základy HTML, na webe je neskutočne veľa a kvalitných článkov ku kódovaniu.
Upozorňujem len na to, že:
- nepoužívať "background-image"
- používajú sa tabuľky
- nepoužívajte scripty, neprechádza to potom spam filtrami
- obrázky si dajte na server, nech neposielate 10 000 x 2 megové správy, ale len text
- nikdy neposielajte iba obrázky, dajte si záležať a používajte viac čo najviac textu, mail klienti často hneď nezobrazujú obrázky, tak aby ste neposielali prázdne správy )
Kód: Vybrať všetko
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor='#fff' style="background-color:#fff;">
<table width="95%" cellpadding="0" cellspacing="0" class="backgroundTable" bgcolor='#fff' style="background-color:#fff;">
<tr>
<td align="center" style="background-color:#fff;">
<table width="550" cellpadding="0" cellspacing="0" class="backgroundTable" bgcolor='#fff' style="background-color:#fff;">
<tr>
<td align="center" style="background-color:#fff;">
<!-- odkaz panel pre online e-mail, stránku a download e-mail -->
<table width="550" cellpadding="0" cellspacing="10">
<tr>
<td style="background-color:#fff;border-top:0px solid #000000;border-bottom:0px solid #fff;text-align:center;font-size:10px;color:#565656;font-family:verdana;" align="center">Prezrite si našu <a href="http://www.opencart.sk" style="font-size:10px;color:#3c3c3c;font-family:verdana;text-decoration:underline;">webstránku</a></td>
<td style="background-color:#fff;border-top:0px solid #000000;border-bottom:0px solid #fff;text-align:center;font-size:10px;color:#565656;font-family:verdana;" align="center">Nezobrazuje sa Vám e-mail správne? <a href="http://www.okmedia.sk/mail/tut/index.html" style="font-size:10px;color:#3c3c3c;font-family:verdana;text-decoration:underline;">Prezrite si ho "online" v prehliadači</a></td>
</tr>
</table>
<!-- Koniec odkaz panel pre online e-mail, stránku a download e-mail -->
<!-- Telo -->
<!-- hlavička, logo -->
<table width="550" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color:#fff;border-top:0px solid #dc002e;border-bottom:0px solid #fff; float:left; width:273px;"> <a href="http://www.opencart.sk" title="Slovenská podpora Opencart"><img src="http://www.okmedia.sk/mail/tut/img/head_1.jpg" width="273" height="96" border="0" alt="Logo Opencart" title="Slovenská podpora Opencart" style="display: block; float:left;"/> </a></td>
<td style="background-color:#003770;" width="277">
<p style="font-size:24px;color:#fff;line-height:100%;font-family:calibri; margin:0px 0px 0px 0px; text-align:center; text-shadow:2px 2px 0px #2462a2;"> OpenCart.sk</p>
<p style="font-size:18px;color:#fff;line-height:100%;font-family:calibri; margin:0px 0px 0px 0px;font-style: italic; text-align:center; text-shadow:2px 2px 0px #2462a2;"> Slovenská podpora</p>
</td>
</tr>
</table>
<!-- koniec hlavička, logo -->
<!-- tieň hlavičky -->
<table width="550" cellpadding="0" cellspacing="0">
<tr> <img src="http://www.okmedia.sk/mail/tut/img/head_2.jpg" width="550" height="34" border="0" alt="tieň hlavičky" title="Tieň hlavičky" style="display: block;"/></tr>
</table>
<!-- koniec tieň hlavičky -->
<!-- Tovar číslo 1-->
<table width="550" cellpadding="0" cellspacing="0" bgcolor='#2462a2' style="background-color:#2462a2;">
<tr>
<td> <a href="http://ukazka.opencart.sk/index.php?route=product/product&product_id=51" > <img src="http://www.okmedia.sk/mail/tut/img/tovar2.jpg" width="275" height="240" border="0" alt="HP LP3065" title="HP LP3065" style="float:left" /> </a></td>
<td style="background-color:#2462a2;border-top:0px solid #848484;border-bottom:0px solid #848484;border-left:0px solid #848484;border-right:0px solid #848484;">
<span style="font-size:22px;color:#fff;line-height:100%;font-family:garand; margin:0px 0px 0px 0px; text-align:left; margin:10px; text-shadow: 2px 2px 1px #333;">HP LP3065 </span>
<p style="font-size:18px;color:#dcdcdc;line-height:100%; text-shadow: 1px 1px 0px #000;font-family:garand; margin:0px 0px 0px 0px; text-align:left">
<br />
Cena: 1,000.00€ <br />
Dostupnosť: Skladom <br />
Výrobca: Hewlett-Packard<br />
</p>
<p style="font-size:15px;color:#dcdcdc;line-height:100%;text-shadow: 1px 1px 0px #000;font-family:garand; margin:0px 0px 0px 0px;font-style: italic; text-align:justify; padding:10px;">
Stop your co-workers in their tracks with the stunning new 30-inch diagonal HP LP3065 Flat Panel Monitor.
</p>
<a href="http://ukazka.opencart.sk/index.php?route=checkout/cart&product_id=51" target="_blank"> <img src="http://www.okmedia.sk/mail/tut/img/buy.jpg" width="233" height="58" border="0" alt="kúpiť" title="Kúpiť" style="float:left" /> </a>
</td>
</tr>
</table>
<!-- koniec Tovar číslo 1-->
<!-- Tovar číslo 2-->
<table width="550" cellpadding="0" cellspacing="0" bgcolor='#2462a2' style="background-color:#2462a2;">
<tr>
<td style="background-color:#2462a2;border-top:0px solid #848484;border-bottom:0px solid #848484;border-left:0px solid #848484;border-right:0px solid #848484;">
<p style="font-size:22px;color:#fff;line-height:100%;font-family:garand; margin:0px 0px 0px 0px; text-align:right; margin:10px; text-shadow: 2px 2px 1px #333;">Canon EOS 5D </p>
<p style="font-size:18px;color:#dcdcdc;line-height:100%; text-shadow: 1px 1px 0px #000;font-family:garand; margin:0px 0px 0px 0px; text-align:right; padding:0px;">
Cena: 100.00€ <br />
Dostupnosť: Skladom <br />
Výrobca: Canon<br />
</p>
<p style="font-size:15px;color:#dcdcdc;line-height:100%;text-shadow: 1px 1px 0px #000;font-family:garand; margin:0px 0px 0px 0px;font-style: italic; text-align:justify; padding:10px;">
Canon's press material for the EOS 5D states that it 'defines (a) new D-SLR category', while we're not typically too concerned with marketing talk this particular statement is clearly pretty accurate.
</p>
<a href="http://ukazka.opencart.sk/index.php?route=checkout/cart&product_id=50" target="_blank"> <img src="http://www.okmedia.sk/mail/tut/img/buy.jpg" width="233" height="58" border="0" alt="kúpiť" title="Kúpiť" style="float:right" /> </a>
</td>
<td> <a href="http://ukazka.opencart.sk/index.php?route=product/product&product_id=50" target="_blank"> <img src="http://www.okmedia.sk/mail/tut/img/tovar1.jpg" width="275" height="240" border="0" alt="Canon EOS 5D" title="Canon EOS 5D" style="float:right" /> </a> </td>
</tr>
</table>
<!-- koniec Tovar číslo 2-->
<!-- Tovar číslo 3-->
<table width="550" cellpadding="0" cellspacing="0" bgcolor='#2462a2' style="background-color:#2462a2;">
<tr>
<td> <a href="http://ukazka.opencart.sk/index.php?route=product/product&product_id=52" > <img src="http://www.okmedia.sk/mail/tut/img/tovar3.jpg" width="275" height="240" border="0" alt="HTC Touch HD" title="HTC Touch HD" style="float:left" /> </a></td>
<td style="background-color:#2462a2;border-top:0px solid #848484;border-bottom:0px solid #848484;border-left:0px solid #848484;border-right:0px solid #848484;">
<span style="font-size:22px;color:#fff;line-height:100%;font-family:garand; margin:0px 0px 0px 0px; text-align:left; margin:10px; text-shadow: 2px 2px 1px #333;">HTC Touch HD </span>
<p style="font-size:18px;color:#dcdcdc;line-height:100%; text-shadow: 1px 1px 0px #000;font-family:garand; margin:0px 0px 0px 0px; text-align:left">
<br />
Cena: 484.44€ <br />
Dostupnosť: Skladom <br />
Výrobca: HTC<br />
</p>
<p style="font-size:15px;color:#dcdcdc;line-height:100%;text-shadow: 1px 1px 0px #000;font-family:garand; margin:0px 0px 0px 0px;font-style: italic; text-align:justify; padding:10px;">
HTC Touch - in High Definition. Watch music videos and streaming content in awe-inspiring high definition clarity for a mobile experience you never thought possible.
</p>
<a href="http://ukazka.opencart.sk/index.php?route=checkout/cart&product_id=52" target="_blank"> <img src="http://www.okmedia.sk/mail/tut/img/buy.jpg" width="233" height="58" border="0" alt="kúpiť" title="Kúpiť" style="float:left" /> </a>
</td>
</tr>
</table>
<!-- koniec Tovar číslo 3-->
<!-- pätička horný tieň -->
<table width="550" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color:#fff;border-top:0px solid #dc002e;border-bottom:0px solid #fff;"> <img src="http://www.okmedia.sk/mail/tut/img/foot_2.jpg" width="550" height="44" border="0" alt="www.opencart.sk" title="Slovenská podpora OpenCart" style="display: block;"/> </a></td>
</tr>
</table>
<!-- Koniec pätička horný tieň -->
<!-- pätička text -->
<table width="550" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color:#003770;border-top:0px solid #dc002e;border-bottom:0px solid #fff; padding:0 0 10px 0;">
<p style="font-size:22px;color:#fff;line-height:100%;font-family:garand; margin:0px 0px 0px 0px; text-align:center; margin:10px; text-shadow: 2px 2px 1px #333;">
Pre každého zákazníka máme priravený darček :)
</p>
</td>
</tr>
</table>
<!-- Koniec pätička text -->
<br /><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
- pretože keby sme zadávali relatívne cesty, museli by sme obrázky posielať na každú jednu e-mail adresu.
3. všetky narezané obrázky a index.html si uložíme na server
4. HTML kód ktorý sme si napísali do index.html si skopírujeme a vložíme do "Text správy" (Nezabudnite ale pracovať v režime "zdroj" aby sa vám nezobrazoval formátovaný text). Až keď skopírujte html kód tak si prepnite režim a uvidíte výsledok svojej práce.
5. posledným krokom, je už len kliknúť vpravo hore "Odoslať"
Zobraziť Demo E-mailu