2

enter image description here

can anyone explane me what issue can be i am using nginx server purchaged theme bs_eren & magento 2.4.1 this is only happend on product page.

1
  • My friend is using same theme and just upgrade to 2.4.1, did you fix the issue ? i will be very happy if you can share the solution. – Dexture Dec 2 '20 at 13:37
2

Replace script with below code in your theme gallery.phtml file. May be it helps.

Magento-Catalog/templates/product/view/gallery.phtml

Please update below code:

<script type="text/x-magento-init">
{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
            "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
            "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
            "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
             "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
        }
    }
}
1
1

I fixed it but the approved answer is not enough.

Firstly, catalog_product_view.xml

    <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml">
    <arguments>
        <argument name="gallery_options" xsi:type="object">Magento\Catalog\Block\Product\View\GalleryOptions</argument>
    </arguments>
   </block>
  • gallery.phtml
<?php
$images = $block->getGalleryImages()->getItems();
$mainImage = current(array_filter($images, function ($img) use ($block) {
    return $block->isMainImage($img);
}));

if (!empty($images) && empty($mainImage)) {
    $mainImage = $block->getGalleryImages()->getFirstItem();
}

$helper = $block->getData('imageHelper');
$mainImageData = $mainImage ?
    $mainImage->getData('medium_image_url') :
    $helper->getDefaultPlaceholderUrl('image');

?>

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <img
        alt="main product photo"
        class="gallery-placeholder__image"
        src="<?= /* @noEscape */ $mainImageData ?>"
    />
</div>

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
                "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
                "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
                "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
                 "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
            }
        }
    }
</script>
5
  • Thank u bro but this was issue of js due to upgrade 2.4.0 to 2.4.1 – Suraj Prajapat Dec 2 '20 at 4:51
  • You'r welcome. I am happy for solution. Please can you share the solution? I was curious it – Cengiz Dec 2 '20 at 11:41
  • That issue occurs because a gallery.phtml in my installed theme was written in old code so i replace the gallery.phtml javaScript with the default gallery.phtml javaScript & there is another solution as well you need to search on the internet. – Suraj Prajapat Dec 3 '20 at 6:48
  • Thanks. Finally, can you share your gallery.phtml please? :) – Cengiz Dec 3 '20 at 10:20
  • Please check below code. – Vikram Kumar Dec 3 '20 at 13:27
0

Follow this and see if you are still experiencing the loader issue:

sudo /opt/bitnami/apps/magento/htdocs/bin/magento setup:di:compile
sudo /opt/bitnami/apps/magento/htdocs/bin/magento setup:static-content:deploy -f
sudo /opt/bitnami/apps/magento/htdocs/bin/magento cache:clean
sudo /opt/bitnami/apps/magento/htdocs/bin/magento cache:flush

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.