Page 1 of 2

Payment Email Design

Posted: 27 Jun 2018, 14:28
by Mightrider
Hi there,

I am currently working on the payment emails.
Right now they look like shown in the pictures below.
Is there a way to obtain the design seen in the documentation linked below or is there another more polished version available?

https://aimeos.org/docs/Configuration/C ... ment_email


Thank you in advance for your support!

Local installation, MacOS High Sierra
php: 7.1.4,
laravel/framework: 5.4,
aimeos/aimeos-laravel: 2018.04

Re: Payment Email Design

Posted: 27 Jun 2018, 22:27
by aimeos
Which e-mail client do you use? Looks like your e-mail client doesn't support CSS very well or the standard CSS was not included in the e-mail due to a change you've made.

Re: Payment Email Design

Posted: 28 Jun 2018, 07:46
by Mightrider
I looked at it in the Mac Mail client and the gmail web view. Both show the same results.
So far i did not change anything in the *-standard.php files.

I attached the original code I recieved.

Code: Select all

Content-Type: multipart/alternative; boundary="_=_swift_v4_1530171532_98b1b1f748785d95ecbe2a41fe6a3312_=_"
X-MailGenerator: Aimeos

--_=_swift_v4_1530171532_98b1b1f748785d95ecbe2a41fe6a3312_=_
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: quoted-printable

Dear Mrs Test Tester



Thank you for your order 35 from 06/28/2018.


Billing address:
Mrs  Test Tester<br/> Some Street<br/>City  1111<br/>Austria<br/>English<br=
/>test@gmail.com

Delivery address:
like billing address


Delivery: Click & Collect
- Pick-up location: demo-test1
- Pick-up time: 10:22

Payment: Cash on delivery


Coupons:

Your comment:



Order details:

Demo article (demo-article)
- price: Your price
Quantity: 1
Price: =E2=82=AC 100.00
Sum: =E2=82=AC 100.00

Sub-total: =E2=82=AC 100.00
+ Shipping: =E2=82=AC 5.00
+ Payment costs: =E2=82=AC 8.00
Total: =E2=82=AC 113.00
Incl. 20.00% VAT: =E2=82=AC 18.83


If you have any questions, please reply to this e-mail

All orders are subject to our terms and conditions.

--_=_swift_v4_1530171532_98b1b1f748785d95ecbe2a41fe6a3312_=_
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

<html>
=09<head>
=09=09<title>E-mail notification</title>
=09=09<meta name=3D"application-name" content=3D"Aimeos" />
=09=09<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf=
-8" />
=09=09<style type=3D"text/css">
            html, body, div, span, applet, object, iframe, h1, h2, h3, h4, =
h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code, del, dfn, em, img, =
ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, =
dt, dd, ol, ul, li,
            fieldset, form, label, legend, table, caption, tbody, tfoot, th=
ead, tr, th, td,
            article, aside, canvas, details, embed, figure, figcaption, foo=
ter, header, hgroup,
            menu, nav, output, ruby, section, summary, time, mark, audio, v=
ideo {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }
            /* HTML5 display-role reset for older browsers */
            article, aside, details, figcaption, figure, footer, header, hg=
roup, menu, nav, section {
                display: block;
            }

           =20
        </style>
=09</head>
=09<body>
=09=09<div class=3D"aimeos">

=09=09=09
=09=09=09<p class=3D"email-common-salutation content-block">
=09=09=09=09Dear Mrs Test Tester=09=09=09</p>

=09=09=09<p class=3D"email-common-intro content-block">
=09Thank you for your order 35 from 06/28/2018.</p>

=09=09=09<div class=3D"common-summary content-block">

=09<div class=3D"common-summary-address container">
=09=09<div class=3D"item payment">
=09=09=09<div class=3D"header">
=09=09=09=09<h3>Billing address</h3>
=09=09=09</div>

=09=09=09<div class=3D"content">
=09=09=09=09=09=09=09=09=09Mrs  Test Tester<br/> Some Street<br/>City  1111=
<br/>Austria<br/>English<br/>test@gmail.com=09=09=09=09=09=09=09<=
/div>
=09=09</div><!--

=09=09--><div class=3D"item delivery">
=09=09=09<div class=3D"header">
=09=09=09=09<h3>Delivery address</h3>
=09=09=09</div>

=09=09=09<div class=3D"content">
=09=09=09=09=09=09=09=09=09like billing address=09=09=09=09=09=09=09</div>
=09=09</div>
=09</div>


=09<div class=3D"common-summary-service container">
=09=09<div class=3D"item delivery">
=09=09=09<div class=3D"header">
=09=09=09=09<h3>Delivery</h3>
=09=09=09</div>

=09=09=09<div class=3D"content">
=09=09=09=09=09=09=09=09=09=09<div class=3D"item">
=09=09=09=09=09<div class=3D"item-icons">
=09=09=09=09<img src=3D"http://demo.aimeos.org/media/service/pickup.png" />
=09=09=09</div>
=09=09=09=09<h4>Click & Collect</h4>
=09</div>

=09=09=09<ul class=3D"attr-list">

=09=09=09=09=09=09=09
=09=09=09=09=09<li class=3D"delivery-supplier.code">

=09=09=09=09=09=09<span class=3D"name">
=09=09=09=09=09=09=09=09=09=09=09=09=09=09=09Pick-up location=09=09=09=09=
=09=09=09=09=09=09=09=09=09</span>

=09=09=09=09=09=09=09=09=09=09=09=09=09<span class=3D"value">demo-test1</sp=
an>
=09=09=09=09=09=09
=09=09=09=09=09</li>

=09=09=09=09=09=09=09=09=09=09=09
=09=09=09=09=09<li class=3D"delivery-time.hourminute">

=09=09=09=09=09=09<span class=3D"name">
=09=09=09=09=09=09=09=09=09=09=09=09=09=09=09Pick-up time=09=09=09=09=09=09=
=09=09=09=09=09=09=09</span>

=09=09=09=09=09=09=09=09=09=09=09=09=09<span class=3D"value">10:22</span>
=09=09=09=09=09=09
=09=09=09=09=09</li>

=09=09=09=09=09=09=09
=09=09</ul>
=09=09=09=09=09=09=09=09</div>
=09=09</div><!--

=09=09--><div class=3D"item payment">
=09=09=09<div class=3D"header">
=09=09=09=09<h3>Payment</h3>
=09=09=09</div>

=09=09=09<div class=3D"content">
=09=09=09=09=09=09=09=09=09=09<div class=3D"item">
=09=09=09=09<h4>Cash on delivery</h4>
=09</div>

=09=09=09=09=09=09=09=09</div>
=09=09</div>

=09</div>


=09<div class=3D"common-summary-additional container">
=09=09<div class=3D"item coupon">
=09=09=09<div class=3D"header">
=09=09=09=09<h3>Coupon codes</h3>
=09=09=09</div>

=09=09=09<div class=3D"content">
=09=09=09=09=09=09=09</div>
=09=09</div><!--

=09=09--><div class=3D"item comment">
=09=09=09<div class=3D"header">
=09=09=09=09<h3>Your comment</h3>
=09=09=09</div>

=09=09=09<div class=3D"content">
=09=09=09=09=09=09=09</div>
=09=09</div>
=09</div>


=09<div class=3D"common-summary-detail container">
=09=09<div class=3D"header">
=09=09=09<h2>Details</h2>
=09=09</div>

=09=09<div class=3D"basket">
=09=09=09<table>

=09<thead>
=09=09<tr>
=09=09=09<th class=3D"details"></th>
=09=09=09<th class=3D"quantity">Quantity</th>
=09=09=09<th class=3D"unitprice">Price</th>
=09=09=09<th class=3D"price">Sum</th>
=09=09=09=09=09</tr>
=09</thead>

=09<tbody>

=09=09=09=09=09<tr class=3D"product ">

=09=09=09=09<td class=3D"details">

=09=09=09=09=09=09=09=09=09=09=09<img src=3D"https://demo.aimeos.org/media/=
1.jpg" />
=09=09=09=09=09
=09=09=09=09=09=09=09=09=09=09<a class=3D"product-name" href=3D"https://test.org/detail/1/Demo_article/en?site=3Ddefault&currency=3DE=
UR">
=09=09=09=09=09=09Demo article=09=09=09=09=09</a>

=09=09=09=09=09<p class=3D"code">
=09=09=09=09=09=09<span class=3D"name">Article no.:</span>
=09=09=09=09=09=09<span class=3D"value">demo-article</span>
=09=09=09=09=09</p>

=09=09=09=09=09=09=09=09=09=09=09<ul class=3D"attr-list attr-type-variant">
=09=09=09=09=09=09=09=09=09=09=09=09=09</ul>
=09=09=09=09=09

=09=09=09=09=09

=09=09=09=09=09=09=09=09=09=09=09<ul class=3D"attr-list attr-list-custom">

=09=09=09=09=09=09=09=09=09=09=09=09=09=09=09<li class=3D"attr-item attr-co=
de-price">
=09=09=09=09=09=09=09=09=09<span class=3D"name">price</span>
=09=09=09=09=09=09=09=09=09<span class=3D"value">100.00</span>
=09=09=09=09=09=09=09=09</li>
=09=09=09=09=09=09=09
=09=09=09=09=09=09</ul>
=09=09=09=09=09

=09=09=09=09=09
=09=09=09=09</td>


=09=09=09=09<td class=3D"quantity">
=09=09=09=09=09=09=09=09=09=09=091=09=09=09=09=09=09=09=09=09</td>


=09=09=09=09<td class=3D"unitprice">=E2=82=AC 100.00</td>
=09=09=09=09<td class=3D"price">=E2=82=AC 100.00</td>


=09=09=09=09
=09=09=09</tr>
=09=09

=09=09

=09=09
=09</tbody>


=09<tfoot>

=09=09=09=09=09<tr class=3D"subtotal">
=09=09=09=09<td colspan=3D"3">Sub-total</td>
=09=09=09=09<td class=3D"price">=E2=82=AC 100.00</td>
=09=09=09=09=09=09=09</tr>
=09=09
=09=09=09=09=09<tr class=3D"delivery">
=09=09=09=09<td colspan=3D"3">Shipping</td>
=09=09=09=09<td class=3D"price">=E2=82=AC 5.00</td>
=09=09=09=09=09=09=09</tr>
=09=09
=09=09=09=09=09<tr class=3D"payment">
=09=09=09=09<td colspan=3D"3">Payment costs</td>
=09=09=09=09<td class=3D"price">=E2=82=AC 8.00</td>
=09=09=09=09=09=09=09</tr>
=09=09
=09=09=09=09=09<tr class=3D"total">
=09=09=09=09<td colspan=3D"3">Total</td>
=09=09=09=09<td class=3D"price">=E2=82=AC 113.00</td>
=09=09=09=09=09=09=09</tr>
=09=09
=09=09=09=09=09=09=09=09=09<tr class=3D"tax">
=09=09=09=09=09=09=09=09=09=09=09<td colspan=3D"3">Incl. 20.00% VAT</td>
=09=09=09=09=09=09=09=09=09=09=09<td class=3D"price">=E2=82=AC 18.83</td>
=09=09=09=09=09=09=09=09=09</tr>
=09=09=09=09=09=09=09=09=09=09
=09=09
=09=09
=09=09<tr class=3D"quantity">
=09=09=09<td colspan=3D"3">Total quantity</td>
=09=09=09<td class=3D"value">1 article</td>
=09=09=09=09=09</tr>

=09</tfoot>

</table>
=09=09</div>
=09</div>

</div>

=09=09=09<p class=3D"email-common-outro content-block">
=09=09=09=09If you have any questions, please reply to this e-mail=09=09=09=
</p>

=09=09=09<p class=3D"email-common-legal content-block">
=09=09=09=09All orders are subject to our terms and conditions.=09=09=09</p=
>

=09=09</div>

=09</body>
</html>


--_=_swift_v4_1530171532_98b1b1f748785d95ecbe2a41fe6a3312_=_--

Re: Payment Email Design

Posted: 29 Jun 2018, 10:27
by aimeos
The HTML head in your example doesn't contain the additional CSS to style the content. Not sure why at the moment :-/

Re: Payment Email Design

Posted: 29 Jun 2018, 11:23
by Mightrider
Which file is it?
Where should this CSS file been located in my project?

Re: Payment Email Design

Posted: 29 Jun 2018, 19:08
by aimeos

Re: Payment Email Design

Posted: 02 Jul 2018, 09:41
by Mightrider
Thank you very much!

Somehow it is unable to load the CSS file from the relative path. The file_exists( $filepath) returns false. If I hardcode the path it is working...

Re: Payment Email Design

Posted: 03 Jul 2018, 13:55
by aimeos
If you adapt the configuration in ./config/shop.php it works without changing the code:

Code: Select all

	'client' => [
		'html' => [
			'common' => [
				'content' => [
					'baseurl' => env('APP_URL', '/'),
				],
				'template' => [
					'baseurl' => public_path( 'packages/aimeos/shop/themes/elegance' ),
				],
			],
		],
	],
This configuration settings will be the defaults in the next version.

Re: Payment Email Design

Posted: 03 Jul 2018, 15:23
by Mightrider
Thank you very much for your help!
Everything is working now as expected.

Re: Payment Email Design

Posted: 06 Jul 2018, 08:55
by Mightrider
Hey again,

I run into an additional problem now. After adding my own products to the store the images are not shown in the emails anymore.

Code: Select all

=09=09=09=09<td class=3D"details">

=09=09=09=09=09=09=09=09=09=09=09<img src=3D"/preview/3/6/361eb7cd6a94d92e2=
fec880ccadc9571.jpg" />
=09=09=09=09=09
For me it looks like it, that there is the first part missing which leads to the homepage hosting the image.
Did i do something wrong during the configuration?

Thx in advance for your help!