Return to previous page

Visualization problems with the XStore AMP plugin

This topic has 11 replies, 2 voices, and was last updated 2 years, 3 months ago ago by Alessandro

Alessandro

Participant

July 9, 2022 at 17:56

Hello, I’m testing the amp plugin. Site loads very quickly in mobile, nice!

1)At the top left menu I’ve placed the superfly menu, it has sub menu for the first “Synth patches” item but it’s not displayed in the amp version.
same problem for the “Product categories” item in the menu at the bottom right. In this last menu the “Community” and “free download” pages shows a “view amp version” button at the bottom (you can also see a different menu at the top left visible in the amp version) so i suppose they’re not displayed in AMP mode.

2)In the home page I can’t see the add to cart button, also I can see the product name really strange, something like repeated twice and with a {{svg_share_icon}} code. I noticed that issue comes for all products that has the zoomsound plugin player, in the last homepage slider there are almost all products without a player set (bundle products) while there are 2 products with the same other simple products problem.. and those 2 products has the player too for the audio demo.

3)in the product page the player (that is added in the product short description with a shortcode) is not displayed.

4) the product description in the product page sometime is well displayed
https://psytrance-pro.com/staging/shop/doctor-doubledrop/discovery-pro-psytrance-soundset-vol-2
sometimes it’s broken
https://psytrance-pro.com/staging/shop/doctor-doubledrop/ableton-psytrance-open-project-vol-1
What I see there is that all the products that have description issue are under the same categorie, Templates.
Also I should open a different ticket, but since maybe it’s problem related I report it here.. I just realized that in the PC (non amp site version) that templates products have the quantity field visible before the add to cart button, that is hidden for all other products. Since I see digital products noone looks to buy two identical products and I don’t need the quantity field.
Let me know if I must open another ticket for fix it anyway.

5)in the homepagethe categories (first slider) are not displayed correctly, you can easy compare what you see in the site with what is set in woocommerce
https://psytrance-pro.com/staging/wp-admin/edit-tags.php?taxonomy=product_cat&post_type=product

It would be also nice if there could be the possibility to show products slider for specified tag, or for latest products in the homepage.

Thanks in advance for the support
Alessandro

Please, contact administrator
for this information.

#329261 Copied Theme version: 8.2.3

10 Answers

Rose Tyler

Support staff

July 11, 2022 at 08:39

Hello,

1/ We limited the depth of the mobile menu because in amp version it is not yet possible to make good open/close actions for menu items that have submenus and all of them are shown at once.
We added a filter (it will also be included in the plugin update) and a few lines of custom CSS (XStore Control Panel -> AMP XStore -> Custom CSS)
The result will be next -> https://prnt.sc/37Zd7NrLUI9m

2/ Because AMP uses minimal code for quick loading, it can’t include all the elements on a fully functioning webpage, such as certain widgets, embedded content, or pages created using page builders (Elementor/WPBakery). This means that a webpage viewed with AMP looks like a mobile application to facilitate the user experience and doesn’t look exactly the same as how the original page would appear on a desktop or laptop.
XStore AMP allows to adjust the Home page elements, supports WooCommerce pages, Blog and posts (because pages/posts come with simple styles and texts), pages created by Elementor/WPBakery displayed in non-AMP version.

We added custom CSS code to hide some blocks, that can’t be displayed correctly, on your site.
.wc-dzsap-wrapper {
display: none;
}
“Add to cart” button is available for single product page only, not for Shop.

3/ it is added but AMP does not allow to use extra scripts from other resources so the shortcode was added but it was not rendered and will not be.
4/ This issue was created due to 3rd item and described above.
5/ Few of your categories have broken images -> https://prnt.sc/adN9gzv2cem1 that is the reason why you have it broken on the frontend -> https://prnt.sc/fqd7M1yAoffa Also we show only product categories which are not empty (have at least one product).

Regards

#329325 Copied

Alessandro

Participant

July 15, 2022 at 16:30

Hello, sorry for the late reply but I was really busy.

1)Thank you for the new filter added, can you provide me the file and let me know where to upload it in my live site if I’ll be able to publish the site before the next update?
Anyway I see just the top left menu fixed, I can still see the issue in the one at the bottom right.
Also what about the other mentioned issue?
In the bottom right menu the “Community” and “free download” pages shows a “view amp version” button at the bottom (you can also see a different menu at the top left visible in the amp version) so i suppose they’re not displayed in AMP mode.

2)ok perfect!

3)ok thanks, so is there a way to display the product image just for the amp version?

4)I’ve understand what was wrong with the secon part (product quantity field).. my fault sorry.

Anyway about the first part of the point:
” the product description in the product page sometime is well displayed
https://psytrance-pro.com/staging/shop/doctor-doubledrop/discovery-pro-psytrance-soundset-vol-2
sometimes it’s broken
https://psytrance-pro.com/staging/shop/doctor-doubledrop/ableton-psytrance-open-project-vol-1
What I see there is that all the products that have description issue are under the same categorie, Templates.”

I don’t understand what’s the problem, I also tried to deactivate the zoomsound player but no improvments. then I have deactivated all plugins excluded woocommerce, wc paypal, wpbarkley, xstore amp and xstore core, but still no improvments.

5)I made the categories images and all works well now thanks!
What about this?
“It would be also nice if there could be the possibility to show products slider for specified tag, or for latest products in the homepage.”
Is this a possible future option?

Best
Alessandro

#329808 Copied
Rose Tyler

Support staff

July 18, 2022 at 08:42
Hello,

Sorry for the delay in answering.
1/
1.1/ The file is located :
plugins/xstore-amp/includes/templates/header/parts/mobile_menu_sidebar.php
Css code that was added:
```
.mobile-menu .sub-menu {
padding-left: 15px;
}
```
1.2/ Bottom right menu is fixed now as well – thanks 🙂
The fix was to add that filter for that menu as well (it is already added on your staging site) ->
plugins/xstore-amp/includes/templates/extra/mobile_panel_menu_sidebar.php
1.3/
In the bottom right menu the “Community” and “free download” pages shows a “view amp version” button at the bottom (you can also see a different menu at the top left visible in the amp version) so i suppose they’re not displayed in AMP mode. = If the page is shown in non-amp state then that button is shown at the same bottom. If you want to disable that button go to XStore AMP option and disable it -> https://prnt.sc/6mokuUDHxTYj . It will remove that button on all pages.

3/
We found that you had custom code that removes gallery image in your child-theme/functions.php. We did some improves in your code and now image gallery will not be removed if it is AMP version -> https://prnt.sc/GOodr-qCJ5Ks

4/ We found that you added an extra <strong> tag but didn’t close it so it is the reason why you have errors in some products -> https://prnt.sc/yYOf_8UWRb8n . We removed that <strong> for the broken product you sent so check now and check other products that have similar issues.
AMP is very sensitive to tags and html structure.

5/ Not yet but you may submit a feature request here – https://www.8theme.com/roadmap/ and also check other requests that could be loved by you and you can add your voice for some of them to give them more priority.

Regards
#329906 Copied
Alessandro

Participant

July 18, 2022 at 16:01

Hello Rose, you always reply pretty fast and I can only be really happy with your support..

1/
1.1 and 1.2/ Perfect thanks!

1.3/
I’m not sure I have explained well what I see and what do I expect to see. Basically for all page availables from the menu at the bottom right (added in amp-xstore/mobile pannel) I see a non amp version, but since I’ve not selected any option for this I expected to see the amp version as for the rest of the site.
I like the button to have the option to see the non amp version I’m not looking to remove it.
Also when you load any mentioned page that are opened in non amp version , the top left menu display a menu that is not in use in any part of the site with xstore theme active (The footer menu in use in the live site with the old theme https://psytrance-pro.com/staging/wp-admin/nav-menus.php?action=edit&menu=23). I’ve not selected it anywhere neither in the site or in the amp plugin.
https://postimg.cc/QHjhGY7M

3/
3.1/
super, exactely what I was looking for!
About product images I can now see a big zoomed in image (I suppose the product image) and a little one (I suppose the thumb image).
Since i use just little product images for the product sliders (because I hide the product image in the non amp version), is it possible to show that little image only in the amp version?
I tried also to change the image size in “Costumize-Woocommerce-product images-Main image width” from 300 to 163 but I don’t see any change.

3.2/
In the product page I can also see the YT video (needed for listen to the product audio demo) at the bottom of the product description that goes out of the screen at the right, is it possible to fix it?
I also tried to add the video iframe in the product video option for this product:
https://psytrance-pro.com/staging/wp-admin/post.php?post=25482&action=edit
but I can’t see any available video instead of the product image.

4/
O my god so great in debugging, really thanks!

5/
I didn’t know anything about this, I’ll do thanks!

Have a nice day
Alessandro

#329945 Copied

Rose Tyler

Support staff

July 19, 2022 at 13:24

Hello,

1.3/
Please, read our documentation -> https://prnt.sc/lqFk3ykWdNMb
https://www.8theme.com/documentation/xstore/amp-plugin/general-info-amp/
We made AMP pages version only for main pages which are not created by builders.
If the page is not loaded by AMP then it uses global settings from the customizer. Select the menu in Theme Options -> Header -> Mobile menu that will be the answer on your question = I’ve not selected it anywhere neither in the site or in the amp plugin.
https://prnt.sc/3JPp_F9804vL
3.1/
As we understood you right you want to hide main product images on AMP version but show only thumbnails
before -> https://prnt.sc/nOgajmmNlumw
after -> https://prnt.sc/nTCdd35zprRl
If it is what you asked us for then to reach that we added custom css for you -> https://prnt.sc/EATcNZE4-Ppc
3.2/ It was not implemented yet but you may submit a request on our https://www.8theme.com/roadmap/

Regards

#330036 Copied

Alessandro

Participant

July 19, 2022 at 15:35

Hello and thank you as always, everything pretty clear!

I’ve just don’t understand what do you mean in point 3.2

If I have to ask on your roadmap page if it’s possible to add an option to fix YT video size in the product page description or to add video instead of image.. about this last point I may have not understand the option I used
https://postimg.cc/pySYJBd0

it’s may just for gallery..?

Best
Alessandro

#330046 Copied

Rose Tyler

Support staff

July 20, 2022 at 07:33

Hello,

Please go to the roadmap page and check feature requests from other people, as examples. Also, you can add your voice to other requests to give them more priority.
Your request there can be “XStore AMP product gallery with video slide included” and a detailed description.
We will implement popular requests, because we can’t do every request that will be only for one customer, but try to fulfill those that will be useful for a larger number of users.

Regards

#330073 Copied

Alessandro

Participant

July 20, 2022 at 17:37

Hello Rose,

I’m planning to push to live the site soon, as soon as I’ll be able to do I’ll check the roadmap and I’ll take my time to write my review on codecanyon. If you’ll add a review page here in your site too I’ll be happy to add my own there too 🙂

Thanks!

#330113 Copied

Rose Tyler

Support staff

July 21, 2022 at 11:36

Hello,

Thanks. Have a nice day!

Regards

#330172 Copied

Alessandro

Participant

July 21, 2022 at 18:37

Happy weekend for you all, thanks!

#330203 Copied
Tagged: problems, templates, visualization, woocommerce, wordpress, xstore
Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘Visualization problems with the XStore AMP plugin’' has been successfully resolved, and the topic is now closed for further responses

Visualization problems with the XStore AMP plugin

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection