Notifications emails table on mobile

  • Posts: 323
  • Thank you received: 18
  • Hikashop Business
7 months 2 weeks ago #360900

-- HikaShop version -- : 5.0.3

In email notifications table for product line you have right align table cells. When customer looks email on mobile device, there is a problem with quantity (see image).
In example quantity is near sum so it looks like 119 instead 19.
In fact the whole table is poorly designed.

For now I center aligned quantity cell, but it is email override. Maybe add some paddings to all cells or vertikal borders or both?

Attachments:

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

  • Posts: 4763
  • Thank you received: 647
  • MODERATOR
7 months 1 week ago #360951

Hello,

Can you send us the relative email in our Contact us form, here , don't forget to add an url link to this topic.
And precise if your relative email is customized.
From HikaShop Configuration, System dropdown => Emails :

alt


Regards

Last edit: 7 months 1 week ago by Philip.

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

  • Posts: 323
  • Thank you received: 18
  • Hikashop Business
7 months 1 week ago #360990

I dont have modifications. I added now just for text align.
The original:

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	5.0.3
 * @author	hikashop.com
 * @copyright	(C) 2010-2024 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?><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="{VAR:LIVE_SITE}media/com_hikashop/images/icons/icon-48-order.png" border="0" alt="" style="float:left;margin-right:4px;"/>
<h1 class="hika_template_color" style="font-size:16px;font-weight:bold; border-bottom:1px solid #ddd; padding-bottom:10px">
	{TXT:ORDER_TITLE}
</h1>

<h2 class="hika_template_color" style="font-size:12px;font-weight:bold; padding-bottom:10px">
	{TXT:ORDER_CREATED}
</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>
		<!--{IF:BILLING_ADDRESS}--><td class="hika_template_color" style="font-size:12px;font-weight:bold;">{TXT:BILLING_ADDRESS}</td><!--{ENDIF:BILLING_ADDRESS}-->
		<!--{IF:SHIPPING}--><!--{IF:SHIPPING_ADDRESS}--><td class="hika_template_color" style="font-size:12px;font-weight:bold;">{TXT:SHIPPING_ADDRESS}</td><!--{ENDIF:SHIPPING_ADDRESS}--><!--{ENDIF:SHIPPING}-->
	</tr>
	<tr>
		<!--{IF:BILLING_ADDRESS}--><td>{VAR:BILLING_ADDRESS}</td><!--{ENDIF:BILLING_ADDRESS}-->
		<!--{IF:SHIPPING}--><!--{IF:SHIPPING_ADDRESS}--><td>{VAR:SHIPPING_ADDRESS}</td><!--{ENDIF:SHIPPING_ADDRESS}--><!--{ENDIF:SHIPPING}-->
	</tr>
</table>

<h1 class="hika_template_color" style="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 class="hika_template_color" style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:left;font-size:12px;font-weight:bold;">{TXT:PRODUCT_NAME}</td>
		{TXT:CUSTOMFIELD_NAME}
		<td class="hika_template_color" style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right;font-size:12px;font-weight:bold;">{TXT:PRODUCT_PRICE}</td>
		<td class="hika_template_color" style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right;font-size:12px;font-weight:bold;">{TXT:PRODUCT_QUANTITY}</td>
		<td class="hika_template_color" style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:right;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>
		{LINEVAR:CUSTOMFIELD_VALUE}
		<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:center">{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 class="hika_template_color {LINEVAR:CLASS}_label" colspan="{TXT:FOOTER_COLSPAN}" style="text-align:right;font-size:12px;font-weight:bold;">{LINEVAR:NAME}</td>
		<td class="{LINEVAR:CLASS}_value" style="text-align:right">{LINEVAR:VALUE}</td>
	</tr>
<!--{END:ORDER_FOOTER}-->
</table>
<!--{END:VENDOR_LINE}-->
<!--{IF:PAYMENT}-->
<p>
	<span class="hika_template_color" style="font-size:12px;font-weight:bold;">{TXT:PAYMENT_METHOD} :</span> {VAR:PAYMENT}
</p>
<!--{ENDIF:PAYMENT}-->
<!--{IF:SHIPPING}-->
<p>
	<span class="hika_template_color" style="font-size:12px;font-weight:bold;">{TXT:HIKASHOP_SHIPPING_METHOD} :</span> {VAR:SHIPPING}
</p>
<!--{ENDIF:SHIPPING}-->
<!--{IF:ORDER_SUMMARY}-->
<h1 class="hika_template_color" style="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>

Now I changed only
<td style="border-bottom:1px solid #ddd;padding-bottom:3px;text-align:center">{LINEVAR:PRODUCT_QUANTITY}</td>

So original code is making problem with email readability. With that override is better, but you can design emails beter.

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

  • Posts: 4763
  • Thank you received: 647
  • MODERATOR
7 months 1 week ago #360994

Hello,

The problem could come from many other things, and our emails don't look like your described problem, but if you have solved your problem then great.
Regards

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

  • Posts: 323
  • Thank you received: 18
  • Hikashop Business
7 months 1 week ago #361022

Of course they look like that. It is defoult hika email. I just posted the code (version 5.0.3).
Problem is not solved. I have to made override to solve the problem.
So all your users have same problem. You can replicate it. Just open hika notification email in gmail with mobile device.

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

  • Posts: 4763
  • Thank you received: 647
  • MODERATOR
7 months 1 week ago #361024

Hello,

As I said at the beginning, don't lose sight of the fact that several factors can impact the rendering of your emails.
For our part, we note that we have not received any other feedback regarding this display problem on mobiles.

Our rendering on mobile with our default email :

alt


Regards

Last edit: 7 months 1 week ago by Philip.

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

  • Posts: 323
  • Thank you received: 18
  • Hikashop Business
7 months 1 week ago #361031

You posted tablet view not mobile phone. Or you just use device check in browser inspect tool.
Check again my image. That is mobile phone view with gmail app. It is in dark mode, so it is dark background.

So please test your default email with gmail app (on mobile phone eg samsung galaxy or similar) and post the result.

Allmost all my customers have that issue. Again, with default emails.

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

  • Posts: 4763
  • Thank you received: 647
  • MODERATOR
7 months 1 week ago #361042

Hello,

alt


As you can see, we do not have a display problem that resembles your problem described, although indeed some adjustments might be necessary.
There is a chance that you use a common base of settings & plugins between all your sites, which may lead to the repetition of this same problem?

Regards

Last edit: 7 months 1 week ago by Philip.

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

  • Posts: 323
  • Thank you received: 18
  • Hikashop Business
7 months 1 week ago #361051

Now we are getting close. Now we all know that EU has standard format for price 99,00 €.
Now you must just configure your shop to that standard. And there you go. You will have product total like 199,90 €.
That number one is so close to total price, so customers dont realize that there must be a gap.

So yes, all EU hikashop installs have same problem on mobile app emails.

BTW your screen is litle diferent from what most of mobile users get. Screen resolution are smaller for most of them. Of course it depends on mobile phone and magnification settings.

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

  • Posts: 4763
  • Thank you received: 647
  • MODERATOR
7 months 1 week ago #361055

Hello,

We have investigated the subject, and noted significant variations from one email service to another, which is classic, but in fact Gmail app diverges much more and we are therefore going to work on this subject.

Note that only with Gmail app (so far) regarding your specific problem.
Thank you for your feedback
Regards

The following user(s) said Thank You: mojweb

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

Time to create page: 0.077 seconds
Powered by Kunena Forum