AMPx Accelerated Mobile Pages (AMP) for Evolution CMS

AMPx snippet for Evolution CMS adds support for the Accelerated Mobile Pages (AMP) Project, an open-source initiative launched by Google as a way to improve the overall performance of mobile websites with a lightweight HTML framework that can load instantly everywhere.

With AMPx snippet all posts, category and homepage on your MODx site will have dynamically generated AMP-compatible versions.

With AMPx you can easily create a fully navigable and customizable AMP-compatible website

Installation

Step 1) install with Packagemanager

Step 2) Create a new resource:

• template amp-blank
• richtext: no
• content: [! ampx!]
• pagetitle: amp

Step 3) Add to the HEAD tag a link the AMP version

<link rel="amphtml" href="[ (site_url)][~57~]?id=[*id*]"/>

or use with If snippet:

<link rel="amphtml" href="[(site_url)][~57~]?ampid=[*id*][[if? &is=`[*id*]:=:1` &then=`&tpl=amp-Template-Home`]]"/>

<link rel="amphtml" href="[(site_url)][~57~]?ampid=[*id*][[if? &is=`[*isfolder*]:is:1` &then=`&tpl=amp-Template-Container`]]"/>

you can pass tpl parameter via URL:

<link rel="amphtml" href="[ (site_url)][~57~]?ampid=[*id*]&tpl=amp-Template-Home"/>

<link rel="amphtml" href="[ (site_url)][~57~]?ampid=[*id*]&tpl=amp-Template-Container"/>

IMPORTANT: Replace 57 with the ID of resource created at Step 2

Tips:

1) Caching

Caching is not very important, because Google displays AMP pages from AMP Cache CDN, not from your site, ie:

https://cdn.ampproject.org/c/tattoocms.it/amp.html?ampid=172

 

For better local performance, you can cache the [[ampx]] snippet call, but you have to enable "Cache is based on Resource ID and $_GET parameters" on Manager > Tools > Configuration > Site > Document caching type

2) Display Template variable in amp page from main doc

Basic call

[[AMPtv? &tv=`downloadlink`]]

Output tv using modx widget (ie hyperlink)

[[AMPtv? &tv=`downloadlink` &widget=`1`]]

Output only if tv is not empty (with If snippet):

[[if? &is=`[!amptv? &tv=`downloadlink`!]:!empty` &then=`<a href="[[amptv? &tv=`downloadlink`]]" target="_blank" alt="download">Download</a>`]]

 

Issues:

1) validation error with any active plugins that loads something (like js to the page code) with OnWebPagePrerender