Jump to content
Léopold Jacquot

[Free Module] AMP Accelerated Mobile Pages - 2.0.14 PS 1.6 / 1.7

Recommended Posts

This module add the AMP technologie to your shop. Product and category pages will be handle.

The module theme can be customized to represent your brand.

The source code is available here: https://github.com/L3o-pold/prestashopamp

The story behind this module: https://blog.leopoldjacquot.com/2017/11/26/prestashop-amp-module/

Road map:

  • CMS pages
  • Homepage
  • Url rewriting
  • Pagination for Prestashop 1.7.x
  • Product attributes
  • Thirty bees support

 

Product page

 

Category page

 

 

 

 

 

 

 

amp.zip

Edited by Léopold Jacquot
Fix incompatibility with pspixel module (see edit history)
  • Like 3
  • Thanks 2

Share this post


Link to post
Share on other sites

I read the story and I was amused, then sad for your misfortune with the data loss and all, but all in all I'm always glad to see Open Source works. They are the future, no matter how hard some try to stop it.
I only wish there was a test environment (PS install) for users to explore.

I am downloading then testing it right now. Will return with feedback. I am excited.

Kudos

 

LE: I am curious for how long are you ready to support this module. I know it's not an obligation, but having initial support will give a boost of confidence to early adopters :)

Edited by Attrexx (see edit history)

Share this post


Link to post
Share on other sites

Yeah it's funny and sad at the same time. It's great for the Open source world so that was for the best I think.

Do not hesitate to give me your feedback, the module is not perfect but he makes the job I think.

For the support, I received some feedback this week (released first on the French forum), and it improved the module very well. Prestashop 1.7, some bug fixes with configuration and unexpected content description like iframe or images. 5 small released in one week.

It's funny how real world shops are far from the Prestashop out of box. (not like I didn't expect it)

I'm pretty confident for the support, and more people will use it and more I'll be motivated to do it.

Not sure about the roadmap if not a lot of people use it by the way.

PS: About the PS install, you are the second one to ask me for it, for the moment, I do not wish to host a Prestashop demo but again, if many people ask for it, I will reconsider.

Edited by Léopold Jacquot (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites

Hi

Thank you for the great module and making it open source.

Installed your module and google throwing errors in search console as below:

 

1)  The tag 'amp-carousel' requires including the 'amp-carousel' extension JavaScript.

<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000"> <amp-img src="//www.----------/943-large_default/258.jpg" width="458" height="612" alt="Handmade Stool" layout="responsive"> </amp-img> <amp-img src="//www.------/944-large_default/indian-footstools-pouffes.jpg" width="458" height="612" layout="responsive" alt="Handmade Ottoman"> </amp-img> </amp-carousel></div><h1 id="product-name-amp">

2)  The parent tag of tag 'amphtml engine v0.js script' is 'body', but it can only be ''.

<script type="text/javascript" src="https://cdn.ampproject.org/v0.js"></script> <script type="text/javascript" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script></body></html>

3) The inline 'style' attribute is not allowed in AMP documents, use 'style amp-custom' tag instead -     in long description.

 

when

 

Help needed.

Share this post


Link to post
Share on other sites

Disable the Move JavaScript to the end of the HTML document option from your back office.

The module should not allow installation if this option is enabled. Did you activate this option after the install?

PS: Try again the validation after this option is disabled

Edited by Léopold Jacquot (see edit history)

Share this post


Link to post
Share on other sites

Ok did as you said.

Disabled move javascript to the end, then reset the module and again enabled move javascript to the end.

 

Did the validation with disabled and after enable move javascript to the end. Cleared cache.

 

No luck.

Share this post


Link to post
Share on other sites

Even though move javascript to the end is disabled the errord are still there and the validation fails.

Share this post


Link to post
Share on other sites

Ok, did you customized the module theme? Because the problem is with the category description, and it's not the same HTML than the module default theme.

Share this post


Link to post
Share on other sites

Well done man, i'm not a fan of AMP and i hope it will die some day but... that's not what matters, what matters is that we have yet another great open source contribution to PrestaShop :)

  • Like 1

Share this post


Link to post
Share on other sites

Thank you for the new version worked well.

 

It would be wonderful if this module works without disabling "Move Javascript to the end" as it affects site speed on desktop.

 

Hope you will support that as speed is the major issue for ecommerce website and every second counts.

 

:)

Share this post


Link to post
Share on other sites

Is AMP some kind of mobile friendly version of the site?
I've checked what AMP is on wikipedia but it doesn't tell me a lot - like some techniques to make web pages load faster.

Share this post


Link to post
Share on other sites

Hi

2.0.11 worked well as intended.

 

Thank you very much for your support. 

 

Feature Suggestion:  Add product specification on productpage and url rewrite.

 

Thanks again.

Share this post


Link to post
Share on other sites
On 07/03/2018 at 9:54 AM, Léopold Jacquot said:

AMP is a technology to load your website faster for some usage like in Google search engine results or in Facebook.

Does it serves different web page layout (something similar to mobile theme) or the layout is the same but transferred differently?

Share this post


Link to post
Share on other sites

Hi

 

Is it possible to show attributes and features.

Because attributes like size, color are mandatory requirements in ecommerce that customers look for.

 

Thanks

Share this post


Link to post
Share on other sites

Looks like a promising module.

Regarding your problem with "move javascript to footer" - instead of changing PS_JS_DEFER you could maybe solve it by adding data-keepinline="true" to the Script tag.

That should keep the script tags where you placed it

Share this post


Link to post
Share on other sites

Your right, i did not have time to test it before I wrote regarding data-keepinline. Forgot that there where other JS added to pages

An other thing i often sees with AMP sites, is a link "back" to the real site, so you can get full details.

keep up the good work

Share this post


Link to post
Share on other sites

Hi, great project thx for that.

 

I've installed the module (no problems). Deleted cache and checked with amp checker.

But still get the msg that amp is not found.

Am i missing something ?

Share this post


Link to post
Share on other sites

Hi no i did not, the category and product page are working , its perfect thx !

 

i just got one error report from google some <br> in the code.

Share this post


Link to post
Share on other sites

Hi, this option is not available in PS 1.7 and isn't not required to me disabled anymore in PS1.6.

You seems to have a problem, because on the link you provided there is an internal server error.

Could you provide me error logs in PM ?

EDIT: For the records, the error came from the pspixel module.

Edited by Léopold Jacquot (see edit history)

Share this post


Link to post
Share on other sites

Hello Leopold,

 

good work but it seems that there is a problem with multilanguge sites. If I check CZ version, AMP is fine. But if I try to test English version, I have the error that xml:lang in <span> is not allowed. And even the text in the source code does not show English version of the product description but the default one in Czech. So it is not working for us.

 

Can you give me some advice or fix?

 

Thank you.

 

Karel

Share this post


Link to post
Share on other sites

Hi,

Could you send me in Private message your shop url so I can check for the xml:lang error that I can't reproduice.

If you use the /cz or /en like this: /en/module/amp/product?idProduct=1#development=1 you should have the good language content.

Edited by Léopold Jacquot (see edit history)

Share this post


Link to post
Share on other sites
On 3/12/2018 at 2:46 PM, sinbinrin said:

Hi

 

Is it possible to show attributes and features.

Because attributes like size, color are mandatory requirements in ecommerce that customers look for.

 

Thanks

 

Wondering if you can implement suggestion as requested earlier.

 

Regards 

Share this post


Link to post
Share on other sites

Hi!

Thanks a lot for your module. I've just installed it on PS 1.6. The product pages are not indexed by Google yet, but I've tested it by copying the link that is displayed in the header section, and validation by Google is OK. And I've also modified TPL and CSS files.

But I have one doubt: when clicking "Add to cart" on one of the AMP pages, nothing seems to be done and no message is displayed. If I return to the "normal" version, then I can see that product has been correctly added to cart. Is this the expected behaviour? I mean, while remaining on the AMP version, user is not really aware of the content of his cart. Also, he has no way to navigate the site, he can only go back to the "normal" version by clicking on the top logo.

Sorry because I think this is not really a problem related to your module. It's more about "training" the customers to what AMP means, I guess... Any idea for this? (maybe displaying a text on every product page trying to explain the user about AMP usage????).

Regards

 

Share this post


Link to post
Share on other sites

My logo is a little distorted, see attachment.

Can I edit/change my logo to best display into amp pages?

 

Schermata 2018-04-21 alle 12.11.31.png

Share this post


Link to post
Share on other sites

Hi, and thanks a lot for your module!

I'm customizing it as much as I can (I'm not an expert programmer) but I have one doubt. 

Is it possible to edit the amp links so that they are more "friendly"? For example, something like this:

https://www.pecatum.com/es/module/amp/product?idProduct=156

=>

https://www.pecatum.com/es/amp/jamon-iberico/156-jamon-iberico-de-cebo-campo-charro-8kg.html

Basically, I want to use the canonical link with "amp" somewhere in between...

I'm beginning to play with amp.php file and PS Link class, but maybe there's a simpler, faster way to do it?

Thanks & kind regards! 

Edited by Pecatum (see edit history)

Share this post


Link to post
Share on other sites
On 25/4/2018 at 7:14 PM, Pecatum said:

Is it possible to edit the amp links so that they are more "friendly"? For example, something like this:

https://www.pecatum.com/es/module/amp/product?idProduct=156

=>

https://www.pecatum.com/es/amp/jamon-iberico/156-jamon-iberico-de-cebo-campo-charro-8kg.html

 

Well, I just achieved to get:

https://www.pecatum.com/es/amp?idProduct=156

Simply by adding page "amp_product" in Preferences > SEO & URLS, and then: "URL Rewrite" => amp.

Just a small advance, but at least... I keep working on it.

Edited by Pecatum (see edit history)

Share this post


Link to post
Share on other sites
17 hours ago, Pecatum said:

 

Well, I just achieved to get:

https://www.pecatum.com/es/amp?idProduct=156

Simply by adding page "amp_product" in Preferences > SEO & URLS, and then: "URL Rewrite" => amp.

Just a small advance, but at least... I keep working on it.

 

Now I got this:

https://www.pecatum.com/es/amp?idProduct=160-chorizo-iberico-de-bellota-campo-charro-12kg

Instead of:

https://www.pecatum.com/es/amp?idProduct=160

What I did was to define:

$ampLink = $this->context->link->getModuleLink('amp', 'product', array('idProduct' => $product->id."-".$product->link_rewrite), true, $this->context->language->id, $this->context->shop->id, true);

Instead of:

$ampLink = $this->context->link->getModuleLink('amp', 'product', array('idProduct' => $product->id), true, $this->context->language->id, $this->context->shop->id, true);

My next efforts will be focused on how to replace that "?idProduct=? by simply "/". But I will wait a few days to have a clearer mind... I tried it not using getModuleLink, but it doesn't work. One of my tries was:

$this->context->shop->getBaseURL(true).$this->context->language->iso_code."/".$product->link_rewrite;

The URL was then well constructed, but it didn't work (Page not Found).

I've also seen that it doesn't work for multilanguage sites, so I have a problem there too... A different problem, so I will try to explain it by separate.

Share this post


Link to post
Share on other sites
On 1/4/2018 at 3:23 PM, Léopold Jacquot said:

Hi,

Could you send me in Private message your shop url so I can check for the xml:lang error that I can't reproduice.

If you use the /cz or /en like this: /en/module/amp/product?idProduct=1#development=1 you should have the good language content.

 

Hi Léopold,

I also got an error with multilanguage urls. Default version of my site (Spanish) works ok:

https://www.pecatum.com/es/amp?idProduct=160-chorizo-iberico-de-bellota-campo-charro-12kg

But the other 2 versions (English and German) do not:

https://www.pecatum.com/en/amp?idProduct=160-iberian-acorn-fed-sausage-chorizo-iberico-de-bellota-campo-charro-12kg

https://www.pecatum.com/de/amp?idProduct=160-pata-negra-paprikawurst-chorizo-bellota-campo-charro-spanien

Any idea why?

(Yes, I modified amphtml to get the product.link_rewrite in the URL, but then I tried with the default amphtml and it's the same)

Thanks!

Share this post


Link to post
Share on other sites
On 30/3/2018 at 1:57 PM, KeenGamer said:

Hello Leopold,

 

good work but it seems that there is a problem with multilanguge sites. If I check CZ version, AMP is fine. But if I try to test English version, I have the error that xml:lang in <span> is not allowed. And even the text in the source code does not show English version of the product description but the default one in Czech. So it is not working for us.

 

Can you give me some advice or fix?

 

Thank you.

 

Karel

 

Hi Karel,

I guess you're getting that error in the Google AMP Validator, right? I faced the same problem but it's not related to Leopold's AMP module, but to Google AMP rules. My problem was that, when translating my site to other languages, somehow Prestashop added a <span> label with xml:lang and some more things to my translated texts in the product descriptions. And it didn't happen in all products, just in some ones (mostly when I used bold text, for example).

Since I was not able to see why Prestashop did this, what I did was to go those products and edit those descriptions. Do it by editing the source code. There you will see those <span> labels .Simply delete them (or just the xml:lang parameter) and then validate them again. For example:

<p><span xml:lang....>This is the text</span></p>  => <p>This is the text</p>

In my case it happened in just some products, hope it's the same for you.

Hope it works!

Share this post


Link to post
Share on other sites
19 minutes ago, Pecatum said:

 

Hi Léopold,

I also got an error with multilanguage urls. Default version of my site (Spanish) works ok:

https://www.pecatum.com/es/amp?idProduct=160-chorizo-iberico-de-bellota-campo-charro-12kg

But the other 2 versions (English and German) do not:

https://www.pecatum.com/en/amp?idProduct=160-iberian-acorn-fed-sausage-chorizo-iberico-de-bellota-campo-charro-12kg

https://www.pecatum.com/de/amp?idProduct=160-pata-negra-paprikawurst-chorizo-bellota-campo-charro-spanien

Any idea why?

(Yes, I modified amphtml to get the product.link_rewrite in the URL, but then I tried with the default amphtml and it's the same)

Thanks!

 

Ok, I'm sorry for writing so many messages together, but I'm finding solutions to my own problems on the run. This one was caused because I used Preferences > SEO & URLS to set friendly URLs for module-amp-product and module-amp-category. In the field "URL Rewrite" (in Spanish "URL Reescrita"), I entered value "amp" for all the languages.

I've tried with a different value for each language and now it works! So my AMP links now look like this:

https://www.pecatum.com/es/amp?idProduct=160-chorizo-iberico-de-bellota-campo-charro-12kg

https://www.pecatum.com/en/amp-en?idProduct=160-iberian-acorn-fed-sausage-chorizo-iberico-de-bellota-campo-charro-12kg

https://www.pecatum.com/de/amp-de?idProduct=160-pata-negra-paprikawurst-chorizo-bellota-campo-charro-spanien

 

Share this post


Link to post
Share on other sites

Guys, just a question. Have you experienced more sales, better conversions with AMP or not? There are still many reasons to go for it and many against...

Share this post


Link to post
Share on other sites

If you are looking for better conversions with this thread module, it is not worth. Though the module works, it throws error in google webmaster tool. Secondly it is very basic module which does not show quantity, attribute and features on product page which is a must have for product detailing from a conversion point.

I did install the module but since did not had basic ecommerce features so uninstalled it. 

Amp is worth a try for mobile conversions, If you feel the need buy from prestashop addons. 

Share this post


Link to post
Share on other sites

Hello

I do not understand the operation, I installed it, checking on check amp it's good, I saw the url through the module, however how does it work? When we go on google with his mobile proposed links will be in amp? but if we go on the classic url nothing is transformed into AMP ?! it's normal?

Share this post


Link to post
Share on other sites

i have problem :

Les pages AMP et canoniques ne présentent pas le même contenu (Critique)
Assurez-vous que la page AMP et la page canonique présentent le même contenu. Les pages AMP au contenu différent de la page canonique peuvent figurer dans les résultats de recherche Google sans les fonctionnalités d'affichage spécifiques au format AMP. En savoir plus
URL de page AMP :
URL canonique :
Dernière détection : 03/06/2018

 

 

5482eab054.png

 

 

Share this post


Link to post
Share on other sites

Hello everyone, I have a question about this module, in the amp version of each product page there is a link to the original version of the product, but in the original version the link to the amp version is not created

this exists in the head of the AMP version <link rel = "canonical" href = "https: /mipagina.com/categoria/producto.html">
But this does not exist in the head of the original version of the product <link rel = "amphtml" href = "https://mipagina.com/module/amp/producto.html">
Is it possible that my template is not the default one? In what way could this link be generated in the header of the original version of the page of each product / category?

I do not know if you can answer me but I thank you from now on.

@pecatum veo que tu página si que aperece el "link rel" lo has hecho tu o lo generó el módulo atutomáticamente.

Un saludo!

Share this post


Link to post
Share on other sites
6 minutes ago, tortex said:

Hello everyone, I have a question about this module, in the amp version of each product page there is a link to the original version of the product, but in the original version the link to the amp version is not created

this exists in the head of the AMP version <link rel = "canonical" href = "https: /mipagina.com/categoria/producto.html">
But this does not exist in the head of the original version of the product <link rel = "amphtml" href = "https://mipagina.com/module/amp/producto.html">
Is it possible that my template is not the default one? In what way could this link be generated in the header of the original version of the page of each product / category?

I do not know if you can answer me but I thank you from now on.

@pecatum veo que tu página si que aperece el "link rel" lo has hecho tu o lo generó el módulo atutomáticamente.

Un saludo!

Ok I answer to myself, after restarting the module appears the "link rel" in the head of the original version
Thank you!

Share this post


Link to post
Share on other sites

Hi,

Sorry for the delay.

I am aware of a bug with the multilanguage that throws error in Google search console.

I'll work on a fix as soon as possible.

Share this post


Link to post
Share on other sites

Sorry, but on my latest fresh nstalaltion of 1.7.4 and php 7.2 I've error 500 on product page.

Share this post


Link to post
Share on other sites

Hi,

I have installed the module and it works good! Great job! I did the AMP test and it said that the product pages are AMP pages. I sent my data to Google for the SEO/indexin. Is there something else to do? 

Thanks a lot 


 

Share this post


Link to post
Share on other sites

Hi Léopold, really appreciate your work.

I instaled the module, few times, also try it with move javascript to footer, cleared cache, but not working, also google send me message that there isa crawl problem now.

I have a multilanguage stroe, is that a problem, can I make it run ?

 

thank you for your answer

 

https://validator.ampproject.org/#url=https%3A%2F%2Fbattletested.sk%2Fsk%2F

https://battletested.sk/sk/

Share this post


Link to post
Share on other sites
On 27.02.2018 at 7:38 PM, Léopold Jacquot said:

This module add the AMP technologie to your shop. Product and category pages will be handle.

The module theme can be customized to represent your brand.

The source code is available here: https://github.com/L3o-pold/prestashopamp

The story behind this module: https://blog.leopoldjacquot.com/2017/11/26/prestashop-amp-module/

Road map:

  • CMS pages
  • Homepage
  • Url rewriting
  • Pagination for Prestashop 1.7.x

 

Product page

 

Category page

 

 

 

amp.zip

It works ok but the page loads slowly

Share this post


Link to post
Share on other sites

i have multisite/multilanguage/multi currency ...

 

installed the module and enabled per shop and for all shops , but i cant validate the html , always gives errors like

image.thumb.png.9526d1af1d9b0bcad3171cf7495dc13a.png

 

any ideas , toutrials what to do , as im not developer..

 

Edit: my version is 1.6.20

 

Edited by moatazattia (see edit history)

Share this post


Link to post
Share on other sites

Hi guys,

New version released to add PL language and prevent FB pixel module incompatibility.

If you have any issues, please create an issue https://github.com/L3o-pold/prestashopamp/issues/new with details and if needed URL of your shop by PM or any other way. 

Edited by Léopold Jacquot (see edit history)

Share this post


Link to post
Share on other sites
On 11/21/2018 at 12:08 PM, Léopold Jacquot said:

Hi @Bolonia it should works. Can you give us more information than just not working?

Hi Jac,

is it suitable and well working with presta 1.7.3.2?

could you have link of its demo?

Best regards

Share this post


Link to post
Share on other sites

If product has attribuets, attributes options doesnt show up on product page. Has anyone resolved this?

Share this post


Link to post
Share on other sites

Hello

I have prestashop 1.6.1 and we have this error in google webmaster

 

Les attributs de la balise AMP HTML spécifient une mise en page incorrecte.

L'attribut "width" dans la balise "amp-img" est défini sur une valeur incorrecte : "".

Thank you for your help

 

Si vous pouvez me répondre en francais ca m'arrangerai. Merci d'avance

Share this post


Link to post
Share on other sites

 

Hello

 

Someone can help me, we dont have any news from the developper .

I have prestashop 1.6.1 and we have this error in google webmaster : 

 

The attributes of the HTML AMP tag specify an incorrect layout.

The "width" attribute in the "amp-img" tag is set to an incorrect value: "".

 

Les attributs de la balise AMP HTML spécifient une mise en page incorrecte.

L'attribut "width" dans la balise "amp-img" est défini sur une valeur incorrecte : "".

Thank you for your help

Share this post


Link to post
Share on other sites
On 1/22/2019 at 12:37 AM, vkmaxx said:

How many errors are to be expected in current version when validation site?
https://validator.ampproject.org/#url=https%3A%2F%2Fr24fans.pl

You are missing something... the real validation should be on AMP links...

https://validator.ampproject.org/#url=https%3A%2F%2Fwww.rpmotorsport.pl%2Fmodule%2Famp%2Fproduct%3FidProduct%3D181377

You have some issue with custom javascript from the PShowConversion module, so please uninstall or disable it.

Edited by Léopold Jacquot (see edit history)

Share this post


Link to post
Share on other sites