Hi dubbs,
No problem! I hope this helps...
1. Obviously, download the plugin text file
http://modxcms.com/extras/package/591
2. Create a new plugin. Call it "Mobile" or any other name you so desire.
3. Paste in the plugin code.
4. In the System Events tab, check OnWebPagePreRender (all the way at the bottom)
5. In the Properties Tab, click "Default Properties Locked" to enable editing.
6. Now it will be a manual process of entering the necessary properties specified in the package instructions. Previously, you could just copy/paste all of the text below and you’d be done.
&usecookie=Use Cookie;list;yes,no;yes &url_param=URL Override Parameter (GET);text;browser &mobile_node=Mobile Node ID;text;mobile &standard_node=Standard Node ID;text;standard &force_browser_detect=Force Browser Detect;text;detect &iphone=iPhone is mobile?;list;1,0;1 &ipad=iPad is mobile?;list;1,0;0 &android=Android?;list;1,0;1 &opera=Opera Mini?;list;1,0;1 &blackberry=Blackberry?;list;1,0;1 &palm=Palm?;list;1,0;1 &windows=Windows Mobile?;list;1,0;1
However, now you need to create the text fields and drop-down lists.
For each property, click Create Property and then enter the text below.
Name: usecookie
Description: Use Cookie
Type: list
Value: yes
Option 1 Name: yes
Option 1 Value: yes
Option 2 Name: no
Option 2 Value: no
Name: url_param
Description: URL Override Parameter (GET)
Type: text
Value: browser
Name: mobile_node
Description: Mobile Node ID
Type: text
Value: mobile
Name: standard_node
Description: Standard Node ID
Type: text
Value: standard
Name: force_browser_detect
Description: Force Browser Detect
Type: text
Value: detect
Name: iphone
Description: iPhone is mobile?
Type: list
Value: 1
Option 1 Name: 1
Option 1 Value: 1
Option 2 Name: 0
Option 2 Value: 0
Name: ipad
Description: iPad is mobile?
Type: list
Value: 1
Option 1 Name: 1
Option 1 Value: 1
Option 2 Name: 0
Option 2 Value: 0
Name: iphone
Description: iPhone is mobile?
Type: list
Value: 1
Option 1 Name: 1
Option 1 Value: 1
Option 2 Name: 0
Option 2 Value: 0
Name: android
Description: Android is mobile?
Type: list
Value: 1
Option 1 Name: 1
Option 1 Value: 1
Option 2 Name: 0
Option 2 Value: 0
Name: opera
Description: Opera Mini is mobile?
Type: list
Value: 1
Option 1 Name: 1
Option 1 Value: 1
Option 2 Name: 0
Option 2 Value: 0
Name: blackberry
Description: Blackberry is mobile?
Type: list
Value: 1
Option 1 Name: 1
Option 1 Value: 1
Option 2 Name: 0
Option 2 Value: 0
Name: palm
Description: Palm is mobile?
Type: list
Value: 1
Option 1 Name: 1
Option 1 Value: 1
Option 2 Name: 0
Option 2 Value: 0
Name: windows
Description: Windows Mobile is mobile?
Type: list
Value: 1
Option 1 Name: 1
Option 1 Value: 1
Option 2 Name: 0
Option 2 Value: 0
7. Save the plugin.
8. Create your template and wrap your desktop version with <standard>[[*content]]</standard> and your mobile version with <mobile>[[*content]]</mobile>. As an example, my template used at
http://www.hispurposes.com/revolution looks like this:
<mobile>
[[$mobileheader]]
[[!breadcrumbs]]
<div class="post">
<h2>[[*longtitle]]</h2>
[[*content]]
</div>
<a href="[[~[[*id]]]]?browser=standard">View Desktop Version</a>
[[$mobilefooter]]
</mobile>
<standard>
[[$header]]
<div class="post">
<h2>[[*longtitle]]</h2>
[[*content]]
</div>
<a href="[[~[[*id]]]]?browser=mobile">View Mobile Version</a>
[[$footer]]
</standard>
9. Enjoy your new mobile website!
Paul
