Magento Porto : Picture loading spinning on product page

Envato Customers Web and Code
1

On a Magento 2.4, Porto theme has an issue : Once clicked on a product, the product page opens and shows a forever spinning load of the product’s pictures.
(See screencopy)

How this can be solved ?

Ashampoo_Snap_2020.11.05_14h27m01s_001_
Ashampoo_Snap_2020.11.05_14h27m01s_001_1221×715 35.5 KB

2

I have the same issue, did you manage to solve it?

Thanks in advance.

3

Simply upload the newest patch. It solves this issue

1 Like
4

Hello. I have the same issue on Magento 2.4.2 and Porto Theme 3.2.6. Last Patch is for 2.4.1 and don’t solve the problem in 2.4.2

Kind regards

5

Hello,

I have the same issue. Magento 2.4.2, Porto 3.2.6 and latest patch 2.4.1.
The spinning icon is stuck until i reload the product page, then it goes away.

6

With the latest patch you will see that your issue is been rectified

7

For anyone stuck on this - Magento 2.4 seems to use a different handler when fotorama is loaded, which older versions of Porto (3.2.3 in my case) won’t catch and so the preloader doesn’t close.

Porto template responsible for this is /app/design/frontend/Smartwave/porto/Magento_catalog/templates/product/view/gallery.phtml , and when you download latest version of Porto and open the file, around line #460 you will see they added a new block, which is now responsible to remove the preloader after fotorama is finished loading:

$(document).on('fotorama:load', function(e, fotorama, extra){
    if($('.loading-mask').length>0)
        $('.loading-mask').remove();
});

So just make sure you have this piece of code there, especially if you are overwriting this file in your custom theme.

When using latest version of gallery.phtml, I also encountered a few JS errors complaining about invalid JSON format, that was because the gallery config object was missing some values, so I had to sanitise these and only output them if the value is not empty. So eg. for “thumbmargin”, I had to replace:

"thumbmargin": <?php echo $block->getVar("gallery/thumbmargin") ?>,

by:

<?php if($block->getVar("gallery/thumbmargin")): ?>
"thumbmargin": <?php echo $block->getVar("gallery/thumbmargin") ?>,
<?php endif; ?>

You will have to follow the console errors to see what parameters exactly are breaking the JSON structure.

2 Likes