Magento 2 - Product gallery magnifier not working after overriding Gallery class

Question

My magnifier is not showing anymore IF THE PRODUCT HAS MULTIPLE IMAGES, after I have overriden the gallery class!

I have enabled the magnifier in THEME\etc\view.xml:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        ...

    <vars module="Magento_Catalog">

        <!-- Gallery and magnifier theme settings. Start -->
        <var name="gallery">
         ...

        <var name="magnifier">
            <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top">26vh</var> <!-- Top position of magnifier -->
            <var name="left">11vw</var> <!-- Left position of magnifier -->
            <var name="width">600</var> <!-- Width of magnifier block -->
            <var name="height">600</var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
            <var name="mode">outside</var> <!-- Zoom type (outside/inside) -->
        </var>

        ...
    </vars>
    ...

I opened a product in the frontend and checked if the magnifier is working and it works great.

Then I have overridden the class Magento\Catalog\Block\Product\View\Gallery from my own module

app\code\Company\Base\etc\frontend\di.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <preference for="Magento\Catalog\Block\Product\View\Gallery"
                type="Company\Base\Block\Product\View\Gallery" />

</config>

app\code\Company\Base\Block\Product\View\Gallery.php

(we do nothing yet, just creating the constructor)

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

namespace Company\Base\Block\Product\View;

use Magento\Catalog\Block\Product\Context;
use Magento\Catalog\Helper\Image;
use Magento\Catalog\Model\Product\Gallery\ImagesConfigFactoryInterface;
use Magento\Catalog\Model\Product\Image\UrlBuilder;
use Magento\Framework\Json\EncoderInterface;
use Magento\Framework\Stdlib\ArrayUtils;

class Gallery extends \Magento\Catalog\Block\Product\View\Gallery
{
    public function __construct(
        Context $context,
        ArrayUtils $arrayUtils,
        EncoderInterface $jsonEncoder,
        array $data = [],
        ImagesConfigFactoryInterface $imagesConfigFactory = null,
        array $galleryImagesConfig = [],
        UrlBuilder $urlBuilder = null
    ) {
        parent::__construct(
            $context,
            $arrayUtils,
            $jsonEncoder,
            $data,
            $imagesConfigFactory,
            $galleryImagesConfig,
            $urlBuilder
        );
    }

    // Do nothing yet, just the constuctor


}

Execute php bin/magento setup:di:compile

Execute php bin/magento cache:flush

But now the magnifier is not working anymore if the product has multiple images in the gallery showing. It still works fine if the product has only one image. The magnifier doesnt show up. What did I do wrong?

Answer 1

It suddenly worked after some time for unknown reasons. I think some deep cache or browser cache was the reason.