Having an Issue of loader on product page in magento2.4.1?

Question

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.

Answer 1

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() ?>
        }
    }
}

Answer 2

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>

Answer 3

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