Dynamic template switcher based on user selection

[eluser]Unknown[/eluser]
Hello guys I just developed 2 templates for my custom CI CMS and I use user agent library to choose template based on device of the visitor like

Code:

$this->load->library('user_agent');

and then to switch template

Code:

if($this->agent->is_mobile()){
   $data['mobile'] = '1';
  } else {
   $data['mobile'] = '0';
  }

So far everything works fine but I want the visitor to switch template ( back and forth ) if he/she is browsing the site on mobile device. I can't wrap my head around this I want to do it like

Code:

< a href="www.mysite.com?template=desktop">Desktop Version</a> or
< a href="www.mysite.com?template=mobile">Mobile Version</a>

Please help!
Thanks!

[eluser]Richard Testani[/eluser]
You can either handle it the way you are suggesting and test for device,
or simply use CSS Media Queries:

http://css-tricks.com/resolution-specific-stylesheets/

The latter responds to the size of your screen and you can potentially restyle the entire page.


If you have a need to load two separate templates, then instead of on or off, maybe:

<?php

$template = 'desktop';
if($this->agent->is_mobile()){
$template = 'mobile';
}

$this->load->view($template, $data);

?>

[eluser]Unknown[/eluser]
Thanks Richard. As I mentioned above I already did that. All I need is to make user to be able to switch between both templates by clicking a button or link? I might need to store a cookie about user preference? I've no clue how to do that.

[eluser]Richard Testani[/eluser]
I guess I replied as I did because I questioned why a user might want to switch out desktop and mobile versions. From a user standpoint they most likely don't want to have to choose. You are really best handling this with media query styles, since styles can be updated as a change occurs in the browser - namely size of the screen.

With that said, you can switch out content or styles on the fly with a little bit of jQuery then if you want the keep the state persistent, a session or cookie could take care of this.

Here's a simple example I threw together:
http://jsfiddle.net/Y5AMU/

While I included the template in the html, it could be a separate view and loaded with ajax.

Hope this gives you some direction.