{"id":2303,"date":"2012-03-14T12:08:24","date_gmt":"2012-03-14T12:08:24","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=2303"},"modified":"2012-08-05T08:49:32","modified_gmt":"2012-08-05T07:49:32","slug":"creating-a-mobile-theme-for-opencart","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/creating-a-mobile-theme-for-opencart\/","title":{"rendered":"Creating a mobile theme for Opencart"},"content":{"rendered":"<p>In the past few weeks I&#8217;ve been working on a mobile theme for Opencart. This is a summary of what I did. There&#8217;s some more information available on <a href=\"\/blog\/tag\/opencart\/\">these blog posts<\/a> as well.<\/p>\r\n<ul class=\"bulletlist\">\r\n<li>Rewrote most of the templates to: remove structural tables, ensure the pages function without javascript, and generally simplified into a single column design<\/li>\r\n<li>Created a brand new css file, removing all the background images except those used for the mobile menu<\/li>\r\n<li>Only displaying the Categories and Information modules on the home page, nothing else<\/li>\r\n<li>Created a separate Information page for Contact details, just for the mobile site<\/li>\r\n<li>Removed related products from the product page<\/li>\r\n<li>No search facility<\/li>\r\n<li>Removed popup windows for product images and terms and conditions<\/li>\r\n<li>No sidebar cart, instead a mobile specific version of ajax_add.js which updates the cart and updates an indicator in the heading showing the number of products in the cart<\/li>\r\n<\/ul>\r\n<p>Not that it&#8217;s infallible, but the main, non-mobile site scores 3% on the W3C Mobile OK Checker, and the new mobile site scores 99% (the remaining 1% being because I haven&#8217;t set the height on the header image to allow it to resize to the screen.<\/p>\r\n<p>After experimenting with using media queries on the main site to display a link to the mobile site below certain dimensions I&#8217;ve instead just followed the BBC&#8217;s approach and displayed a link permanently.<\/p>\r\n<p>Because a couple of people have asked, here&#8217;s a zip file containing the template files and javascript, plus a vQmod file containing the necessary amendments to the controller files :<\/p>\r\n<p><a href=\"\/demos\/downloads\/mobile_1495.zip\" title=\"Mobile theme\">Mobile theme files<\/a> (49kb).<\/p>\r\n<p>This contains the mobile theme plus code which I was using already which displays and dynamically updates the quantity of stock available per product. This works with Opencart 1.4.9.5 but won&#8217;t work with Opencart 1.5 without some considerable modification &#8211; see <a href=\"\/blog\/opencart-1-5-mobile-theme\/\">here<\/a> for a version for Opencart 1.5.<\/p>\r\n<p>You&#8217;re welcome to feedback comments but I&#8217;m not offering to support this theme full time. If you do use it, however, then a &#8220;buy me a drink&#8221; donation would be appreciated.<\/p>\r\n<p>You can see the live site <a href=\"http:\/\/mobile.adelaidewalker.co.uk\">here<\/a> &#8211; this uses a very slightly customised version of the mobile theme to support some additional images.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the past few weeks I&#8217;ve been working on a mobile theme for Opencart. This is a summary of what I did. There&#8217;s some more information available on these blog posts as well. Rewrote most of the templates to: remove structural tables, ensure the pages function without javascript, and generally simplified into a single column [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2303","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/2303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=2303"}],"version-history":[{"count":4,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/2303\/revisions"}],"predecessor-version":[{"id":2878,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/2303\/revisions\/2878"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=2303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}