Answered Mobile Template Switcher: use different templates for mobile, tablet and desktop

Hi all,

Is it possible to adapt the Mobile Template Switcher 1.4.1 for Evo to use the Agent detection script to server up different templates for designated different devices? The current addon only allows the user of either DESKTOP or MOBILE template - Therefore it treats devices like iPad in vertical orientation as a mobile which is clearly is not... Would it be easy to adapt the current Evo version of the addon to allow the MODx admin user to designate which template various sniffed devices (or resolution sizes) should serve up??? This gets close to a responsive approach, but the difference here is that a true responsive approach would not work here due to the mobile and tablet version of certain pages needing different functionality from the desktop version, a different template for each device is therefore needed.

Anyone like to take this on?

Let me know.

Cheers [ed. note: dubbs last edited this post 13 years, 5 months ago.]

Sure, anything is possible with a budget

The way things have been moving is towards fluid layouts, so my guess is that's where the biggest bang for the buck is, not in the server-side detection scripts, but yes, it would of course be possible to update the script. It actually requires periodic upgrading because there are always going to be new browser agents that come along.

Quote from: Everettg_99 at Apr 29, 2013, 08:07 AM

Sure, anything is possible with a budget

The way things have been moving is towards fluid layouts, so my guess is that's where the biggest bang for the buck is, not in the server-side detection scripts, but yes, it would of course be possible to update the script. It actually requires periodic upgrading because there are always going to be new browser agents that come along.

Thanks for getting back to me.

Would it be possible to make the template switcher work by reading screensize rather than device detection? This would cut out needs for updates to the device detection logic. True fluid responsive wont work for this situation as client wants specific functions/interactions for each device type. Therefore template switcher - or the same template but with blocks of code which display for different device types is what I need.

So, the theory would be:

1. User viewing on screensize 980px or bigger - template renders all the contents of the <desktop> content </content>
2. User viewing on screensize 768-979px - template renders all the contents of the <tablet> content </tablet>
3. User viewing on screensize 1-767px - template renders all the contents of the <mobile> content </mobile>

We need to sniff the windowsize - using jQuery should be fine, then PHP code to show/hide the relevant <desktop>, <tablet> and <mobile> blocks of content within the relevant page template.

This would need to work across many page templates within the site.

See here for the back-story on project needs > https://forums.modx.com/thread/38844/support-comments-for-mobile-template-switcher-1-4-1-rc1?page=3#dis-post-464506

Could you let me know how much you would charge for this?

Thinking about this some more... it could in fact all be done with 1 template and jQuery could'nt it - no need for PHP at all...

You need to keep track of what functions are being used where. PHP code happens on the server, before the page gets sent to your browser. Javascript code is in the sent page, and is executed by the browser. So you can't have JQuery code first, then PHP code executed in the same page. The closest you could come to that is to have a Javascript redirect that would redirect the user to the appropriate page. Perhaps the default would be the desktop page, then if the Javascript detected pad or phone, it would redirect to the pad or phone page. Perhaps a more palatable alternative would be to use AJAX, and load different blocks of content depending on the device or screen size.

Using jQuery I would think makes most sense? e.g.

Then 1 template per resource, just have multiple chunks of HTML to suit different devices... Would this work?

Yep, exactly: it's all moving towards Javascript, and that's arguably the better place to handle it. You can't read screen size with a server-side language like PHP.

Quote from: Everettg_99 at Apr 29, 2013, 09:45 AM

Yep, exactly: it's all moving towards Javascript, and that's arguably the better place to handle it. You can't read screen size with a server-side language like PHP.

Ace - Don't know why the jQuery route only just landed in my head! Thanks for your input guys - I will go ahead with a custom jQuery solution to sort this methinks...

Personally, I'd go the AJAX route. Have a basic common page, then have bits that get loaded via AJAX according to the device size.

Each of these "bits" for a given page could all be in divs on one resource with no template; the JQuery load() function allows you to specify which element to load. However, this would require the browser to download the whole "bits" page even though only one "bit" would be displayed, so it might be better to have separate resources to supply each "bit". I'd store them under each main page in the Tree just to make it easier to maintain. If this were Revo, I'd use a MIGXdb TV to manage the "bits" resources for a given page.

Quote from: sottwell at Apr 29, 2013, 10:04 AM

Personally, I'd go the AJAX route. Have a basic common page, then have bits that get loaded via AJAX according to the device size.

Each of these "bits" for a given page could all be in divs on one resource with no template; the JQuery load() function allows you to specify which element to load. However, this would require the browser to download the whole "bits" page even though only one "bit" would be displayed, so it might be better to have separate resources to supply each "bit". I'd store them under each main page in the Tree just to make it easier to maintain. If this were Revo, I'd use a MIGXdb TV to manage the "bits" resources for a given page.

Thanks Susan, I unfortunately am not well versed in AJAX so it will need to be jQuery solution. It's an EVO site as well as it's for a pretty old build... There will only be a few instances where different "bits" are required to be bespoke to different devices so this approach should work well and augment the other more traditional fluid responsive approach I will be taking here.