OpenCart Community

Hello,
How can we design/develop our existing opencart template to mobile version?
How it works? Do we really need to upload both versions of templates (Mobile version & PC version) to server?
or there is certain technology we can work with to show the same existing shopping cart template to Mobile version?
Any Ideas?
Thanks for your help.

John/CT

Ideally you will have 2 (or more) templates

1 for Large Res
2 for Mobile (small res)

Possibly more for various other res's/devices

You will need some script do detect device (User Agent) being used and/or screen res

You will need to modify the code that gets the template name from the DB to also be able to change the fetched value to the mobile theme name if that needs to be used instead.

Hi Simon,
Thank you so much for your reply.
How can we proceed on this? I am running opencart 1.5 version cart. and is there a way/algorithm to design this kind of template? what is user agent? In case if we design mobile version, how can we activate two templates same time?
Is this difficult to do? Are there any tutorials for Open cart - mobile version template designing?

Thanks for your support.
Sincerely,
John/NY

Hi John

You should Google for mobile site design techniques, and on how to achieve good usability on small resolutions for mobile devices.

AFAIK no-one as designed a mobile theme for Open Cart as yet.

User Agent is a header sent from a web browser to the server which you can detect and then decide which template to server (Full template or mobile template)

As far as how to run 2 or more templates at the same time, some of the core code we need to be rewritten based on the user agent check above on which template to server for that user.

Sure this can be added as a store setting in admin for the admin to choose which template(s) to use for each resolution/user agent option

Difficulty level, you should ideally know your way around the opencart code and be good at designing templates.

Hope this helps - I may even have a bash at this myself in the not too distant future and if I do, will draw up a tutorial of sorts to help the community.

Hi,
I'm actually in the same situation than cbishwaraj : I need to set differents templates according to the client's device.
My problem is to find where the template who will be use is set, does anyone have an idea?
thanks.

Hi Simon,
probably we need to reserve .mobi domain. Is that right?
are we uploading those mobile them files there? do we need to upload all open cart files as well ?

can you please help me how to proceed with establishing the domain/site for mobile?

Thanks again for your help.
JOHN.

I've been thinking about this recently, and I'm gonna have a stab at a responsive design - so only one template needed and will work on all devices - iPhone, iPad, PC, other smart phones - really!

Not sure how easy it'll be or when I'm gonna get round to it though as I've got a fair few jobs on at the moment. But for info if you want to have a go yourself:
http://coding.smashingmagazine.com/2011 ... eb-design/

And quite a good example from the article - view the site on a computer, then reduce the width of your browser and watch the magic happen:
http://teegallery.com/

Chones wrote:I've been thinking about this recently, and I'm gonna have a stab at a responsive design - so only one template needed and will work on all devices - iPhone, iPad, PC, other smart phones - really!...

Heyyy, welcome back Chones. : )
Many thanks for the links - have been turning this over in my mind and wondering how you'd approach it successfully (mobile device design). Responsive design has to be the way forward.

Cheers Moggin, been a bit busy for the last six months but things finally quietening down - slightly!

Responsive design looks to be the way forward - I did a Wordpress theme for a client that was responsive and worked great on all devices. An eCommerce site is gonna be more of a challenge though and unfortunately Opencart isn't incredibly flexible out the box - but there's always a workaround.

Will be something to keep me occupied on the upcoming cold nights!

Chones wrote:....An eCommerce site is gonna be more of a challenge though and unfortunately Opencart isn't incredibly flexible out the box - but there's always a workaround.

Will be something to keep me occupied on the upcoming cold nights!

Hmm, you’re right. It’s not only the display/ browser compatibility: there’s security to consider, how easy it is to checkout (lot of typing), and general site usability (modal window for add to basket, large buttons, search at top…)

I tried looking at how the big stores are doing it, and found a couple of links if anyone's interested
Is Play.com the best mobile commerce site

Mobile checkouts - 10 best practice tips

And at some point you've got to ask - do people buy via their phones, or just browse?!
-a lot to think about...let's hope the nights are very cold..

Thanks for reply
Should we host these small sized interfaces/theme from .mobi domain?
-J

Hi cbishwaraj,

If you are going to develop a separate mobile version of your store then you can use .mobi, or you can use a sub domain e.g. http://m.yourstore.com But then you have 2 different sites!

I've never used the multistore feature so no idea if you could use that to do it and maybe avoid problems of having 2 separate sites, and stock not being deducted from one when someone buys something from the other - maybe someone else knows?

You'd be better doing what uksitebuilder suggested and use 2 templates for the same site, at the same address.

Moggin - thanks for those links. You'll be pleased to hear they're predicting snow starting next month! <puts on shades to stop snow blindness>

lol@Chones!

@John, sorry for hijacking your thread a little.
Personally I don't think it's necessary to have a .mobi domain, unless you want one: but Wikipedia will tell you more: http://en.wikipedia.org/wiki/.mobi

Some big name (UK) stores do have their mobile-optimised content in a subdomain, such as m.bigshop.co.uk: others change the display if you visit on a mobile (eg Halfords.co.uk). I think the latter is what Chones is driving at. There's no 'best practice' way of hosting mobile content yet,AFAIK (?)

As a side note, mobi-cart has been on this forum and mentioned an API for integration with Opencart. There are a few mentions on their forum too, but I don't think the idea has legs yet

So I couldn't help myself and have started a basic design. Not sure when it'll be finished, but from initial testing it shouldn't be too hard to do.

This will hopefully work on all devices and look great on all of them, from computer to iPad to iPhone, Blackberry and Android.

Wow, that looks excellent.

And it's not even cold yet

Glad you like it. I get bored easy - it doesn't have to be cold, although it helps

Working on grid view - tried it with 2 columns, but 3 looks better, I think anyway.

This sounds like a worthwhile project. I was just looking for a mobile template for a client two weeks ago, and found out that there aren't any. I didn't want to code one myself, and was resigning myself to the likelihood of it -- but now you're taking care of it! Thanks

Chones, your free 1.4.9.x templates are great, by the way. I look forward to seeing what you come up with.

Cheers Jonathan, will try not to disappoint!

http://www.algozone.com have mobile templates available but none of them works on 1.5

atulagarwal56 wrote:http://www.algozone.com have mobile templates available but none of them works on 1.5

No offense to the Algozone people, but their OpenCart templates are absolutely awful if you intend to modify your installation in any way. Their templates override core files, which makes it extremely difficult to change a piece of code if you don't know where it's being loaded from. They're also more complex than they need to be, in my opinion.