Automated Mobile site with jQtouch and MODx Tutorial
Note: It does appear caching can be issue with this cirrent implementation.
Things you'll need.
- jQtouch
- MODx CMS (installed preferably)
- Mobile Template Switcher Plugin for MODx
- There is also an updated version 1.4 but I couldn't get it to work right.
- Our Zip File full of goodies - jqtouch-modx-resources.zip.
- 60 minutes of time
- Mobile device with a webkit based browser
I know what you Blackberry and Windows Mobile users are saying "This is fine and all, but what about us?" Get a mobile browser that works is what I say. Word is RIM is working on a webkit based browser, Windows Mobile.... <crickets>......
Ok this might not take a full 60, but lets carve it out in case we get really confused.
Step 1
Lets assume you have MODx installed, that's not part of what this tutorial covers. So lets create our Mobile Modx template; this should be easy since we did the work for you pretty much, it should be in the zip file jqtouch-modx-resources.zip named mobile.tpl.html . Copy this content into a new Template called "Mobile".
You'll notice 2 main Ditto calls, the first builds the content, it pretty much goes and creates divs with unique IDs for each and every page that is shown int he menu and has not been flagged as non-mobile by our super sweet TV switcher. (we'll get to that). The second builds our opening menu of options and requires a pretty simple chunk. Lets go build those.
Step 2 - Make some chunks
Lets make some chunks for our ditto calls. Create 2 new chunks:
- Name one "mobile-page" with the contents of mobile-page.chunk.html
- Name the other mobile_gloabl-nav_tpl with the contents of mobile_gloabl-nav_tpl.chunk.html
Matching these up is critical for the markup being developed just how jQtouch likes it. Believe me, do not piss off jQtouch.
Step 3 - Make a Sweet TV to hide some stuff
So not every page is relevant to a mobile user. For instance, your homepage with cool flash intros (we'll talk about those after class), or your whole company history are not mission critical on the mobile web. Things like location(s), maps, contact forms and phone numbers are the meat and potatoes the mobile web is after. Oh and really cool slidy interfaces like we're building.
Create a new TV and call it "ismobile" we'll use this to turn off pages we don't want on the mobile site.
This "Should" inherit down your document tree. Make sure you use the double pipe || delimiter for your drop down values. Then you'll get something like this on every page.
Step 4 - Install the jQtouch
This is pretty straight forward, download jQtouch and upload into your assets folder. Well we couldn't make it that easy. Go ahead and push the themes folder inside the jqtouch folder, this way it's more neat and contained. No, being "Neat" is usually not something that I get credit for.
Here is a screen shot from my Finder window showing how it looks for me.
Step 5 - Nearly there, just the plugin to make it smart
So at this point if you give a page the template of "Mobile" and go to it, you should get your full mobile site. I just created a page called mobile and hid it from the menu, so http://fpulink.com/mobile is my mobile site. But lets make it auto detect those new newfangled iPhones and Androids!
- Make a new Plugin and copy the plugin code into it.
- Check the "OnLoadWebDocument" in System Events
- And then choose your mobile template (by name) so "Mobile" .
Aaaaaaaand Your're done.
Note: Well not quite, make sure your homepage or whatever pages you want this to work on have caching off.
Well lets hope, if you have questions or this guide didn't work email us or me or whoever this goes to.