Problema de zoom da imagem do produto na página de detalhes do produto quando o menu suspenso tem uma área de sobreposição

9

O zoom funciona bem,

Porém, ao passar o mouse no menu suspenso da categoria para a área de sobreposição da imagem do produto e do menu suspenso, o zoom está funcionando normalmente, mesmo o mouse ainda está no menu suspenso.

Por favor, verifique a imagem capturada:

insira a descrição da imagem aqui

magento2 less-css zoom Mayur Rathod
fonte
definido maior z-index para zoom, vai resolver o seu problema
Manoj Deswal
@ManojDeswal, tentei usar o z-index: 99999; mas não funciona. Você pode me fornecer soluções adequadas.
Mayur Rathod
se você tiver url online, então eu posso ajudá-lo
Manoj Deswal
Está funcionando bem no meu sistema local.
Mayur Rathod
passar o seu URL on-line, depois de inspecionar eu posso dizer-lhe exatamente solução
Manoj Deswal

Respostas:

19

Você precisa substituir o código de lib / web / magnifier / magnifier.js no seu tema, conforme abaixo.

$(document).on('mousemove', onMousemove);
_init($box, gOptions);

Substitua por.

$box.on('mousemove', onMousemove);
$box.on('mouseleave', mouseleave);
function mouseleave(e) {
   onThumbLeave();
   isOverThumb = false;
   $largeWrapper.addClass(MagnifyCls.magnifyHidden);
}
_init($box, gOptions);

Precisamos adicionar a função no evento "mouseleave" do bloco de imagem, caso contrário, o zoom será exibido após o mouse sair do bloco de imagem.
Adicione o código acima e deixe-me saber se você precisa de mais alguma coisa.

Nitin Vala
fonte
Magento 2.2.5. Fiz essa alteração, limpei o cache e ainda não está funcionando como deveria. Alguma outra sugestão?
Rudy C.
Por favor, execute o seguinte comando na raiz do diretório magento. -> php bin / magento s: até -> php bin / magento s: d: c deixe-me saber se ele não vai funcionar depois de executar comando acima
Nitin Vala
Isso funcionou! O texto do nome da imagem ainda está cortando a parte inferior. É com isso que você está familiarizado? Eu esperava que a correção do problema de foco da imagem também resolvesse o problema de texto da imagem, mas parece estar separado? Obrigado por sua ajuda e tempo, Nitin.
Rudy C.
Sim, os dois problemas são separados. Já foi discutido no git hub github.com/magento/magento2/issues/15035 (veja os últimos 3 a 4 comentários). Também pode ser resolvido na versão mais recente do magento.
Nitin Vala
Funciona para 2.2.4
Joel Davey
8

Para a versão 2.2.6 do magento, substitua o código abaixo no seu tema. Caminho do arquivo lib / web / magnifier / magnifier.js Substitua em app / design / frontend / vendor / module / web

$box.on('mousemove', onMousemove);
_init($box, customUserOptions);

Substitua por.

   $box.on('mousemove', onMousemove);
   $box.on('mouseleave', mouseleave);
   function mouseleave(e) {
           onThumbLeave();
           isOverThumb = false;
           $magnifierPreview.addClass(MagnifyCls.magnifyHidden);
        }
   _init($box, customUserOptions);
Aniket Prajapati
fonte
Obrigado, está funcionando !!
Manish Goswami
Obrigado. Funcionou ...
soofz 30/07/19
6

Eu atualizo para a v2.2.6 e ele não funciona mais depois que
eu edito o código assim e funciona:

 $box.on('mousemove', onMousemove);
    $box.on('mouseleave', mouseleave);
    function mouseleave(e) {
        onThumbLeave();
        isOverThumb = false;
        $(largeWrapper).addClass(MagnifyCls.magnifyHidden);
    }
    // _init($box, gOptions);
    _init($box, customUserOptions);
Rudak
fonte
11
Acabei de atualizar para 2.2.6 e usei esse código. Ainda não está funcionando para mim alguma outra sugestão? Obrigado. Para sua informação, eu estava usando o patch anterior sugerido por Nitin sem problemas.
Rudy C.
Eu edito o código com: $ (largeWrapper). ... qual é o seu erro frontal?
Rudak 22/09/19
11
isso resolveu meu problema na versão 2.2.6, obrigado.
CDzWebDev 08/11
11
Isso funciona para mim no 2.3
BartZalas 01/01/19
3

Parece que esse é o bug de Magetno.

Verifique aqui .

A correção foi mesclada com o Lattest Magetno 2.2.4 .

Se você estiver executando uma versão anterior, poderá modificar o arquivo abaixo como solução alternativa.

lib / web / magnifier / magnifier.js

       $box.on('mousemove', onMousemove);
     _init($box, gOptions);

Referência: - Marque Este commit que é mesclado com o Magento 2.2.4

Update: - Se você mesclar esse PR e isso será problema de zoom para você. Parece que não está funcionando, corrigindo um problema bagunçado com outro. Faça por sua conta e risco !!!

TBS Mage
fonte
3

Com a versão mais recente, a solução acima ainda não funcionou, tive que especificar a classe de visualização da lente de aumento especificamente assim:

$box.on('mousemove', onMousemove);
$box.on('mouseleave', mouseleave);
function mouseleave(e) {
    onThumbLeave();
    isOverThumb = false;
    $('.magnifier-preview').addClass(MagnifyCls.magnifyHidden);
}
_init($box, customUserOptions);
user73198
fonte
Isso não funciona para mim em uma nova instalação da 2.3.0. Alguma sugestão?
Rudy C.
1 
$box.on('mousemove', onMousemove);
$box.on('mouseleave', mouseleave);
function mouseleave(e) {
   onThumbLeave();
   isOverThumb = false;
   $largeWrapper.addClass(MagnifyCls.magnifyHidden);
}
_init($box, gOptions);

Este código está funcionando bem.

Obrigado,

Priya
fonte
1

Onde você pode encontrar o originel magnifier.js? Temos esse problema e usamos o tema Ultimo. No entanto, app / design / frontend / Infortis / ultimo é o quão longe chegamos. Então é claro que posso criar as pastas web / magnifier /, mas de onde obter o magnifier.js certo?

Alguém é um bom exemplo? obrigado

Emile
fonte
O original magnifier.js está na pasta MagentoRoot / lib / web / magnifier /.
Nitin Vala