All geek questions in one place

Integrating Accelerated Mobile Pages into the Magento Project

I started integrating the AMP concept in the current Magento live project.

I did something below.

one test html file in the www folder, as suggested here, https://www.ampproject.org/docs/get_started/create/basic_markup.html , this worked great.

I did in my project magento, in 1column.phtml,

<!DOCTYPE html> <html amp lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">

in head.phtml, the first line is added below

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <link rel="canonical" href="http://www.example.com" /> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script>

I launch the homepage by adding #development=1 . and getting the error in the console as shown below:

 TypeError: aa.Object.getOwnPropertyDescriptor(...) is not a non-null object (var e in b)aa.Object.defineProperties?aa.Object.defineProperty(a,e,aa.Object.ge... validator.js (line 2, col 221) ReferenceError: amp is not defined

Can someone help me solve this problem.

Thanks in advance.

+5
source share
3 answers

Try to remove

 xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>"

the first two lines should be like this

 <!doctype html> <html amp lang="en">
+1
source

You can try using one of these extensions: Plumrocket AMP Extension - this works for me, but it is not free. You can check out their demos to see how they do it. The Byjord Amp Extension is free, but work with problems: - (

+1
source

What could be simpler is to use the extension to integrate AMP into your Magento store. I used the one described, created by the basics of coding: http://codingbasics.net/accelerated-mobile-pages-magento/

It is really simple to configure it and it works flawlessly. I don’t know if you fixed this problem after some time, but I thought I would answer anyway to help you and others.

-2
source

Source: https://habr.com/ru/post/1244819/

More articles:


All Articles