X hide

Magento Accelerated Mobile Pages v1.x Developers Guide and API Reference

From Plumrocket Documentation

Contents

Modifying Default AMP CSS

In order to be able to edit styles on your page, go the following directory and choose the required file:

app/design/frontend/base/default/template/pramp/head/css 

This is the list of the files you can edit:

  • style.phtml - file of styles included on all the pages.
  • product.phtml - file of styles included on product pages.
  • category.phtml - file of styles included on category pages.
  • index.phtml - file of styles included on main page.


For example, to make additional changes in product page styles, you need to copy the file:

app/design/frontend/base/default/template/pramp/head/css/product.phtml

Paste it to your theme directory:

app/design/frontend/YOUR_THEME/default/template/pramp/head/css/product.phtml

Edit the file according to your requirements.


Including Additional AMP JS

Follow the instructions below to include additional AMP java-script on the page.


By default product page includes AMP carousel js.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>


In order to include it on other pages, or if you want to add any additional java-scripts e.g. to support iframe, you need to copy the file below:

app/design/frontend/base/default/template/pramp/head.phtml

Paste it to your theme directory and edit according to your requirements:

app/design/frontend/YOUR_THEME/default/template/pramp/head.phtml

For example:
1. You can add this code for iframe support:

 <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>


2. If you need to use the AMP carousel on other pages (besides the product pages) - you need to find the following code in the "head.phtml" file:

 <?php if (Mage::app()->getFrontController()->getAction()->getFullActionName() == 'catalog_product_view') : ?>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<?php endif; ?>

and replace it with the following:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>


Adjusting AMP Iframe Height

At some point you may want to manually change the height of the Magento AMP iframe that contains the custom options on your AMP Product Pages. There are 2 approaches to do so, please see below:

1) Open the file of your theme:

 /app/design/frontend/theme_package/theme_name/layout/local.xml

(where the theme_package/theme_name are the package name and theme name of your specific theme)


Then add the following section into the very bottom of the file:

<amp_catalog_product_view>
<reference name="product.info">
<action method="setIframeWidth"><number>300</number></action>
<action method="setIframeHeight"><number>500</number></action>
</reference>
</amp_catalog_product_view>


Now change the "setIframeHeight" value as you need.

OR

2) Move the file pramp.xml from:

 /app/design/frontend/base/default/layout/

into the folder:

 /app/design/frontend/theme_package/theme_name/layout/

(where the theme_package/theme_name are the package name and theme name of your specific theme)


Now you can change the height there by adjusting the value of "setIframeHeight".

We recommend to make the changes based on the #1 approach, this makes more sense if you plan to update the extension in the future.


Changing Image Size on AMP pages

If you need to change image size on AMP pages (that may look distorted if to compare with your desktop images) - please follow the instructions below.


1) In order to change image size of the images on AMP pages, find "<img .../>" tag and add "data-width-amp" and "data-height-amp" attributes, and specify the required values.

Example:
In order to display "image1" with the size 300х400 px, which is set by tag

 
 <img src="www.example.com/media/image1.png" title="Image 1" />

Change it to:

 
 <img src="www.example.com/media/image1.png" title="Image 1"!!- data-width-amp="300" data-height-amp="400"-!!/>


2) Additionally, you can set "layout" attribute with "responsive" value. This allows to extend image width proportionally on AMP pages based on a parent container. In this case you can also set max-width for an element or a container in CSS styles.

Example:

 
<img src="www.example.com/media/image1.png" title="Image 1" data-width-amp="300"!!- data-height-amp="400" layout="responsive"/>


Adding Custom Elements to AMP pages

Here you will find the instructions on how to add custom elements to AMP pages.

You can add any "amp custom-element" to AMP pages (if AMP custom elements haven't been added to a page by default):

For example, in order to add custom element "amp-accordion" to the product page, you need to go through the following steps:


1) Open the layout file of your theme to edit it.

app/design/frontend/theme_packege/theme_name/layout/local.xml

In case you do not have this file, you need to create it.
Add the following code to the file:

<?xml version="1.0"?>
<layout version="0.1.0">
</layout>


2) Edit the layout file: add the following code before closing tag "</layout>" :

<amp_catalog_product_view>
<reference name="ampjs">
<action method="addJs">
<src>https://cdn.ampproject.org/v0/amp-accordion-0.1.js</src>
<type>amp-accordion</type>
</action>
</reference>
</amp_catalog_product_view>


3) Copy the template file to your theme.

app/design/frontend/base/default/template/pramp/catalog/product/view.phtml


4) Modify the template file: add "<amp-accordion>" element code to page according to requirements of ampproject.org.

5) Save layout and template files and clear Magento cache.

6) It is required to check, whether your AMP page is valid using services for AMP pages testing (for example:validator.ampproject.org). If page is not valid - please fix errors per validator indications, and check the page once again. Repeat this action until you get the valid page message.

You can also edit styles for "amp-accordion component"
In order to do this, please, copy the following file into your theme and edit copied file:

app/design/frontend/base/default/template/pramp/head/css/product.phtml

Once the changes are performed, you need to check pages validation, as described in step 6.

Navigation