Customize invoice emails

  • Posts: 140
  • Thank you received: 0
8 years 2 months ago #248961

-- HikaShop version -- : Business: 2.6.3
-- Joomla version -- : 3.6.2
-- PHP version -- : 5.5.35
-- Browser(s) name and version -- : NA
-- Error-message(debug-mod must be tuned on) -- : NA

One area where your product is extremely confusing is the aspect of customizing emails.
I am trying to customize the invoices and it's frustrating.
There is stuff in Display - View
There is stuff in Settings - Email
There is stuff in the Language file
Maybe other places too.

It sure would be nice to have a simple visual editor to configure the look of the communication.

If I pull up an order, there is a button at the top to email. Here I can send a second email out to a customer manually, and I can edit it with JCE. There are some fonts that are white on a white background. I don't know how it got that way, it may be following other css I have.

I can look in Settings - Email and see what I think is the email template for this, I do not have the ability to edit this with JCE.
but there is no white font. I even tried setting a <span style="color:#000 !important;font-size:12px;font-weight:bold;"> but that does not affect what I see in the area I describe in the paragraph above.

How do I fix this and why does it have to be so complicated?

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #248975

Hi,

There are no invoices in the emails that HikaShop send by default.
I suppose that you're talking about customizing the "order notifications" which are sent to the customers and not the invoice which can be printed on the website.

So in an email you have different things:
- Texts. Why are they in translation files ? Because they can be translated. And this has to be done automatically by HikaShop. If we put the texts directly in the emails, you would be able to only send the emails in one language.
- Addresses. Why do you have to edit their display through Display>Views ? Because the same view are used in the backend display of the orders, the checkout, the frontend display of the order, the invoice, the shipping invoice. So it's actually faster for you to have the address template at only one place for everywhere so that you only have to edit it twice (frontend and backend) and not 20 times for each places where it is used.
- the rest of the email. All the rest in available when you customize the emails via the menu System>Emails.

So it doesn't sounds like there are so many pieces everywhere like you say. The only things that you can't directly edit in the emails, it's because it makes sense that you can't do it there.

Why is there no WYSIWYG edition ? Because the notification emails are dynamic and it makes it much more complex to have a WYSIWYG edition than say editing a newsletter email, which is only in one language, doesn't have dynamic products, customer information, etc. Is it possible to do ? Well, anything is possible with enough time and skills so possibly we could do it, and we definitely want to improve the email edition in the future and we're starting wroking on that for HikaShop 3.

When you click on the "email" button of the backend order details page, you see the generated email displayed but you have to take into account that the CSS of your backend template and of the backend of HikaShop are also loaded on the page and thus might affect some of the elements of the email.
Normally, the default template of the backend and the default backend CSS of HikaShop do not affect that email.
So I suppose that you must have some customization of the CSS or a different template which has CSS affecting the emails.
So it's not really the email CSS that you should change since the CSS causing the issue won't be added to the email that is sent. It's the CSS of your backend that you need to adapt so that it doesn't mess the preview of the email in the popup.

Now I can't give an exact solution since that problem doesn't occur by default and we don't know how is your CSS in your backend.

Please Log in or Create an account to join the conversation.

  • Posts: 140
  • Thank you received: 0
8 years 2 months ago #249009

So when I send an email order notification from the back end, it uses the back end css, but if Hikashop sends it automatically, it uses a different css? Where would I change the css tags on these elements? Then I could create my own style and know what I'm editing.

as for the wysiwig, It shouldn't be too hard to at least allow JCE to work for the html part of settings-email is it? I can copy and paste the code into dreamweaver and it gives me at least some visual reference.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #249011

Hi,

1. No. That's not what I said.
The CSS of that is added in the emails that are sent, automatically or not, is always the CSS that you can add directly in the email.

However, on the preview of the email in the backend, the CSS of the backend is added to the display.

So if you want to add custom CSS to the emails, you can directly add it to the email HTML version when you edit the email.

2. No, for example, JCE won't be able to display the images and links in the email as the paths are dynamic. And that's just an example. Another one is the custom product field tags which are in the middle of the table of the products listing, and that's not valid HTML either. So it would require processing some of the tags for the display in the editor, and then processing the email HTML back when you save the changes to put back the tags as they need to be dynamic.
So it's not straight forward. It's possible to do it but if we do it, we want to do it properly. As I said, we're working on improving it...

Please Log in or Create an account to join the conversation.

  • Posts: 140
  • Thank you received: 0
8 years 2 months ago #249029

Where does the CSS come from for the order notification emails by default?

Last edit: 8 years 2 months ago by zipadyduda.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #249033

Hi,

As I said already, the CSS in the emails come from the HTML version of the emails.
For example, if you edit the "order creation notification" email via the menu System>Emails, you'll see that CSS in the HTML version:

<style type="text/css">
body.hikashop_mail { background-color:#ffffff; color:#575757; }
.ReadMsgBody{width:100%;}
.ExternalClass{width:100%;}
div, p, a, li, td {-webkit-text-size-adjust:none;}
@media (min-width:600px){
	#hikashop_mail {width:600px !important;margin:auto !important;}
	.pict img {max-width:500px !important;height:auto !important;}
}
@media (max-width:330px){
	#hikashop_mail{width:300px !important; margin:auto !important;}
	table[class=w600], td[class=w600], table[class=w598], td[class=w598], table[class=w500], td[class=w500], img[class="w600"]{width:100% !important;}
	td[class="w49"] { width: 10px !important;}
	.pict img {max-width:278px; height:auto !important;}
}
@media (min-width:331px) and (max-width:480px){
	#hikashop_mail{width:450px !important; margin:auto !important;}
	table[class=w600], td[class=w600], table[class=w598], td[class=w598], table[class=w500], td[class=w500], img[class="w600"]{width:100% !important;}
	td[class="w49"] { width: 20px !important;}
	.pict img {max-width:408px;  height:auto !important;}
}
h1{color:#1c8faf;font-size:16px;font-weight:bold;border-bottom:1px solid #ddd; padding-bottom:10px;}
h2{color:#89a9c1;font-size:14px;font-weight:bold;margin-top:20px;margin-bottom:5px;border-bottom:1px solid #d6d6d6;padding-bottom:4px;}
a:visited{cursor:pointer;color:#2d9cbb;text-decoration:none;border:none;}
</style>

Please Log in or Create an account to join the conversation.

  • Posts: 140
  • Thank you received: 0
8 years 2 months ago #249152

There is no place in my System>Emails HTML that would indicate font color FFF or FFFFFF.
But I am getting white text on a couple areas. So clearly this css is coming from somewhere else.
And even though I added the style tag to make it black, I still see white text in my order notifications.




<?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.3.5
 * @author	hikashop.com
 * @copyright	(C) 2010-2015 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?><style type="text/css">
body.hikashop_mail { background-color:#ffffff; color:#575757; }
.ReadMsgBody{width:100%;}
.ExternalClass{width:100%;}
div, p, a, li, td {-webkit-text-size-adjust:none;}
@media (min-width:600px){
	#hikashop_mail {width:600px !important;margin:auto !important;}
	.pict img {max-width:500px !important;height:auto !important;}
}
@media (max-width:330px){
	#hikashop_mail{width:300px !important; margin:auto !important;}
	table[class=w600], td[class=w600], table[class=w598], td[class=w598], table[class=w500], td[class=w500], img[class="w600"]{width:100% !important;}
	td[class="w49"] { width: 10px !important;}
	.pict img {max-width:278px; height:auto !important;}
}
@media (min-width:331px) and (max-width:480px){
	#hikashop_mail{width:450px !important; margin:auto !important;}
	table[class=w600], td[class=w600], table[class=w598], td[class=w598], table[class=w500], td[class=w500], img[class="w600"]{width:100% !important;}
	td[class="w49"] { width: 20px !important;}
	.pict img {max-width:408px;  height:auto !important;}
}
h1{color:#000;font-size:16px;font-weight:bold;border-bottom:1px solid #ddd; padding-bottom:10px;}
h2{color:#89a9c1;font-size:14px;font-weight:bold;margin-top:20px;margin-bottom:5px;border-bottom:1px solid #d6d6d6;padding-bottom:4px;}
a:visited{cursor:pointer;color:#2d9cbb;text-decoration:none;border:none;}
</style>

<div id="hikashop_mail" style="font-family:Arial, Helvetica,sans-serif;font-size:12px;line-height:18px;width:100%;background-color:#ffffff;padding-bottom:20px;color:#5b5b5b;">
	<!--{IF:USER_ACCOUNT}-->
	<div class="hikashop_online" style="font-family:Arial, Helvetica,sans-serif;font-size:11px;line-height:18px;color:#6a5c6b;text-decoration:none;margin:10px;text-align:center;">
		<a style="cursor:pointer;color:#2d9cbb;text-decoration:none;border:none;" href="{VAR:URL}">
			<span class="hikashop_online" style="color:#6a5c6b;text-decoration:none;font-size:11px;margin-top:10px;margin-bottom:10px;text-align:center;">
				{TXT:MAIL_HEADER}
			</span>
		</a>
	</div>
	<!--{ENDIF:USER_ACCOUNT}-->
	<table class="w600" style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;margin:auto;background-color:#fff;" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
		<tr style="line-height: 0px;">
			<td class="w600" style="line-height:0px" width="600" valign="bottom">
				<img class="w600" src="https://ce4rt.com/images/logoCE4sm.png" border="0" alt="CE4RT" />
			</td>
		</tr>
		<tr>
			<td class="w600" style="" width="600" align="center">
				<table class="w600" border="0" cellspacing="0" cellpadding="0" width="600" style="margin:0px;font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;">
					<tr>
						<td class="w20" width="20"></td>
						<td class="w560 pict" style="text-align:left; color:#575757" width="560">
							<div id="title" style="font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;">

<img src="https://images/logoCE4sm.png" border="0" alt="" style="float:left;margin-right:4px;"/>
<h1 style="color:#000 !important;font-size:16px;font-weight:bold; border-bottom:1px solid #ddd; padding-bottom:10px">
	{TXT:ORDER_TITLE}
</h1>

<h2 style="color:#000 !important;font-size:12px;font-weight:bold; padding-bottom:10px">
	{TXT:ORDER_CHANGED}
</h2>
							</div>
						</td>
						<td class="w20" width="20"></td>
					</tr>
					<tr>
						<td class="w20" width="20"></td>
						<td style="border:1px solid #adadad;background-color:#ffffff;">
							<div class="w550" width="550" id="content" style="font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;margin-left:5px;margin-right:5px;">
<p>
	<h3 style="color:#393939 !important; font-size:14px; font-weight:normal; font-weight:bold;margin-bottom:0px;padding:0px;">{TXT:HI_CUSTOMER}</h3>
	{TXT:ORDER_BEGIN_MESSAGE}
</p>

<table class="w550" border="0" cellspacing="0" cellpadding="0" width="550" style="margin-top:10px;font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;">
	<tr>
		<td style="color:#000 !important;font-size:12px;font-weight:bold;">{TXT:ORDER_NUMBER} </td>
		<!--{IF:SHIPPING}--><!--{IF:SHIPPING_ADDRESS}--><td style="color:#000 !important;font-size:12px;font-weight:bold;">{TXT:SHIPPING_ADDRESS}</td><!--{ENDIF:SHIPPING_ADDRESS}--><!--{ENDIF:SHIPPING}-->
	</tr>
	<tr style="color:#000">
		{VAR:order.order_number}
		<!--{IF:SHIPPING}--><!--{IF:SHIPPING_ADDRESS}--><td>{VAR:SHIPPING_ADDRESS}</td><!--{ENDIF:SHIPPING_ADDRESS}--><!--{ENDIF:SHIPPING}-->
	</tr>
</table>

<h1 style="color:#000 !important;font-size:16px;font-weight:bold;border-bottom:1px solid #ddd;padding-top:10px;padding-bottom:10px;">
	{TXT:SUMMARY_OF_YOUR_ORDER}
</h1>
<!--{START:VENDOR_LINE}-->
<!--{IF:VENDOR_CONTENT}-->{VAR:VENDOR_CONTENT}<!--{ENDIF:VENDOR_CONTENT}-->
<table class="w550" border="0" cellspacing="0" cellpadding="0" width="550" style="margin-top:10px;margin-bottom:10px;font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;">
	<tr>
		<td style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:left;color:#000 !important;font-size:12px;font-weight:bold;">{TXT:PRODUCT_NAME}</td>
		<td style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right;color:#000 !important;font-size:12px;font-weight:bold;">{TXT:PRODUCT_PRICE}</td>
		<td style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right;color:#000 !important;font-size:12px;font-weight:bold;">{TXT:PRODUCT_QUANTITY}</td>
		<td style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right;color:#000 !important;font-size:12px;font-weight:bold;">{TXT:PRODUCT_TOTAL}</td>
	</tr>
<!--{START:PRODUCT_LINE}-->
	<tr>
		<td style="border-bottom:1px solid #ddd;padding-bottom:3px;">
			{LINEVAR:PRODUCT_IMG}
			{LINEVAR:PRODUCT_NAME}<!--{IF:ORDER_PRODUCT_CODE}--> {LINEVAR:PRODUCT_CODE}<!--{ENDIF:ORDER_PRODUCT_CODE}-->
			{LINEVAR:PRODUCT_DOWNLOAD}
			{LINEVAR:PRODUCT_DETAILS}
		</td>
		<td style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right">{LINEVAR:PRODUCT_PRICE}</td>
		<td style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right">{LINEVAR:PRODUCT_QUANTITY}</td>
		<td style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right">{LINEVAR:PRODUCT_TOTAL}</td>
	</tr>
<!--{END:PRODUCT_LINE}-->
<!--{START:ORDER_FOOTER}-->
	<tr>
		<td colspan="3" style="text-align:right;color:#000 !important;font-size:12px;font-weight:bold;"><span style="color:#000 !important;font-size:12px;font-weight:bold;">{LINEVAR:NAME}</span></td>
		<td style="text-align:right;color:#000">{LINEVAR:VALUE}</td>
	</tr>
<!--{END:ORDER_FOOTER}-->
</table>
<!--{END:VENDOR_LINE}-->
<!--{IF:PAYMENT}-->
<p>
	<span style="color:#000 !important;font-size:12px;font-weight:bold;">{TXT:PAYMENT_METHOD} :</span> {VAR:PAYMENT}
</p>
<!--{ENDIF:PAYMENT}-->
<!--{IF:SHIPPING}-->
<p>
	<span style="color:#000 !important;font-size:12px;font-weight:bold;">{TXT:HIKASHOP_SHIPPING_METHOD} :</span> {VAR:SHIPPING}
</p>
<!--{ENDIF:SHIPPING}-->
<!--{IF:ORDER_SUMMARY}-->
<h1 style="color:#000 !important;font-size:16px;font-weight:bold;border-bottom:1px solid #ddd;padding-top:10px;padding-bottom:10px;">
	{TXT:ADDITIONAL_INFORMATION}
</h1>
<p style="border-bottom:1px solid #ddd;padding-bottom:10px;">
	{VAR:ORDER_SUMMARY}
</p>
<!--{ENDIF:ORDER_SUMMARY}-->
<p>
	{TXT:ORDER_END_MESSAGE}
</p>
							</div>
						</td>
						<td class="w20" width="20"></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr style="line-height: 0px;">
			<td class="w600" style="line-height:0px" width="600" valign="top">
				
			</td>
		</tr>
	</table>
</div>

Last edit: 8 years 2 months ago by nicolas.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #249171

Hi,

Do you mean that this screenshot is from the email notification in your mail box ?
Could you provide a copy of it to contact AT hikashop DOT com along with a link to this thread ?
Could you provide also a backend access so that we can look at the situation ? Because there should be no other CSS than the CSS applied in the email HTML version in the email you receive.

Please Log in or Create an account to join the conversation.

Time to create page: 0.053 seconds
Powered by Kunena Forum