Glitch on Category page

Hi,

I am using hotspots on image on the category page. For this I created a html and attcahed it to the category.

If I navigate to this category page from the home page or menu, the hotspots work fine but If I navigate to this category page from another category page then the hotspots do not work.

Same with the parallax effect. For one of the category I am using parallax effect but when I navigate to this category page from another category page then the parallax effect does not work. If you refresh the page then the page works fine.

There seems to be a glitch or a bug on category page.

Hello,

Try to add the following code snippet to the Custom JS area on document ready in Theme Settings to fix this issue. Also, enable the following script in Theme Settings -> Performance -> JS https://prnt.sc/1qek6fd

jQuery(document).on('pjax:complete', function() {
	 woodmartThemeModule.imageHotspot();
});

Kind Regards

Hi Artem,

Thanks for the reply. I have added the JS code but it seems this has made page loading of product page slow. And second thing is I am not able to find the link you showed in the image on the performance screen. Please find attached the screenshot of performace screen I have. Request you to share the detailed path.

Attachments:

You must be logged in to view attached files.

You need to enable “Advanced scripts control” in Theme Settings -> Performance -> JS. Then you will see this option.
As for the page loading speed, please, check the time with code and without the code. This simple snippet doesn’t influence the loading time.

Hi Artem,

Thanks for the path. I have enabled the Advanced scripts control for Hotspot element but still the issue persist. Now the hotspot does not appear at all. Rather, the products linked to the hotspot spread and visbile all over the page below the main image. Although on mobile, the hotspots are working properly.

Please, send us your admin access so we can check what is wrong there.

Hi Artem,

I guess you can check this on your testing servers as well. Please find admin access in private content. Also check product page “click to enlarge” functionality. After I implemented the code given by you, it seems the code adversely impacted the click to enlarge. On product page, first time “click to enlarge” works fine but when you select any other product from the tab Available colors, system acts in a weird way.

Hi artem,

Additional information to help encounter the issue on my website. Details are in private content.

Hello,

Please, disable all optimization plugins temporarily and test how it works. As we can see, it lacks CSS styling sometimes.

Kind Regards

Hi Artem, Thanks for your reply.

If I understand the essence of your reply, it says, you have tested the hotspot and parallax effects on category pages on your testing website and it worked properly. But its the optmization plugin which is causing the issue on my website. Let me check by deactivating the optimization plugin and will update you.

Hi Artem,

I have deactivated the optimization plugin and checked but the result is same and the issue persist.

We have replaced the code with the following one and it works well now. Please, check from your side.

jQuery(document).on('wdShopPageInit', function() {
		woodmartThemeModule.imageHotspot();
});

Hi Artem,

Thanks for your help but the issue seems to be 50% resolved, I guess.

Below are the issues:

1) Hotspot loads gradually. I mean it takes some some time and does not appear instantly.

2) In some cases, still glitch is there. I dont know exactly but sometimes I need to refresh. It may be caching issue but I am not sure.

3) Now the “click to enlarge” functionality on product page is not working. Request you to fix the issue on priority.

Hello,

As we can see, you have enabled some of the plugins and now some of our JS files are missed. Please, disable them temporarily so we can check both issues.

Kind Regards

[Author]

Posts