What I built isn't perfect, but I think it's an improvement over how users used to view my site from their smart phones, and hopefully it will lead to an increase in sales.
What I found when attempting to build a mobile site, is that OpenCart is really "heavy" in terms of page sizes. Even with striping out all the unnecessary code, such as tables, and utilizing CSS in one separate style sheet to the extent possible, my site is still "beefy", with total page download size at about 70kb more than the recommended max of 20kb. However it's better than the regular version, so I'm still happy.
For anyone wishing to take on this endeavor I'll offer a few bits of advice.
(1) Take your time, and check their pages against a mobile-friendly website checker, such as http://ready.mobi.
(2) I found it useful to remove the left and right columns from the template files where various modules such as the shopping cart, categories, etc. typically sit. Viewing a website on a mobile device, you typically expect to get fewer bells and whistles anyway, and these prohibit the mobile user from viewing the main body content.
(3) Include category, and manufacturer navigational links in drop-down menus. Screen "real-estate" is at a premium, and if you can include several links in the space of one, you'll be better off.
(4) Fixed widths (i.e. 500px) can cause a user on a device with a smaller screen to have to scroll a lot. Instead, use percentage widths, and using font sizes in 'em' rather than 'px' helps adjust the font size depending on the user's browser.
(5) The good part about OpenCart is the multi-store setup. I was able to keep my regular store active, and create a new store just for my mobile customers. Simply creating a m.yourdomain.com, or mobile.yourdomain.com allows you to apply a different theme to the mobile store. I then when through and added all my products, categories, and information pages to show up on the new mobile site. The category/product pages with common SEO URL's proved to be very useful.
(6) I also found that by copying my current theme's folder (catalog/view/current_theme) into a new folder (catalog/view/mobile_theme), I was able to test the design changes, and easily revert back to the old files in the event I messed something up.
Once I was happy with the design changes, I had to get my site's visitors to visit the mobile site automatically - without waiting for the whole regular site to load. To do this, I edited my current theme's header.tpl, and included the following code right after the opening <head> tag:
Code: Select all
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
$mobileurl='http://m.mydomain.com' . $_SERVER["REQUEST_URI"];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: ' . $mobileurl);
?>
The second line sets the re-direct page to be the url to the mobile site.
The rest is a list of possible results from a mobile device returned by the first line. If it's not one of these, then the visitor is probably not on a mobile device, and should not get redirected
To handle any false negatives (mobile devices not listed in the above code), I included a link in the footer for visitors to view the mobile version:
Code: Select all
<a href="<?php echo "http://m.mydomain.com" . $_SERVER["REQUEST_URI"] ?>">View This Page On Mobile Site</a>
This way the mobile user doesn't really have to do anything to get to the mobile version of the site. Fewer clicks (or taps) is a good thing.
Hope this helps!
If anyone has any suggestions, or improvements to what I mentioned above, by all means, please let me know.