- Priority: 0
- Status: Closed
- Theme: Venedor
-
Assigned To:
Fred
- Private: No
- Open Date: 23.01.24, 14:19
- Opened by: Chloé MAHEO
- Closed by: Anonymous Submitter
- Closed on:
- Reason: Not a bug
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
Comments
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
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 ???
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
Hi fred
do you think possible that you can have time one day ? do you know somebody able to do that ?
I can't say when we will have free time for custom work. Any developer can do that
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 ?
Attachments:
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
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
Attachments:
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
2.
- 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>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
Attachments:
I still see that css there https://take.ms/v0pTz
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
So the problem is resolved now?
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
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.
hello
after test this morning always same problem with google ! amp-custom style is 77301 octets, max 75000
…
I see now where the problem is coming from → https://take.ms/Od7gd
Excuse me but my level is not high ! what is exactly the problem ? the css of the text is not good ?
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
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
Attachments:
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
ok done down to 12 products …
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 ?
thanks
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
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
You can add any tabs you need, but the code must be clear and valid, that's the main condition.
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 ?
Attachments:
The difference, as I can see, is that special product has enabled carousel, and New products is just a list
where ? i dont understand because for me all are carousel !?
fred about amp pages do you have a solution to fix the weight of the script too heavy ? I have 11 pages with this problem …
URL Dernière exploration
https://www.verlina.com/mobile/category/50-jouets-peluches
https://www.verlina.com/mobile/category/40-chat
https://www.verlina.com/mobile/category/13-maison-jardin
https://www.verlina.com/mobile/category/89-huiles-essentielles-aromatherapie
https://www.verlina.com/mobile/category/39-chien
https://www.verlina.com/mobile/category/114-croquettes
https://www.verlina.com/mobile/category/18-complements-alimentaires
https://www.verlina.com/mobile/category/15-huiles-essentielles-1kg
https://www.verlina.com/mobile/category/3-animaux
https://www.verlina.com/mobile/category/4-beaute-bien-etre
https://www.verlina.com/mobile/category/146-accessoires
Attachments:
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.
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 ?
FRed I don't remenber where I have setted the address at the amp footer ! can you help ?
That's maybe be Links List module, please check it
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 !
try this way:
<svg class="svgic"> <use href="{_THEME_DIR_}templates/mobile/assets/svg/lib.svg#phone"></use> </svg>Same problem :( it's bizar !
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>
I just fixed that for you, please check
OK thank you very much but if not too long to explain what was the problem ?
I just copied missed icon from the theme to amp
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 />
The issue has been fixed. Please test to confirm the change
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
Attachments:
please can you have a look ? always problem with json script
Le script intégré fait 185929 octets, soit plus que la limite de 100000 octets.
https://www.verlina.com/mobile/category/40-chat
https://www.verlina.com/mobile/category/111-patees
https://www.verlina.com/mobile/category/18-complements-alimentaires
https://www.verlina.com/mobile/category/39-chien
https://www.verlina.com/mobile/category/114-croquettes
https://www.verlina.com/mobile/category/89-huiles-essentielles-aromatherapie
https://www.verlina.com/mobile/category/13-maison-jardin
https://www.verlina.com/mobile/category/3-animaux
That's outdated report. As I can see right now the size of response is 37Kb https://take.ms/LUn3m
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
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
ok thks but if you don't understand … you can image for me ! :)
and about the display of stock products on amp product pages ?
Attachments:
Please give me a link to a product where I can see those Stock products you which you want to remove
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 …
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>*}
</div>
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> </div> {/if}We will add this fix into the next update
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
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:
OK thank you
FRed I don't know why there are 12 pages with script to heavy into google AMP that can't be referenced !
can you have a look please ?
https://www.verlina.com/mobile/category/40-chat
https://www.verlina.com/mobile/category/15-huiles-essentielles-1kg
https://www.verlina.com/mobile/category/111-patees
https://www.verlina.com/mobile/category/39-chien
https://www.verlina.com/mobile/category/3-animaux
https://www.verlina.com/mobile/category/18-complements-alimentaires
https://www.verlina.com/mobile/category/114-croquettes
https://www.verlina.com/mobile/category/89-huiles-essentielles-aromatherapie
https://www.verlina.com/mobile/category/13-maison-jardin
https://www.verlina.com/mobile/category/4-beaute-bien-etre
https://www.verlina.com/mobile/category/146-accessoires
https://www.verlina.com/mobile/category/50-jouets-peluches
Attachments:
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
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 …
could you please check the size of request in your browser?
please I don't know how to do that … can you help me ?
But I already fixed the issue, here is the screenshot https://take.ms/1anfE