Hi Laurent,
I’ve gone a long and busy way since my post and I managed to make jqtouch within MODx work fine aggregating some selected resources (News, Info pages, ...) and making specific Contact, Register, Login forms. Here’s a quick overview of how I did it (probably not the best way, but that’s the path I took):
1. I added a Mobile Redirect plugin (that uses the php script attached to this post - just rename it .php) to redirect to the mobile home page if the site is accessed with a mobile phone. Here’s my plugin code:
<?php
$logPrefix = "Mobile Redirect: ";
require_once($modx->getOption('core_path').'components/mobiledetect/mobile_device_detect.php');
$mobileResourceId = 23;
$mobileEnable = array(23,42); // Resources of first parent: Mobile, Ajax
$redirectAuto = array(28=>51,34=>54,36=>53,37=>55,32=>59); // Activation, 404, Unauthorized, Unavailable, Password reset
$id = $modx->resource->get('id');
if (array_key_exists($id,$redirectAuto)) {
// Write redirect url with query string but without first parameter of query string (q)
$url = $modx->makeUrl($redirectAuto[$id],'','','full').'?'.substr(strstr(htmlspecialchars_decode($_SERVER['QUERY_STRING']),'&'),1);
$modx->log(modX::LOG_LEVEL_INFO,$logPrefix."RedirectAuto ".$id." to ".$url);
mobile_device_detect(true,false,true,true,true,true,true,$url,false);
} else {
$ultimateParentId = $modx->runSnippet('UltimateParent');
if (!in_array($ultimateParentId,$mobileEnable)) {
$modx->log(modX::LOG_LEVEL_INFO,$logPrefix."Redirect filter for ".$id);
mobile_device_detect(true,false,true,true,true,true,true,$modx->makeUrl($mobileResourceId,'','','full'),false);
} else {
$modx->log(modX::LOG_LEVEL_INFO,$logPrefix."No redirect for ".$id);
}
}
?>
2. I created a JQTouch template for my mobile pages according to JQTouch examples and created a new resource that gather a set of pages, like the following code:
[[getResources? &parents=`0` &tpl=`mobileHome` &tvFilters=`mobilepage==Home` &includeContent=`1` &includeTVs=`1`]]
[[getResources? &parents=`0` &tpl=`mobileNews` &tvFilters=`mobilepage==News` &includeContent=`1` &includeTVs=`1`]]
[[$mobileNewsImportant]]
[[getResources? &parents=`0` &tpl=`mobileNewsPost` &tvFilters=`mobilepage==NewsPost` &includeContent=`1` &includeTVs=`1` &limit=`100`]]
[[getResources? &parents=`0` &tpl=`mobilePage` &tvFilters=`mobilepage==Page` &includeContent=`1` &includeTVs=`1` &sortdir=`ASC` &limit=`100`]]
[[$mobileContact]]
Reading the code above, you should understand my strategy for TVs (mobilepage) and chunks templates (mobileHome,mobileNewsPost,mobileHome,mobilePage)
3. Then my mobile home template looks like this:
<div id="mob_home" class="current">
<div class="toolbar">
<h1>[[++site_name]]</h1>
<a href="[[++site_url]][[~45]]" class="button" rel="external">Weather</a>
</div>
<ul class="rounded">
[[$mobileNav?
&pagetitle=`[[resField?res=`5`&field=`pagetitle`]]`
&alias=`[[resField?res=`5`&field=`alias`]]`
]]
[[$mobileNav?
&pagetitle=`[[resField?res=`2`&field=`pagetitle`]]`
&alias=`[[resField?res=`2`&field=`alias`]]`
]]
[[$mobileNav?
&pagetitle=`[[resField?res=`7`&field=`pagetitle`]]`
&alias=`[[resField?res=`7`&field=`alias`]]`
]]
</ul>
<h2>News</h2>
<ul class="individual">
<li><a href="#mob_news">Latest</a></li>
<li><a href="#mob_important_news">On the Wire</a></li>
</ul>
<div class="info">
<p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
</div>
</div>
Note that you have to use
rel="external" for every external links and I write the complete url with
[[++site_url]][[~45]]
4. I had to do a mobile specific chunk for every forms (login, contact, etc..) in order to make it work. You probably can use the same code as the resource if the CSS for the web version and the mobile version are compatible AND if you use the same submission process (default is AJAX for JQTouch - see below) but it’s pretty tricky.
About Forms and JQtouch:
I had big headaches with this. JQTouch disable form submit to automatically use ajax submission. I took me a long time to make it work like I wanted and I had to modify the JQTouch .js for my purpose (Ajax sends back a div and then replace the div with the same id in the page - it makes it like I reloaded just the div. Default JQTouch behavior is insert a new div and set it focus on it).
Any hints on how to make all this better is welcome.
I hope it will help more than confuse you.
Cheers,
Thierry.
