• Priority: 0
  • Status: Waiting on customer
  • Theme: Venedor
  • Assigned To: Fred
  • Private: No
  • Open Date: 23.01.24, 14:19
  • Opened by: Chloé MAHEO

Ticket #25236 - AMP theme doesnt work correctly

Hello +

I open this ticket for AMP because a lot of module are not completly displayed on it

read this report from a module builder : https://addons.prestashop.com/fr/6144-shop-product-reviews-avis-produits-avis-boutique.html
and also builder of TAbs : https://addons.prestashop.com/fr/onglet-produit/9064-champs-onglets-supplementaires-fiche-produit.html

So the AMP part must be at fault.
You need to check with the theme editor to find out if it is possible to make Prestashop’s native hooks behave natively.
Because if the basic behavior is altered our module will not be able to display correctly.

Please thank you to help us


Fred 24 Jan 2024, 09:52

Hi, Chloé.
AMP has its own html markup and it's not compatible by default with any module. We have "Ampified" whole theme and our modules, but every other module also has to be "ampified" to work in AMP.
You can find technical information on official Google AMP page https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml

Chloé MAHEO 24 Jan 2024, 15:02

Fred I don't understand … can you confirm :
Is it the AMP theme that need to be modified to accept other module or is it other module that need to be be modified to works into AMP ?

Fred can you ampified AMP with the module additionnals Tabs ??? cost ???

Fred 24 Jan 2024, 19:16

Yes, I confirm that any third party module is not compatible with AMP.
"Ampifying" some module requires some time and additional development, it's a custom work. For now we don't have time to provide such service

Chloé MAHEO 19 Feb 2024, 18:28

Hi fred
do you think possible that you can have time one day ? do you know somebody able to do that ?

Fred 20 Feb 2024, 08:55

I can't say when we will have free time for custom work. Any developer can do that

Chloé MAHEO 20 Feb 2024, 11:01

Fred about AMP /mobile question for APPLE PAD
my client have a new APPLE PAD with 1440x900 resolution screen …
He don't understand why the display is not AMP/mobile ???

do you have an idea?

GOOGLE : we have some problems with the css file to heavy for AMP pages Google said the page cannot be into into google serch results !!!

do you have a solution ?


Fred 20 Feb 2024, 22:24

1. Yes, I see that on my iPad as well. We are using native Prestashop way to detect user's device, you can find it in the file
/ROOT/vendor/mobiledetect/mobiledetectlib/Mobile_Detect.php it seems it doesn't work correctly.
2. AMP is very strict to css or js files and has some limit. In your case the error happened because of external css file

Chloé MAHEO 21 Feb 2024, 08:50

OK : "Mobile_Detect.php it seems it doesn't work correctly" can you fix it ?

about AMP Css I have deleted the link to font-avesome but how to display icon or something like on the picture joint

thank you


Fred 22 Feb 2024, 12:57

1. That's most popular library. Now we have to find something else and integrate it into the module. I can't promise it will be fast
- add your icon into the icon library file /themes/alysum/templates/mobile/_partials/svg.tpl read more details here https://alysum.promokit.eu/promokit/documentation/#svg

- paste icon code to any place you need

<svg class="svgic"><use href="{_THEME_DIR_}templates/mobile/assets/svg/lib.svg#YOUR_ICON_NAME"></use></svg>
Chloé MAHEO 22 Feb 2024, 17:50

OK I have deleted the awesome link but google said now that

The author style sheet specified in the "amp-custom style" tag and in the combined built-in styles is too large. The document size is 77301 bytes, while the limit is set at 75000 bytes


Fred 23 Feb 2024, 09:13

I still see that css there https://take.ms/v0pTz

Chloé MAHEO 23 Feb 2024, 09:37

OUPS sorry I forgot mobile version It's ok now link deleted from all!

please I don't have assylium theme ! our is venedor —I don't know where to find the icon mail , place and phone

Fred 23 Feb 2024, 12:20

So the problem is resolved now?

Chloé MAHEO 23 Feb 2024, 16:36

Not for Google for 199 pages !
example : https://www.verlina.com/uniq-cat/1488-uniq-cat-croquettes-sans-cereales-pour-chaton-au-poulet-et-saumon.html The author's style sheet indicated in the "amp-custom style" tag is too long. The limit is set at 75000 bytes.

and other 11 pages for the script <script type="application/json">
The embedded script is too long. The limit is set at 100000 bytes.
example : https://www.verlina.com/mobile/category/89-huiles-essentielles-aromatherapie

Fred 23 Feb 2024, 16:43

Google needs some time to update reports. There is no more that external css file so the issue is resolved, just wait for an update.

Chloé MAHEO 24 Feb 2024, 09:04

after test this morning always same problem with google ! amp-custom style is 77301 octets, max 75000

Fred 26 Feb 2024, 18:34

I see now where the problem is coming from → https://take.ms/Od7gd

Chloé MAHEO 26 Feb 2024, 18:43

Excuse me but my level is not high ! what is exactly the problem ? the css of the text is not good ?

Fred 26 Feb 2024, 18:47

You paste "rich text" into the amp widget. As you can see there are a lot of some code beside the text which you only need. It's recommended to put pure HTML code. You can use this tool to purify code https://www.freeformatter.com/html-formatter.html

Chloé MAHEO 26 Feb 2024, 19:07

PLease please check , i have tried to clear the html

But this morning on the 27th Google is always not happy with AMP pages

An unauthorized attribute or attribute value is present in an HTML tag. 31
The embedded script is too long. The limit is set at 100000 bytes. 11
Only "amp-boilerplate" and "amp-custom" style tags are allowed, and only in the document header. 5
The URL protocol of the "href" attribute of the "a" tag is incorrect. 4
Custom JavaScript code is not allowed. 4
HTML event attributes ("on*") are not allowed in AMP documents. Use "amp-bind" instead. 4
An AMP component "script" tag is present, but not used. 2
You are not allowed to use the !important CSS qualifier. 1

Can you do something for these problems ? THank you

Fred 28 Feb 2024, 16:52

AMP is valid by default. Almost in all cases such problems appears after code or content modifications.
AMP is very strict to the code quality, that's why everything must be clear and valid.
Reduce this value https://take.ms/vOZVF. It loads too many products at once which is not allowed by AMP

Chloé MAHEO 28 Feb 2024, 19:00

ok done down to 12 products …

Chloé MAHEO 29 Feb 2024, 09:13

Fred Question about AMP version of the theme:
- we know that the AMP is very sensible and stritc for the contents and display a poor mobile version .. without the important informations of the complementaries tabs …
quite 80% of clients are coming by mobiles or tablets and we need to show these importants informations

we are looking to adap AMP to show extras Tabs and reviews but we don't know how this will be accept by AMP

- I don't know how reference the amp version into Google ! it's not clear for me ..

Question : why to keep the AMP section ? why not just to keep the responsive verion of the theme for all ?
sure that need to get a really complete fully responsive version for all Android and Apple mobiles and tablets
what do you think about ?

Fred 29 Feb 2024, 09:34

AMP is just an option and can be disabled with no problems. Please review this page to decide to use AMP or not https://amp.dev/support/faq/overview

Chloé MAHEO 29 Feb 2024, 10:25

Yes i saw … but you don't give me answers on using and ref amp

if we add extras tabs into amp , ( there are some picture and lot of informations into these tabs , when I see the ggol results for amp, how amp will receive that ?
I know that I can desactive amp but actualy the standard responsive seem not good for all apple ?
thank you for your conseils

Fred 29 Feb 2024, 10:31

You can add any tabs you need, but the code must be clear and valid, that's the main condition.

Chloé MAHEO 29 Feb 2024, 10:54

ok … I have tried to disable AMP , on the responsive version home page I don't understand why the new product are not on the same with that best product or promotions product ..
same problem for the home text that on a android tablet stay at the half left not full with ( the column is setted full width
an idea ?


Fred 01 Mar 2024, 16:54

The difference, as I can see, is that special product has enabled carousel, and New products is just a list

Chloé MAHEO 01 Mar 2024, 18:07

where ? i dont understand because for me all are carousel !?

Fred 04 Mar 2024, 15:51

Yes, I see.
Strange issue, because when I see what's loading from backend there are only 12 product what can't exceed the amount of 100Kb. Need more time for investigation.

Chloé MAHEO 05 Mar 2024, 15:07

FRed a question because the AMP seem really hard to be operationnal +and we need to get tabs and reviews

If I desactivate AMP to keep just the theme standard is the responsive of the theme could be 100% operationnal on all tools android and apple ?

Chloé MAHEO 05 Mar 2024, 19:05

FRed I don't remenber where I have setted the address at the amp footer ! can you help ?

Fred 06 Mar 2024, 10:47

That's maybe be Links List module, please check it

Chloé MAHEO 06 Mar 2024, 15:36

ok I found it was directly into the footer.tpl file
question do you have an idea why the <svg class="svgic"><use xlink:href="#si-phone"></use> is not displayed on the amp version ? email and location are ok !

Fred 06 Mar 2024, 18:43

try this way:

<svg class="svgic">
  <use href="{_THEME_DIR_}templates/mobile/assets/svg/lib.svg#phone"></use>
Chloé MAHEO 07 Mar 2024, 08:17

Same problem :( it's bizar !

Chloé MAHEO 07 Mar 2024, 09:48

i have tried 2 or 3 ways , put a svg file into the svg folder ,
<svg class="svgic"><use href="{_THEME_DIR_}templates/mobile/assets/svg/lib.phone.svg"></use></svg>
<svg class="svgic"><use href="{_THEME_DIR_}templates/mobile/assets/svg/lib.svg-phone"></use></svg>

not working … I dont understand why the two other are working … : <svg class="svgic"><use xlink:href="#si-email"></use></svg>

Fred 07 Mar 2024, 21:16

I just fixed that for you, please check

Chloé MAHEO 08 Mar 2024, 08:10

OK thank you very much but if not too long to explain what was the problem ?

Fred 08 Mar 2024, 08:18

I just copied missed icon from the theme to amp

Chloé MAHEO 08 Mar 2024, 08:33

good ! what was the forlder wher the icon missing ??

Other things : Please can you have a look on this because on Google there is an alert for 18 pages ( cause the visitors coming more than 75% on mobile the client want AMP 100% google clean ! )

The "<b" attribute cannot appear in the "input" tag.

<b>Warning</b>: Undefined array key "pQty" in <b>/home/verlina/wwwpresta8/var/cache/dev/smarty/compile/venedorlayouts_layout_full_width_tpl/71/3d/2e/713d2eb326e339704d1b516d3ff2e9a30aa47ca7_2.file.product.tpl.php</b> on line <b>555</b><br />

Fred 09 Mar 2024, 10:43

The issue has been fixed. Please test to confirm the change

Chloé MAHEO 09 Mar 2024, 15:41

OK that seem good !
last alert on 12 pages if you can do something :
The embedded script is 185929 bytes, more than the limit of 100000 bytes.
<script type="application/json">


thank you


Fred 14 Mar 2024, 09:49

That's outdated report. As I can see right now the size of response is 37Kb https://take.ms/LUn3m

Chloé MAHEO 18 Mar 2024, 16:41

bizarre google don't want to validate corrections ./. :(

Please do you know where I can disable the display of product in stock on AMP product page/ Technique TAB

thank you

Fred 18 Mar 2024, 18:56

I don't know what's wrong there. But if you take a look in browser's console, you will see that request weight is 37kb https://take.ms/vycJs

Chloé MAHEO 19 Mar 2024, 09:02

ok thks but if you don't understand … you can image for me ! :)

and about the display of stock products on amp product pages ?


amp-script.jpg (240.8 KiB)
Fred 20 Mar 2024, 09:02

Please give me a link to a product where I can see those Stock products you which you want to remove

Chloé MAHEO 20 Mar 2024, 09:39

The problem is only on mobile version, here for example : https://www.verlina.com/mobile/product/1500-uniq-dog-croquettes-sans-cereales-pour-chiot-au-poulet-dinde-et-saumon
you can see on technical tabs at the bottom : En stock 3 Produits!
into prestashop the display of the product in stock is disable …

Chloé MAHEO 20 Mar 2024, 15:14

Fred into the file product.tpl atmobile line 686 I have put this to not display .. if you have better please tell me

<div class="product-quantities">
{* ne pas afficher stock sur mobile
* <label class="label">{l s='In stock' d='Shop.Theme.Catalog'}</label>
* <span>{$product.quantity} {$product.quantity_label}</span>*}

Fred 20 Mar 2024, 21:48

You can try this:

{if !Configuration::get('PS_CATALOG_MODE') && Configuration::get('display_quantities')}
<div class="product-quantities">
   <label class="label">{l s='In stock' d='Shop.Theme.Catalog'}</label>
   <span>{$product.quantity} {$product.quantity_label}</span>

We will add this fix into the next update

Chloé MAHEO 25 Mar 2024, 09:55

Hello Fred
please somebody of your staff could be able to give me wich is the file and the code you have fill in into page product for your module extratabs on AMP ? ??
Thank you

Fred 25 Mar 2024, 19:00

Please check out this file


find the line:

{foreach from=$customTabs item=tab}

in that place custom tabs are displaying.
and in this file they are preparing:

Fred 26 Mar 2024, 16:49

I have tested that on iOS simulator and as you can see the request takes 38Kb https://take.ms/1anfE

You can check that yourself in your browser

Chloé MAHEO 26 Mar 2024, 18:21

Ok I see your result …and I don't know why google said that
Last test into google amp this morning and allways same result … ! :(

it's 12 urls not referenced …

Fred 26 Mar 2024, 19:53

could you please check the size of request in your browser?

Chloé MAHEO 27 Mar 2024, 09:26

please I don't know how to do that … can you help me ?

Fred 27 Mar 2024, 09:44

But I already fixed the issue, here is the screenshot https://take.ms/1anfE