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:

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

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