Theme switcher / changer - For mobile devices

[bobbob]

Hello folks,

I need some advice regarding the best way to implement a theme switcher / changer on my site.

Basically, I would like the customer to be able to choose which theme to view the site in: Either the shop's default theme or a mobile-device friendly theme.

I know there is a paid theme in development that automatically serves up a mobile theme, but I'd rather have a go making my own. The design / tpl aspect I'm fine with. Its just the actual 'switching' mechanism I'm stuck on.

Firstly, I want the customer to choose if they want to view a mobile version of my shop. Many mobile users hate being forced to view a stripped down version, especially when their phone / tablet etc is perfectly capable of surfing standard sites. So a simple link / button above the header will be needed to act as the 'switch'. Clicking this button would set a cookie and refresh the page, loading the site into the mobile friendly theme. Obviously the button (theme switcher) would need to change on the mobile theme to direct the customer back to the normal site.

Now, I have found two modules that do something similar:

* "Disarci's attempt":http://www.prestashop.com/forums/viewthread/17085/third_party_modules/module_block_change_theme_blockthemeselector. This requires manual hacking of the config.inc.php file.
* "Pierre-Yves's attempt":http://www.prestashop.com/forums/viewthread/16888/developpement_et_modules/blocks_module_choix_du_theme/. This automatically updates the config.inc.php file.

I'm sure either one could be easily hacked to do what I require. However, because of the way the modules are written, I would only be able to store two themes in my themes folder; the default theme and the mobile theme. Not ideal.

The second issue is that both modules require modifications to core files. This sucks because updating prestashop would reset those changes. I'm also pretty sure un-installing either module fails to return the config files back to their original state!

So, Presta-geeks / hackers / developers: Is there a way of implementing a theme switcher without modifying core files? If so, any advice how I should approach it?

I'm sure many people would benefit from such a module / hack. If not, I guess i'll just have to use one of the existing modules and accept their limitations...


Regards


Mokijo

[mel-]

I'm also interested in creating a mobile theme for my site but want instead to have a button in the header to click to choose the mobile version.

I have seen another site that is doing this who uses either cre loaded or zen cart. the mobile version link then takes them to a folder mydomain.com/mobile and the different mobile friendly theme used.

if I can get a mobile version of my theme created (working on how to do that now) can someone tell me how I would create a link to lead to the site with that theme instead of the regular theme? looking at presta, you have to choose a them from the BO admin and I don't know how I'd offer the option of another theme.

would I need to install a copy of the prestashop into the folder called /mobile, direct the link to that folder and then install the mobile theme there so basically I have two versions of prestashop installed on my server but they share the database?

any help appreciated. I know there is the paid version of a mobile theme but that is more than I want to spend. I am also watching mobicart but really would prefer to just create a mobilized theme on my own server.

thank you for any thoughts.

[mel-]

well, I'm having problems with this idea.

I duplicated my entire store and put it in a folder named /mobile/. I changed the config and htaccess files to point to this folder. I then started attempting to work on the theme for that folder.

the problem is, even though I log into mydomain.com/mobile/admin and not mydomain.com/admin the changes I make in /mobile/admin are also affecting the site in the root folder. if I remove or add a module it doesn't just affect the store front accessible through mydomain.com/mobile/index.php but also mydomain.com/index.php.

I'm searching past threads with no luck so far. I assume I still have some mistake in my setup/config. I do not want to run multi stores, this is the same store with the same database just accessed through a different theme. the simplest way (I thought) to implement a mobile theme was to do as mokijo stated above, create a link that mobile users can click to see the mobile version.

back to the drawing board it seems.

[bobbob]

Just to update folks on what I'm working on...

First up, there should be no 'iphone' version of a website. If you want to target iphone's, build an iphone app!

Websites should be device 'agnostic'. With css "media queries":http://www.alistapart.com/articles/responsive-web-design/ we can handle specific layout requirements that deal with a multitude of different viewing scenarios. By using this technique, we can display our site's features within the confines of popular resolutions:

* 740px (tablets + really old monitors),
* 960px (older monitors + horizontally held tablets),
* 1360px (standard modern browsers)

However, these resolutions are difficult to re-work within standard PS templates for the smaller mobile phone formats (220px/340px). To achieve a truly responsive design, you cannot expect standard templates to cope with these requirements.

A module / feature that might serve a desktop user may prove a hindrance to a mobile-phone user. Prestashop does not account for this. It is difficult to switch modules on or off depending on the user device. No module / theme currently available helps us in this regard.

My solution? If you don’t know your way around html / css / tpl / js , you’ll need to consult someone who can do it for you. At a price! If you want it done eloquently, make sure you hire someone well-rehearsed in php / smarty.

My solution (a work in progress):

First, design a site that fits a 960px resolution. Use css queries within the tpl files to re-arrange your site’s content blocks to fit popular resolutions as described (excluding the 220px/340px resolutions). You can use conditional comments / js to aid Internet Explorer browsers.

We are now going to exploit "Pierre-Yves’s module":http://www.prestashop.com/forums/viewthread/16888/developpement_et_modules/blocks_module_choix_du_theme/.

This module outputs a list of themes stored in the websites theme folder, thus allowing the customer to modify their viewing experience. By storing only two themes within our themes folder, and by modifying the tpl file of Pierre-Yves’s module, we can create a theme that responsively encompasses resolutions above 740px, and supply a customer chosen theme that works below 340px (via a theme switch).

For modules that don’t work well on a mobile devices, we add a tpl file for it within our mobile theme that contains an empty div with a css display of none. Not eloquent, but it works just fine.

Either way, one site, one database, no seperate url's, no forcing of minimal layouts... Just some hardcore tpl / css coding!

For the majority of people reading this post, I’m guessing you haven’t a clue what I’m talking about! For those well-rehearsed in modifying Prestashop, I’m sure you realise I’m being a little vague.

I am currently really busy at the moment, but I will provide working examples of the above suggestions. In the mealtime, please give me your opinion! Prestashop Ninjas: Your thoughts are especially welcome!!!

Regards

Mokijo

[bobbob]

Just an observation:

63,202 members and only 25 logged on? Where has everyone gone to? Don't tell me an awesome new challenger to PS has turned up...

[mel-]

I did figure out how to install presta in a new folder mobile and by using a very simple free two column theme I have it down to just one column. from there, I am editing the header.tpl and working on the css for that theme.

I thought if I finally got it working then I would copy that theme back to the original store folder and integrate it. I am finding some if then statements on the net to automatically direct mobile users though I will probably go with your solution of only two themes.

I'm using an online simulator for opera mini, plus looking at it through my samsung saga and then using an online iphone simulator. opera renders it perfectly with very little messing around on my part. iphone is becoming a bear. I'm reading some threads and looking like I may have to have a separate additional css just for the iphone. I will have to find someone who actually has one to compare to the simulator.

thanks for bringing this up. even if I never have a good site for the iphone it was pretty easy to get for opera mini. now just have to work on the either choosing or automatically diverting.

[Mobicart]

Hi Guys,

In terms of mobile commerce and MobiCart mentioned above, you can follow the progress and ask any questions on this thread:

http://www.prestashop.com/forums/viewthread/58047/P15/third_party_modules/native_iphone_ipad___android_mobile_ecommerce_builder/

Thanks again,

Wladimir