Opencart 1.5 Mobile Theme
Following on from playing around with my existing theme to develop an Opencart Mobile Theme for 1.4.9.5, I’ve now done a rather more comprehensive job and created a complete mobile theme for Opencart 1.5. You can view the theme here.
I’ve attempted to keep as much content as possible, consistent with making the interface a little simpler and adapting controls where sensible for a mobile user. The theme is designed for a screenwidth down to 320px. Here’s a summary of the changes made from the default theme:
Common
- Mobile doctype used
- Removed breadcrumbs throughout, in a few cases replaced these with “back to parent” links
- Removed the compare capability because it doesn’t really work on a small screen
- Removed search
- Removed the sitemap
- Removed 99% of the tables, leaving a few true “tabular data” tables which shouldn’t break the design – on checkout summary, order info, return history and reward history
- Removed all popup messages
- Removed the content_left and content_right display entirely, and moved content_top into the header
- Moved language and currency selection to the footer
Category and product pages
- Added a check to lists of categories so they’re only displayed if the category contains products – note this assumes that there are no empty parent categories
- On the category pages, defaulted the display to list, and removed the option to change the display
- Added a message displayed at the top of the product page if the user clicks add to cart from a category page for a product requiring options to be selected – otherwise I think it’s a slightly confusing user experience
- On the product page, replaced the tabs with an accordion, which works much better with the smaller screen, and replaced the image popups with a simple image replacement
- On Featured, Specials, Bestsellers, Latest and Manufacturer pages, defaulted the display to grid, and removed the option to change the display
Checkout
- For “add to cart” and “add to wish list”, replaced the top of the screen messages with ones create near the clicked button
- Replaced the header cart with a link showing the quantity of items in a cart
- Removed the horrible “estimate shipping costs” capability – just because I think the user experience is so poor
- Reworked the checkout so that any messages are displayed in the body rather than at the top of the page, and rationalised the vast amount of js on that page down to a mere 690 lines
- Added in the ability to redeem coupons during checkout (in version for OC 1.5.2.1 and later)
Configuration changes needed
- Set the Additional Product Image size to 228px, same as the Product Large Image size
- Set wish list and cart images to 50px
Pretty much every file in the theme has been amended in some way. Here are some ways the theme could be used. You might need to create a separate store, or create a new layout.
Can I use this on my site?
Probably. See my policies on using code from this site.
For the moment, I’ve made the theme files available free here. If you do download it, please let me have any feedback. If you use it, then a small donation would be appreciated.
The theme may not be repackaged and/or offered as a download, either free or for sale, without my permission.
| Opencart version | Download file |
|---|---|
| 1.5.1, 1.5.1.1, 1.5.1.2 | Mobile Theme (289kB) |
| 1.5.1.3 | Mobile Theme (289kB) |
| 1.5.2, 1.5.2.1 | Mobile Theme (297kB) |
| 1.5.3, 1.5.3.1 | Mobile Theme (299kB) | 1.5.4, 1.5.4.1, 1.5.5, 1.5.5.1, 1.5.6, 1.5.6.1, 1.5.6.2, 1.5.6.3, 1.5.6.4 | Mobile Theme (291kB) |
The themes all require vQmod. The versions available here have been tested against the corresponding Opencart version (versions for 1.5.1, 1.5.2.1, 1.5.3.1 and 1.5.4 tested against every page).
If you’re interested, here is a list of the undocumented changes between Opencart 1.5.x versions that I identified.
Tags: opencart
If you download the version for OC1.5.6 that includes the search functionality which you should be able to adapt. I have no plans to include search in any other versions.
Search box is verry important! How can I add search box? My OC is v1.5.1.2. Thank you.
You can’t do this out of the box with Opencart, it needs a bit of custom work. Get in contact if you’d like me to give you a quote for this. You might also find an extension that will do this for you.
Hello. I want to display all categories at the home page, not the ones show in the top menu of my main site. Could you help me.
Not sure what’s happening there to be honest. I suggest a complete reinstall and see if the issue goes away. If it remains, then it might be other extensions interfering with the mobile theme.
Punicode: xn--80abvmcjd9i3a.xn--10-6kc1afkcxgu.xn--p1ai
Version ocStore 1.5.5.2. A lot of the same mistakes!
Undefined variable: data in home/r/romah16j/mobi/public_html/vqmod/vqcache/vq2-catalog_controller_common_header.php on line 140
Can I somehow fix it?
Not sure why you would need this for OC2.x since the default theme is responsive. I have no plans to rewrite the mobile theme for OC2.x.
I want the version of 2.0.3.1. Please upload in your website.
Hoang
Take a look at http://oc1564.simonbattersby.com/. I have added search to the bottom of the homepage. I’m open to feedback. If this is what you’re after I will make the files for OC1.5.6.4 available in the download.
My store has more than 3000 products, the SEARCH is very important, can you help me to add Search to this theme, pls !!!
I have not included Search in the theme, sorry.
How to add Search to this theme, help me pls!!
Thanks very much Dario. When I have some time I will incorporate those changes in the download.
As a thank you for this outstanding theme, I’ll post here a little improvement, good for multi-lingual websites. I’ll add some screenshots (can’t really put PHP code in here) about how to make the “Product added to cart!” message translated in the proper language. The vQMod development “IDE” being shown is the awesome vQModerator. Just copy the various bits in your own development environment to get the same result.
Step by step procedure for OpenCart 1.5.6:
1) Open mobile_theme.xml (provided with this theme) and locate the catalog/controller/product/product.php entry.
2) Add a new Operation and fill it as shown below:
http://i.imgur.com/OXcZlBn.png
3) Locate catalog/language/english/product/product.php and edit it until it shows as follows:
http://i.imgur.com/OKP9R6k.png
4) Add as many specific languages translations as you want. Example for Spanish:
http://i.imgur.com/Mc8WIOu.png
5) Create a vQMod file to edit:
catalog/view/theme/sb_mobile_theme/template/product/product.tpl
6) Inside it, add a section as follows:
http://i.imgur.com/pWqrqu7.png
That’s it! Now on your multi-language website all the messages will appear properly translated!
No, since OC2 ships with a default responsive theme.
does it support 2.0.2.0 version ?
It’s impossible to know what’s going wrong without access to your site. If you’re prepared to pay for my time then I’ll take a look, otherwise I’m afraid you’re on your own.
My previous problem about language issue is solved in website. But still not solved in mobile version. Still i can’t see any language select option in my mobile site. Please sir help me.
Good spot – must have changed in OC1.5.6. I’ll amend that.
In “catalog/controller/checkout/cart.php” the search string is: “private function validateCoupon() {“. However in my 1.5.6 OC install, the function is declared as: “protected function validateCoupon() {“.
I’ve just removed the access qualifier since “function validateCoupon() {” would still yield an unique string match.
It doesn’t need to be in there twice, you’re right, but it shouldn’t cause any problems.
Hello again,
In the 1.5.6.X theme version, I have noticed how the “catalog/controller/account/account.php” file vQMod entry seems duplicated, including the same operations on the same search strings. Is it a bug?
Dario
The controller files need amending to make the mobile theme work. They do not adversely affect anything in the default theme. If your theme experiences problems there is nothing I can do – I’d respectfully suggest that your theme is what needs amending.
Hello,
The vQMod affects the default theme’s controllers. It should not, as the non mobile theme gets affected by those changes too.
That sounds like you don’t have the xml file loaded correctly.
Hi Simon. i try your mobile theme using openchart 1.5.4, vqmod ver 2.1.5, and i get this error message
========
Notice: Undefined variable: content_top in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_header.tpl on line 60
Notice: Undefined variable: is_home in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_header.tpl on line 61
Notice: Undefined variable: is_home in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_footer.tpl on line 1Notice: Undefined variable: currency in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_footer.tpl on line 27Notice: Undefined variable: language in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_footer.tpl on line 28
======
can you please help me to look whats wrong in here
thank you
best regard
Great job!
Thank you so much Simon
I haven’t uploaded this to Opencart – I assume you’ve downloaded it from my site? I’ve rechecked with the same file and get no errors. If it’s still erroring send me the file that reports the error (simon@simonbattersby.com). My version of that file does not have 165 lines, so there’s something odd somewhere.
i don’t have an extension that might interfere, and i downloaded the file for OC 1.5.2.1 from opencart extensions. is the file you uploaded to OC extensions error free?
Josh
I cannot recreate this error. Do you have any other mods running which might be interfering with the mobile theme? Have you loaded the correct version of the mobile theme for your version of OC?
Hello Simon, i get the following error when i applied your mobile theme Parse error: syntax error, unexpected ‘}’, expecting ‘)’ in /home/galaxy007/public_html/educhirve.com/vqmod/vqcache/vq2-catalog_controller_common_header.php on line 165
pls, can you look into this, i really need the mobile theme. my OC version is 1.5.2.1
Do you mean version 1.5.0? If so then I have not tested the theme against that version, which may be why the problem is occurring. If it is 1.5.0, then I’m unable to help further. If it’s 1.5.1 or later then there shouldn’t normally be a problem. Does you main theme make any changes to controller files?
You cannot set SEO URLs by store, no.
I m using ver 1.5 of OC.
SEO url are comes in product page but when i click it shows internal server error.
instead of it, if i am typing url in default method product detail page working.
please check:
http://m.stayonpowercapsule.com/power-capsules/power-capsules-30-pieces [Not working ]
http://m.stayonpowercapsule.com/index.php?route=product/product&product_id=48 [ works ]
can we change url format in your theme to display default format of url, while SEO urls are running with main store.
stayonpowercapsule.com
The mobile theme makes no changes to .htaccess. What version of OC are you running?
SEO url not supported for mobile theme, running on subdomain as per your tutorial.
.htaccess
RewriteEngine On
RewriteBase /shop/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)\?*$ index.php?_route_=$1 [L,QSA]
what changes are required for mobile theme. Before seo url activation its working properly now a got Internal server error on category and product pages, still cart and checout pages are working.
You would have to create an edited version of search.tpl, as my earlier answer.
How can i put search in my theme?
As it says above, I haven’t included search in the theme.
Please give me a file by which i can show search option in your theme on my mobile site. Many clients ask and suggest me to ad search features.
I cannot say one way or the other in the rgenesis theme, I’m afraid – I have no idea what it does or how it works. The amended file is on your server.
Is there any problem between rgenesis mobile view and your mobile view? Please give me the edited files of my site.
The problem is almost certainly being caused by your RGENESIS theme. If I view catalog/controllr/common/footer.php this has been amended directly from the standard version to include a child module called rgen_theme. This is interfering with the vqmod file for the mobile theme which adds the currency and language modules as child modules as well.I have directly edited the footer.php file which removes the error, but if you have edits to your other controller files from your theme it’s possible other errors may occur.
I send the access link through your contact us link. Please check my site and give me the solution. I want to run my site with RGENESIS desktop theme and your mobile theme in mobile browser. Please disable the mobile view system of RGENESIS theme and tell me how can i do this.
Are you using the right version of the mobile theme for your site? Have you loaded the vqmod file from the zip? If so so you see any errors in vqmod.log? And in your Opencart system log?
If there’s nothing odd in any of these then there’s nothing much else I can offer without access to your site.
I already installed vqmod but problem still have.
Either you haven’t loaded the vQmod file, or something in your theme is interfering with it, at a guess. Do you see any errors in your vQmod.log?
After install RGENESIS theme and your theme, i got these errors:-
Notice: Undefined variable: currency in /home/u807805404/public_html/catalog/view/theme/sb_mobile_theme/template/common/footer.tpl on line 35Notice: Undefined variable: language in /home/u807805404/public_html/catalog/view/theme/sb_mobile_theme/template/common/footer.tpl on line 36
in your theme, how can i solve this/
I found the problem, while finding another issue. I purchased a module for expiration dates, to pull the items off the page. When adding new products, this field was gone. I noticed it said VQMOD wasn’t installed, I clicked the link to install it, and now the fields work as well as the mobile site too. I thank you for your time.
Tim
I haven’t tested in OC1.5.6.1. The rest of your site looks OK, it’s just the home page that has no content. I’ll load up a test version of OC1.5.6.1 and try it myself.
EDIT:It works fine on a fresh install of OC1.5.6.1, so I’m not sure what’s causing your problem. Do you get any errors in the Error Log?
I recently was informed the mobile site is blank. I have made no changes to the site, other than updating the software in CPANEL to 1.5.6.1 it was 1.5.6. I have checked settings, nothing seems to have changed, is there a compatibility issue with this update?
No, it should be fine.
I’m going to change my site theme to RGENESIS theme of themeforest.net . Will it make any problem in my mobile site where i’m using your mobile theme?
Unfortunately the theme does not allow displaying subcategories like this, and as I explained before, doesn’t include a search capability. You are welcome to create this yourself, but I have no plans to add either of these.
In desktop site where the subcategory display in drop-down style, i want to show my subcategories in a extra page when i click in main categories in my mobile theme as like the yepme or flipcart.
Please give me the code or file by which i can add a search box under the company logo.
I’m not sure what you’re asking about the subcategory I’m afraid.
I deliberately excluded the search capability from the theme as I was aiming for a streamlined version for use on mobiles. You could include it fairly simply by creating an edited version of
template/product/search.tplHow can i make my subcategory in drop down system in main category? Please help me. Search gadget is missing in your template, how can i display it in my site?
I’m successfully installed your theme in my test server :- http://www.ebozar.tk but it is not properly functioning in JAVA phones and some low end phones. How can i solve it?
Don
If you want to have a go at this yourself, then you can just edit the appropriate template file. There should be no need for any changes to any other file.
Dear Simon,
Can you help me to put back the shipping estimate?
Thanks your work!
My problem has been resolved. thank you
What you describe sounds like it might be caused by the absence of the m_common.js file. This was missing from the archive last week, but fixed on 19 June – if you download the archive again it should be included.
Dear Simon
I have installed your theme ver 1.5.5.1. ajax cart run perfect in product page. But i don’t khow why ajax cart not update when i click “add to cart” button from category and feature module. and notify line don’t show too
in your 1.5.5.1 zip file not contain m_common.js file. i had try use this file in previous version zip. but it not running.
Please help. Thanks in advance for your answer.
Right, I’m seeing the same in Opera Mini. In fact, using it on checkout I cannot immediately see the ‘Existing Customer’ option. I suspect this is javascript related – Opera Mini is very cut down (which is partly why it’s fast) but does some odd things with js. I will try and have a look at this but it may not be possible to fix.
In fact, the default theme also has similar problems with the checkout page. It’s definitely the ajax calls on the checkout page that are causing the issue.
LATER: I had a look at Opera Mini this afternoon and in fact I think the issue relates to the slideDown() which Opencart uses on the checkout screen after the ajax call. I think that somehow the page is rendered at the point where the slideDown() has not yet completed, with the result that the bottom of the checkout section is cut off.
I’ve experimented by simply speeding up the slideDown by changing slideDown(‘slow’) to slideDown(‘fast’) throughout view/theme/sb_mobile_theme/template/checkout/checkout.tpl (and similarly for slideUp()). I’ve not seen the cutoff issue since doing this.
You might want to give that a try – if you do, let me know what you find.
It seems the problem is my Opera Mini Browser. If I use the standard browser my Samsung comes with there is no problem.
Hi Bert
Interesting. Just tried it on an iPhone and I don’t see an issue. A family member has a Samsung, I’ll try it on that and let you know.
Thanks for all the assistance in getting this Mobile shop up and running. Everything seems to work fine, the only problem I have now if I order with my Samsung Smartphone that in the checkout the Continue Clicks are not allways visible. It seems the next menu sits on top them.
Bert
I’m not seeing this behaviour. On my test system, clicking Add to Cart on the Canon 5D goes to the product page with a prompt. Are you seeing any js errors in your console?
Hello Simon,
I am experimenting now with product and catgories. I have now a problem with products where you have to make a selection. If I click on order nothing happens. I have to click the product name, make the selection and then hit order.
Is it possible to change this?
Bert
It took me some time to figure out how to get this to work but with reading your instructions I got pretty far. Did some modification because at this moment I am only using the information part of the mobile shop. Had some problems to get multi shop working. The problem was caused by a 301 forwarding from root to the shop directory I had placed in my .htaccess file. Changed this in a rewriterule and everything worked fine. Mobile Browser Detection I get accomplished through the .htaccess file. ( http://detectmobilebrowsers.com – klik on Apache for the code )
The problem is resolved, thank you very much.
Bert
Egbert
Looks like this is my fault! The zip archive for OC154 contained files for an earlier version, which were causing the errors. I’ve refreshed the archive and it should be OK now.
Hello Simon,
I have a 1.5.5.1 shop working perfect with and without vqmod installed. If I upload the Mobile theme I have the same kind of error mentioned by Don (13).
Do you have any idea how to resolve this?
Thanks in advance for any answers,
Bert
Have a look here for some options.
hi,
is there a way i can implement the theme, so it just switchs the theme, i have tried it with a m.domain and i would like just the one domain that changes the theme to this one if viewed via mobile
Sounds like there’s something wrong with your installation there – language, currency and cart are normally displayed in header.tpl, so shouldn’t generate an error. Does your site function correctly with the default template without the vqmod xml file installed?
Hi i tried it on opencart 1.5.4 and 1.5.4.1 vqmod installed both.
And i get this error both of them (Notice: Undefined variable: language in C:\wamp\www\154\catalog\view\theme\default\template\common\header.tpl on line 52 Notice: Undefined variable: currency in C:\wamp\www\154\catalog\view\theme\default\template\common\header.tpl on line 53 Notice: Undefined variable: cart in C:\wamp\www\154\catalog\view\theme\default\template\common\header.tpl on line 54)
What is the problem with this?
Thanks for your answer!
The theme does not itself recognise mobile browsers. Have a look here for ways to implement the theme.
version 1.5.5.1
I just uplaod it but when I go to my site via android on my mobile I see the normal version
Great Job.Thanks
I’ve now completed testing OC1.5.4 and the version for OC1.5.3.1 will work but for a minor issue on checkout and register.
The error that you are describing sounds as if you may not have vQmod loaded on your site.
Not sure how familiar you are with Opencart, but my theme includes $content_top as a child of the header, by making amendments via vQmod to the header controller. If this is not happening (because vQmod is not installed) then that would generate an error like you describe.
Dear Simon,
Im trying to use your module for opencart, but I get some errors. It says:
Notice: Undefined variable: content_top in /usr/home/deb28769/domains/malova.nl/public_html/independentoutlet/upload/catalog/view/theme/sb_mobile_theme/template/common/header.tpl on line 48
Now I tried to upload the file content_top from the default theme to the theme I used from you, but it doesnt seemtowork either.
I downloaded 1.5.3, but I’m working with 1.5.4. May that be the problem?
Thanks in advance!
Marciano
Alberto
Still working on a theme for 1.5.3.1 – the version for 1.5.2.1 will not work properly.
This is just a theme, it doesn’t recognise a mobile browser. I use this on my own store by creating another store, and providing links for customers to navigate to the mobile store if they want. I’ll be adding an article about this shortly, plus also looking at some options for automatic redirection.
Hi, i’m interested too =),
i’ve the 1.5.3.1
This mean the 1.5.2.1 Mobile Theme (298kB) may or may not work under 1.5.3.1?
Anyway i’ve uploaded that files (and overwritten the header.php) but testing with OperaMobileEmulator nothing changed.. how to force Opencart to use sb_mobile_theme instead that the defaut , ONLY when the request come from a mobile? Thanks
Not yet…if you want to have a go yourself start with the version for 1.5.2.1. I haven’t yet had time to work through 1.5.3.1, but it looks like there are far fewer changes between 1.5.2 and 1.5.3 then between 1.5.1 and 1.5.2. Haven’t been near 1.5.4 yet…
do you have been make mobile opencart for 1.5.4.1? Thanks 🙂
I’ve added a link to the theme file archive above, which has been tested against Opencart 1.5.2.1 and 1.5.4.1.
Great job. Thanks!
Very nice work. Can you post the download link for this? Do you have a version for 1.5.3.1? Thanks