Jump to content

Mobile Frontend Template (beta)


Recommended Posts

HI after some interest from some members of this great community i have decided to leave my two cents, hope anyone find it useful

 

This is a template for whmcs with reduced width and graphics, that we have used succesful for our mobile customers.

 

We have set it up succesful by making a subdomain :

 

http://m.youdomain.com

 

to

 

http://www.yourdomain.com/whmcs/clientarea.php?systemtemplate=mobile

 

it works on allmost all wap browsers we have tested. user types m.yourdomain.com, server redirects to wap template and hopefully everything works.

 

Known issues:

 

1.-Stay away from cheap ssl certificates, as they will make the page don't load on allmost all wap browsers. Verisign are accepted by allmost all phones.

 

2.-The emails part doesn't works mainly because of javascript in the original template (portal), if there's enough interest i would gladly modify it.

 

Hope it's a start.

 

I am also looking forward for some feedback as how we can implement this with a javascript into the main site.

 

Let me know you're opinions, please if it doesn't works, try testing why, and then submit feedback.

 

Thanks for everything.

mobile.zip

Link to comment
Share on other sites

  • Replies 50
  • Created
  • Last Reply

Top Posters In This Topic

Hi, very nice.

 

On you details page, a couple of drop down fields extend too far (obviously because of the size of their contents (countries & another - my spanish? isn't real good)

 

This work well when someone logs with the template extension in the link.

(sent you a PM about this last week)

 

I have previous tried a pda css, but that obviously doesn't modify what is displayed, only HOW it is displayed, which is still painful for the user

 

However, when some-one logs in with their handheld, it would be ideal if the user agent could auto detect the handheld browser and take you to a mobile only login page (as per yours), and when the user logs in, that link could then apply the mobile template.

 

Anyone have any experience in this?

 

PS for those that have a joomla site and would like to make it pda friendly (at least for the non-whmcs part) i can recommend a plug-in

Link to comment
Share on other sites

i have used the pda plugin in my joomla site: http://www.avantvision.net works great.. hope we can take the javascript that auto detects the user agent and then apply the template.

 

I will be working on the weekend trying to get the auto detect working, and the details issue will try to fix it too.

We have developed mobile web sites fo some specific apps, and found that Verisign certs (the really expensive ones) are accepted fine by motorola's, se,nokias and blackberrys, has anyone tried this with an iphone?

 

Thanks for feedback & testing.

Link to comment
Share on other sites

The SSL warning is coming up because you have not linked this image http://secure.avantvision.net/mh.gif to a secure path i.e. https://secure.avantvision.net/mh.gif

 

It’s nothing to do what SSL certificate, you’re using as most of the certificates are now compatible with all browsers.

 

Thank you for this .. i have corrected it now...

 

So you guys like it? think we should implement the autodetect javascript...?

Link to comment
Share on other sites

Hi, very nice.

 

However, when some-one logs in with their handheld, it would be ideal if the user agent could auto detect the handheld browser and take you to a mobile only login page (as per yours), and when the user logs in, that link could then apply the mobile template.

 

I've now go the right code for the first half of the equation. How all I have to do is figure out the redirect, and I'll be happy.

 

By the way, i use the second one, and found it to be great. However, it (or rather my site using it) only scores a 3 out of 5 on the .mobi index test. I'm told that the new version coming soon should allow sites to reach scores of 5 out of 5.

Link to comment
Share on other sites

So if we got the user agent.. now the auto redirect should be easy.. update?

I've now go the right code for the first half of the equation. How all I have to do is figure out the redirect, and I'll be happy.

 

By the way, i use the second one, and found it to be great. However, it (or rather my site using it) only scores a 3 out of 5 on the .mobi index test. I'm told that the new version coming soon should allow sites to reach scores of 5 out of 5.

Link to comment
Share on other sites

I've recut almost all the templates so as to work with the narrow width eg KB & DL categories, homepage etc.

I have the code to determine the user agent

Now All i need is the smarty code to tell the sytem to use another template if the current UA metches any of the mobile presets in the UA array.

 

Can anyone tell me what the syntax might be? Along the lines of below?

(Remember, I'm NOT a coder)

 

$smarty->assign('$defaulttheme','default');

$smarty->assign('$theme','mobile');

$smarty->assign('$useragent,'UA');

 

if($useragent} <equals any value in the UA array>

$smarty->display('$theme');

<link rel="stylesheet" type="text/css" href="templates/$theme/style.css" media="handheld" />

else

$smarty->display('$defaulttheme');

<link rel="stylesheet" type="text/css" href="templates/$defaulttheme/style.css" media="screen" />

 

Am I on the right track?

Link to comment
Share on other sites

Humm... Problem is I don't think you can do what you want inside the template...

 

If you are in a template file (eg. header.tpl) and try to set the template to something else I don't think it'll work. At that point the header.tpl has already been read and returned to the browser.

 

I think the way to do it would be to detect you're in the wrong template and redirect the user to the same page and pass the "correct" template name in the URL. (See http://wiki.whmcs.com/Client_Area_Template_Files )

Link to comment
Share on other sites

re my last post, just realised that won't work. Once you go to another page, you'd get redirected back in an endless loop. Lol

 

@frank, true, but if you visit from a mobile device, the country specific site you see is cut down to suit the mobile.

 

try it & you'll see what I mean.

Link to comment
Share on other sites

Ok, more research, and the user agent thing will have to wait.

 

For the moment I'm looking to use the mobile template with my PDA & clients PDAs.

 

so the quick fix (not .mobi or W3C compliant) is to insert the following line in your head, just above </head>

 

<link rel="alternate" media="handheld" href="{$SCRIPT_NAME}?systemtemplate=mobile" />

 

It works on all the pages I tested on my HTC PDA. However, I've tried a couple of 'emulators' & get poor results. Can any anyone test this on their PDA & report back?

 

http://www.ozsmebusiness.com.au/support/index.php

 

Cheers

 

PS depending on your phone/pda, you MIGHT get a cert error for the SSL pages, so let me know what phone you are using and whether you get them.

Link to comment
Share on other sites

I just checked http://www.ozsmebusiness.com.au/support/index.php using Windows Mobile 6.1 and did not work on my device.

 

Just a quick tip to what I did with mine mobile template. You can create a subdomain i.e. m os users can just type http://m.ozsmebusiness.com.au and just redirect it to http://www.ozsmebusiness.com.au/support/index.php?systemtemplate=mobile

 

Hope this helps,

Eddie

Link to comment
Share on other sites

Thanks, Brian, Eddie and FF, for the feedback

 

OK, so my PDA (WM5) worked fine, but now it doesn't either.

i must have changed it manually :( and then left it set to that.

 

Problem with using a subdomain is that it may stuff up relative links (I'd have a quite a few to change), and therefore isn't a solution that others would be so keen to implement.

 

This solution is done by many sites, therefore it must me doable. I suppose I've just figured out one way that it won't work :) for me.

Link to comment
Share on other sites

So you've got 2 templates... lets call them "normal" and "mobile"...

 

At the top of normal/header.tpl (the very top) try something like this....

{php}if ($_SERVER['HTTP_USER_AGENT'] == "Something") { header("Location: /path/index.php?systemtemplate=mobile"); }{/php}

 

And at the top of mobile/header.tpl:

{php}if ($_SERVER['HTTP_USER_AGENT'] != "Something") { header("Location: /path/index.php?systemtemplate=normal"); }{/php}

 

It's overly simplified but should work...

 

Also.... You could extend the code to determine the page (and parameters) initially requested and redirect to the right page in the right template, but this should be enough to start with....

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated