HTML-Bestätigungsmail

Aktuell stelle ich meinen gesamten eMail-Verkehr auf HTML um. 

Dazu habe ich mit einem (externen) HTML-eMail-Editor Mails erstellt, wenn ich aber nun den reinen Code in das entsprechende Feld, z.B. der Registirerungs-Bestätigungsmail, innerhalb des SW-Backends hineinkopiere, erscheint folgende Fehlermeldung beim Testversand: 

Muß bei der verwendeten Shopware-Syntax etwas besonderes beachtet werden?

Shopware stört sich am Eintrag decoration: none. Kennt sich hier jemand damit aus und kann vielleicht einen Tip geben?

Du musst das CSS aus der HTML löschen. Smarty stört es sonst. Gruß Heiner

1 Like

Smarty stört sich an den Geschweiften Klammern.

Hast du da Javascript mit drin?

Generell musst du Javascript in {literal}{/literal} Tags setzen, damit das in Smarty funktioniert.

1 Like

Ja, daran liegt es; vielen Dank für den Hinweis.

Könnt Ihr einen HTML-Editor empfehlen (idealer Weise speziell für E-Mails), der KEINE CSS-Funktion aufweist!

Gibt es sonst eine Möglichkeit, aus Shopware heraus Bestätigungsmails zu versenden, welche CSS enthalten?

Hallo,

einfach (wie Shopware selbst) inline - CSS verwenden, dann gibt es keine Probleme (also beim Link < a href=“test123.html” style=“text-decoration: none;”>Link< / a >). Ist auch das Beste, damit es auch alle (Handy-)E-Mail-Programme korrekt anzeigen.

Grüße

Sebastian

Ich würde ein extra dafür konzipirtes Editierprogramm bevorzugen, damit ich nicht auf der Codeoberfläche arbeiten muß, falls es sowas gibt …

Welcher Editor wird empfohlen?

Hallo,

http://lmgtfy.com/?q=html+editor+email+inline+css+generator bzw. CSS Inliner Tool | Email Design Reference . HTML-Code aus dem externen HTML-E-Mail-Editor rein, inline-CSS kommt raus - das akzeptiert dann auch die E-Mail-Vorlage. Von Shopware gibt es da sonst nichts.

Grüße

Sebastian

1 Like

Handelt es sich bei dem nachfolgenden Quellcode um inline-CSS?

         Registrierung Test @media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important } h1 {
 font-size:30px!important; text-align:center } h2 { font-size:26px!important; text-align:center } h3 { font-size:20px!important; text-align:center } h1 a { font-size:30px!important } h2 a { font-size:26px!important } h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:11px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:14px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important }
 .es-button { font-size:20px!important; display:block!important; border-left-width:0px!important; border-right-width:0px!important; border-top-width:0px!important; border-bottom-width:0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important;
 overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } } #outlook a { padding:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; } .es-button { mso-style-priority:100!important; text-decoration:none!important; } a[x-apple-data-detectors] { color:inherit!important; text-decoration:none!important; font-size:inherit!important; font-family:inherit!important; font-weight:inherit!important; line-height:inherit!important; } .es-desk-hidden { display:none; float:left; overflow:hidden; width:0; max-height:0; line-height:0; mso-hide:all; } Test                 

 

Teile davon. Inline wäre sowas:

Du hast bei dir allerdings einen Style-Tag drin und da wird CSS reingepackt und auch media-queries...


  </code></pre>

<p>Die media-queries (@media) werden auch nicht von jedem Mail-Programm unterstützt.<br />
Gerade bei Mails muss man deutlich mehr die einzelnen Anbieter durchtesten, da es nicht wie bei Browsern eine breite Unterstützung für alle CSS Funktionen gibt.</p>
1 Like