Notifications emails table on mobile

mojweb
Topic Author
Offline

2 years 4 months ago #360900 by mojweb

Notifications emails table on mobile was created by mojweb

-- 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?

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

Philip
Offline

2 years 4 months ago - 2 years 4 months ago #360951 by Philip

Replied by Philip on topic Notifications emails table on mobile

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 :

Regards

Last edit: 2 years 4 months ago by Philip.

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

mojweb
Topic Author
Offline

2 years 4 months ago #360990 by mojweb

Replied by mojweb on topic Notifications emails table on mobile

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

Code:

<?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

Code:

<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.

Philip
Offline

2 years 4 months ago #360994 by Philip

Replied by Philip on topic Notifications emails table on mobile

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.

mojweb
Topic Author
Offline

2 years 4 months ago #361022 by mojweb

Replied by mojweb on topic Notifications emails table on mobile

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.

Philip
Offline

2 years 4 months ago - 2 years 4 months ago #361024 by Philip

Replied by Philip on topic Notifications emails table on mobile

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 :

Regards

Last edit: 2 years 4 months ago by Philip.

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

mojweb
Topic Author
Offline

2 years 4 months ago #361031 by mojweb

Replied by mojweb on topic Notifications emails table on mobile

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.

Philip
Offline

2 years 4 months ago - 2 years 4 months ago #361042 by Philip

Replied by Philip on topic Notifications emails table on mobile

Hello,

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: 2 years 4 months ago by Philip.

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

mojweb
Topic Author
Offline

2 years 4 months ago #361051 by mojweb

Replied by mojweb on topic Notifications emails table on mobile

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.

Philip
Offline

2 years 4 months ago #361055 by Philip

Replied by Philip on topic Notifications emails table on mobile

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.

mojweb
Topic Author
Offline

1 year 8 months ago #365232 by mojweb

Replied by mojweb on topic Notifications emails table on mobile

So is there any change or solution on this?

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

Philip
Offline

1 year 8 months ago - 1 year 8 months ago #365236 by Philip

Replied by Philip on topic Notifications emails table on mobile

Hello,

As explained earlier, we do not notice a problem, hence our request for elements to try to see your specific case.
Because here is what we see with our Emails:
- On the emulation of Google Apps via Chrome :

- And on my mobile on Android :

And this is why we are asking for more elements here to possibly better understand your potential particular case.
Regards

Last edit: 1 year 8 months ago by Philip.

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

mojweb
Topic Author
Offline

1 year 7 months ago #365861 by mojweb

Replied by mojweb on topic Notifications emails table on mobile

As i stated on other post. Diference is that you are using non EU type display for curency. Most of the EU countries use 100,00€ format. So € sign on the right.

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

Philip
Offline

1 year 7 months ago - 1 year 7 months ago #365871 by Philip

Replied by Philip on topic Notifications emails table on mobile

Hello,

As asked here , please provide requested elements...
Regards

Last edit: 1 year 7 months ago by Philip.

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

Time to create page: 0.214 seconds