{"id":38,"date":"2020-02-28T15:58:04","date_gmt":"2020-02-28T15:58:04","guid":{"rendered":"http:\/\/wiki2.plumserver.com\/knowledge-base\/magento-2-accelerated-mobile-pages-v2-x-developers-guide-and-api-reference"},"modified":"2021-09-21T08:48:18","modified_gmt":"2021-09-21T12:48:18","slug":"magento-2-accelerated-mobile-pages-v2-x-developers-guide-and-api-reference","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide","title":{"rendered":"Magento 2 AMP v2.x Developer Guide and API Reference"},"content":{"rendered":"\n<p>In this developer documentation for the <a href=\"\/magento-amp\">Magento 2 AMP Extension<\/a>, you will find step-by-step instructions, sample code, and API references to fully customize your plugin.<\/p>\n\n\n\n<h2 id=\"modifying-default-amp-css\">Modifying Default AMP CSS<\/h2>\n\n\n\n<p><strong>In order to be able to edit styles on your page, choose the required file from the list below:<\/strong><\/p>\n\n\n\n<ul class=\"small-text\"><li> <strong>style.phtml<\/strong> &#8211; file of styles included on all the pages.<\/li><li> <strong>product.phtml<\/strong> &#8211; file of styles included on product pages.<\/li><li> <strong>category.phtml<\/strong> &#8211; file of styles included on category pages.<\/li><li> <strong>index.phtml<\/strong> &#8211; file of styles included on main page.<\/li><li><strong>custom.phtml &#8211; file of styles included on all the pages.<\/strong><\/li><\/ul>\n\n\n\n<p>There are 2 reasons to change CSS code: <\/p>\n\n\n\n<p><strong>1. In order to add or change the value of the original Plumrocket code.<\/strong> <\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Create the following file in your theme:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">\/app\/design\/frontend\/Vendor\/yourtheme\/Plumrocket_Amp\/templates\/head\/css\/custom.phtml<\/code><\/pre><\/div>\n\n\n\n<p>Add the required CSS code into this file. <\/p>\n\n\n\n<p><strong>2. In order to fully replace the joint CSS or the CSS of a separate page.<\/strong> <\/p>\n\n\n\n<p>Copy the required file with the CSS code to your own theme and change it according to your requirements.<\/p>\n\n\n\n<p><strong>For example, to make additional changes in product page styles, you need to copy the file:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">\/app\/code\/Plumrocket\/Amp\/view\/frontend\/templates\/head\/css\/product.phtml<\/code><\/pre><\/div>\n\n\n\n<p><strong>Paste it to your theme directory:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">\/app\/design\/frontend\/Vendor\/yourtheme\/Plumrocket_Amp\/templates\/head\/css\/product.phtml<\/code><\/pre><\/div>\n\n\n\n<p>Edit the file according to your requirements.<\/p>\n\n\n\n<p><strong>NOTES:<\/strong><\/p>\n\n\n\n<ol><li><strong>After adding these changes, run &#8220;static-content:deploy&#8221; and clear Magento cache.<\/strong><\/li><li><strong>In case you do not have a separate store theme, you can create it following <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.3\/frontend-dev-guide\/themes\/theme-create.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">this guide<\/a>.<\/strong><\/li><li><strong>Never change the module files in the folder &#8220;app\/code\/Plumrocket\/Amp&#8221;, as after the module updating all your changes will be lost. All changes should be done in your THEME folder.<\/strong><\/li><\/ol>\n\n\n\n<h2 id=\"including-additional-amp-js\">Including Additional AMP JS<\/h2>\n\n\n\n<p>Follow the instructions below to include additional AMP java-script on the page.<\/p>\n\n\n\n<p><strong>By default product page includes AMP carousel js.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;script async custom-element=\"amp-carousel\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-carousel-0.1.js\">&lt;\/script><\/code><\/pre><\/div>\n\n\n\n<p><strong>In order to add support of the &#8220;amp-carousel&#8221; component to your CSS pages, you should use Magento 2 layout system.<\/strong> <\/p>\n\n\n\n<p>To perform this, follow the instructions below: <\/p>\n\n\n\n<p>Create the following file in your theme:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">\/app\/design\/frontend\/Vendor\/yourtheme\/Plumrocket_Amp\/layout\/amp_cms_page_view.xml<\/code><\/pre><\/div>\n\n\n\n<p>Add the following code into this file:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;?xml version=\"1.0\"?>\n&lt;page layout=\"pramp\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n    xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;referenceBlock name=\"ampjs\">\n            &lt;action method=\"addJs\">\n                &lt;argument name=\"src\" xsi:type=\"string\">https:\/\/cdn.ampproject.org\/v0\/amp-carousel-0.1.js&lt;\/argument>\n                &lt;argument name=\"type\" xsi:type=\"string\">amp-carousel&lt;\/argument>\n            &lt;\/action>\n        &lt;\/referenceBlock>\n    &lt;\/body>\n&lt;\/page><\/code><\/pre><\/div>\n\n\n\n<p>Save the file and clear Magento cache.<\/p>\n\n\n\n<p>Go to the CMS page with the relevant HTML code has been pasted and check, if your <strong>&#8220;amp-carousel&#8221;<\/strong> is working. <strong>Note:<\/strong> In order to enable <strong>&#8220;amp-carousel&#8221;<\/strong> on the AMP page, there should be the <strong>&lt;amp-carousel&gt;&lt;\/amp-carousel&gt;<\/strong> tags on the page body.<\/p>\n\n\n\n<h2 id=\"adjusting-amp-iframe-height\">Adjusting AMP Iframe Height<\/h2>\n\n\n\n<p>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:<\/p>\n\n\n\n<p>1) Create in your theme the following file:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">\/app\/design\/frontend\/Vendor\/yourtheme\/Plumrocket_Amp\/layout\/amp_catalog_product_view.xml<\/code><\/pre><\/div>\n\n\n\n<p><i>(where the Vendor\/yourtheme are the vendor name and theme name of your specific theme)<\/i><\/p>\n\n\n\n<p>2) Add the following component:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;?xml version=\"1.0\"?>\n&lt;page layout=\"pramp\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n    xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;referenceBlock name=\"amp.product.info\">\n            &lt;arguments>\n                &lt;argument name=\"iframe_width\" xsi:type=\"string\">400&lt;\/argument>\n                &lt;argument name=\"iframe_height\" xsi:type=\"string\">300&lt;\/argument>\n            &lt;\/arguments>\n        &lt;\/referenceBlock>\n    &lt;\/body>\n&lt;\/page><\/code><\/pre><\/div>\n\n\n\n<p>Now change the <strong>&#8220;iframe_height&#8221;<\/strong> value as you need.<i>(where the <strong>Vendor\/yourtheme<\/strong> are the vendor and yourtheme name of your specific theme)<\/i><\/p>\n\n\n\n<p>Now you can change the height there by adjusting the value of &#8220;iframe_height&#8221;.<\/p>\n\n\n\n<p><strong>Note:<\/strong> 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.<\/p>\n\n\n\n<h2 id=\"changing-image-size-on-amp-pages\">Changing Image Size on AMP pages<\/h2>\n\n\n\n<p>If you need to change image size on AMP pages (that may look distorted, if to compare with your desktop images) &#8211; please follow the instructions below.<\/p>\n\n\n\n<p>1) In order to change image size of the images on AMP pages, find <strong>&#8220;&lt;img &#8230;\/&gt;&#8221;<\/strong> tag and add <strong>&#8220;data-width-amp&#8221;<\/strong> and <strong>&#8220;data-height-amp&#8221;<\/strong> attributes, and specify the required values. <\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>In order to display <strong>&#8220;image1&#8221;<\/strong> with the size 300?400 px, which is set by tag<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;img src=\"www.example.com\/media\/image1.png\" title=\"Image 1\" \/><\/code><\/pre><\/div>\n\n\n\n<p>Change it to:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;img src=\"www.example.com\/media\/image1.png\" title=\"Image 1\" data-width-amp=\"300\"\n    data-height-amp=\"400\"\/><\/code><\/pre><\/div>\n\n\n\n<p>2) Additionally, you can set the <strong>&#8220;layout&#8221;<\/strong> attribute with the <strong>&#8220;responsive&#8221;<\/strong> value. This allows to extend an image width proportionally on AMP pages based on a parent container. In this case you can also set <strong>max-width<\/strong> for an element or a container in CSS styles. <\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;img src=\"www.example.com\/media\/image1.png\" title=\"Image 1\" data-width-amp=\"300\"\n    data-height-amp=\"400\" layout=\"responsive\"\/><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div class=\"prism-title\">Run the next three Magento 2 commands:<\/div><pre><code class=\"language-bash\">php bin\/magento setup:upgrade\nphp bin\/magento setup:di:compile\nphp bin\/magento setup:static-content:deploy<\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8211; file of styles included on &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Magento 2 AMP v2.x Developer Guide and API Reference&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[104],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.2 (Yoast SEO v17.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento 2 AMP v2.x Developer Guide and API Reference - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"In this developer documentation for the Magento 2 AMP Extension, you will find step-by-step instructions, sample code, and API references to fully\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 AMP v2.x Developer Guide and API Reference\" \/>\n<meta property=\"og:description\" content=\"In this developer documentation for the Magento 2 AMP Extension, you will find step-by-step instructions, sample code, and API references to fully\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-28T15:58:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-21T12:48:18+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Magento 2 AMP v2.x Developer Guide and API Reference - Plumrocket Documentation","description":"In this developer documentation for the Magento 2 AMP Extension, you will find step-by-step instructions, sample code, and API references to fully","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide","og_locale":"en_US","og_type":"article","og_title":"Magento 2 AMP v2.x Developer Guide and API Reference","og_description":"In this developer documentation for the Magento 2 AMP Extension, you will find step-by-step instructions, sample code, and API references to fully","og_url":"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide","og_site_name":"Plumrocket Documentation","article_published_time":"2020-02-28T15:58:04+00:00","article_modified_time":"2021-09-21T12:48:18+00:00","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide","name":"Magento 2 AMP v2.x Developer Guide and API Reference - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"datePublished":"2020-02-28T15:58:04+00:00","dateModified":"2021-09-21T12:48:18+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20"},"description":"In this developer documentation for the Magento 2 AMP Extension, you will find step-by-step instructions, sample code, and API references to fully","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v2\/devguide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 AMP","item":"https:\/\/plumrocket.com\/magento-amp"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-amp"},{"@type":"ListItem","position":4,"name":"v2","item":"https:\/\/plumrocket.com\/docs\/magento-amp\/v2"},{"@type":"ListItem","position":5,"name":"Developer Guide"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","caption":"Plumrocket"},"sameAs":["https:\/\/plumrocket.com\/docs"]}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/38"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":5,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":24180,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/38\/revisions\/24180"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}