Magento 2 AMP v2.x Developer Guide and API Reference

In this developer documentation for the Magento 2 AMP Extension, you will find step-by-step instructions, sample code, and API references to fully customize your plugin.

Modifying Default AMP CSS

In order to be able to edit styles on your page, choose the required file from the list below:

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.
custom.phtml – file of styles included on all the pages.

There are 2 reasons to change CSS code:

1. In order to add or change the value of the original Plumrocket code.

Only the custom.phtml file can be moved to your theme and edited. This file with CSS code always goes last and overwrites the styles of all other files.

Create the following file in your theme:

/app/design/frontend/Vendor/yourtheme/Plumrocket_Amp/templates/head/css/custom.phtml

Add the required CSS code into this file.

2. In order to fully replace the joint CSS or the CSS of a separate page.

Copy the required file with the CSS code to your own theme and change it according to your requirements.

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

/app/code/Plumrocket/Amp/view/frontend/templates/head/css/product.phtml

Paste it to your theme directory:

/app/design/frontend/Vendor/yourtheme/Plumrocket_Amp/templates/head/css/product.phtml

Edit the file according to your requirements.

NOTES:

After adding these changes, run “static-content:deploy” and clear Magento cache.
In case you do not have a separate store theme, you can create it following this guide.
Never change the module files in the folder “app/code/Plumrocket/Amp”, as after the module updating all your changes will be lost. All changes should be done in your THEME folder.

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 add support of the “amp-carousel” component to your CSS pages, you should use Magento 2 layout system.

To perform this, follow the instructions below:

Create the following file in your theme:

/app/design/frontend/Vendor/yourtheme/Plumrocket_Amp/layout/amp_cms_page_view.xml

Add the following code into this file:

<?xml version="1.0"?>
<page layout="pramp" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="ampjs">
            <action method="addJs">
                <argument name="src" xsi:type="string">https://cdn.ampproject.org/v0/amp-carousel-0.1.js</argument>
                <argument name="type" xsi:type="string">amp-carousel</argument>
            </action>
        </referenceBlock>
    </body>
</page>

Save the file and clear Magento cache.

Go to the CMS page with the relevant HTML code has been pasted and check, if your “amp-carousel” is working. Note: In order to enable “amp-carousel” on the AMP page, there should be the <amp-carousel></amp-carousel> tags on the page body.

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) Create in your theme the following file:

/app/design/frontend/Vendor/yourtheme/Plumrocket_Amp/layout/amp_catalog_product_view.xml

(where the Vendor/yourtheme are the vendor name and theme name of your specific theme)

2) Add the following component:

<?xml version="1.0"?>
<page layout="pramp" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="amp.product.info">
            <arguments>
                <argument name="iframe_width" xsi:type="string">400</argument>
                <argument name="iframe_height" xsi:type="string">300</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Now change the “iframe_height” value as you need.(where the Vendor/yourtheme are the vendor and yourtheme name of your specific theme)

Now you can change the height there by adjusting the value of “iframe_height”.

Note: we recommend to perform all the changes in your theme files, in order to be able to update the module without loosing your custom data.

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 the “layout” attribute with the “responsive” value. This allows to extend an 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"/>

Run the next three Magento 2 commands:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

Was this article helpful?