Problema con el zoom de la imagen del producto en la página de detalles del producto cuando el menú desplegable tiene un área superpuesta

9

Zoom funciona bien,

Pero al pasar el cursor sobre el menú desplegable de categoría al área de superposición de la imagen del producto y el menú desplegable, el zoom funciona normalmente, incluso el mouse todavía está en el menú desplegable.

Por favor, compruebe la captura de imagen:

magento2 less-css zoom

— Mayur Rathod
fuente

establecer un índice z más alto para hacer zoom, resolverá su problema

— Manoj Deswal

@ManojDeswal, me intentaron usar el índice z: 99999; Pero no funciona. ¿Me puede proporcionar soluciones adecuadas?

— Mayur Rathod

si tienes una URL en línea, entonces puedo ayudarte

— Manoj Deswal

Funciona bien en mi sistema local.

— Mayur Rathod

pase su URL en línea, después de inspeccionar puedo decirle la solución exacta

— Manoj Deswal

19

Debe reemplazar el código de lib / web / magnifier / magnifier.js en su tema como se muestra a continuación.

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

Reemplácelo con.

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

Necesitamos agregar la función en el evento "mouseleave" del bloque de la imagen, de lo contrario, se mostrará el zoom después de que el mouse salga del bloque de la imagen.
Agregue el código anterior y avíseme si necesita algo más.

— Nitin Vala
fuente

Magento 2.2.5. Hice este cambio, borré el caché y todavía no funciona como debería. ¿Cualquier otra sugerencia?

— Rudy C.

Ejecute el siguiente comando en la raíz del directorio magento. -> php bin / magento s: arriba -> php bin / magento s: d: c avíseme si no funcionará después de ejecutar el comando anterior

— Nitin Vala

¡Eso funciono! El texto del nombre de la imagen sigue recortando la parte inferior. ¿Es esto algo con lo que está familiarizado? Esperaba que solucionar el problema de desplazamiento de la imagen también solucionara el problema del texto de la imagen, pero parece estar separado. Gracias por su ayuda y tiempo, Nitin.

— Rudy C.

Sí, los dos problemas están separados. Ya se discutió en git hub github.com/magento/magento2/issues/15035(ver los últimos 3-4 comentarios). También puede resolverse en la última versión de magento.

— Nitin Vala

Funciona para 2.2.4

— Joel Davey

8

Para la versión 2.2.6 de magento, reemplace el código siguiente en su tema. Ruta de archivo lib / web / magnifier / magnifier.js Reemplazar en app / design / frontend / vendor / module / web

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

Reemplácelo con.

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

— Aniket Prajapati
fuente

Gracias esta funcionando !!

— Manish Goswami

Gracias. Ha funcionado ...

— soofz

6

Actualizo a v2.2.6 y ya no funciona después de eso
edito el código de esta manera y 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
fuente

1

Acabo de actualizar a 2.2.6 y usé este código. ¿Todavía no funciona para mí alguna otra sugerencia? Gracias. Para su información, estaba usando el parche anterior sugerido por Nitin sin problemas.

— Rudy C.

Edito el código con: $ (largeWrapper). ... ¿Cuál es tu error frontal?

— rudak

1

Esto resolvió mi problema en 2.2.6 gracias.

— CDzWebDev

1

Esto funciona para mí en 2.3

— BartZalas

3

Parece que este es el error de Magetno.

Compruebe aquí .

Fix se ha fusionado con Lattest Magetno 2.2.4 .

Si está ejecutando una versión anterior, puede modificar el siguiente archivo como solución alternativa.

lib / web / magnifier / magnifier.js

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

Referencia: - Marque esta confirmación que se combina con Magento 2.2.4

Update: - Si fusiona este PR y luego será un problema de zoom para usted. No funciona Parece, solucionando un problema en mal estado con otro. ¡Hazlo bajo tu propio riesgo!

— TBS Mage
fuente

3

Con la última versión, la solución anterior aún no funcionaba, tuve que especificar la clase de vista previa de lupa específicamente así:

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

— usuario73198
fuente

Esto no funciona para mí en una nueva instalación de 2.3.0. ¿Alguna sugerencia?

— 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 funciona bien.

Gracias,

— Priya
fuente

1

¿Dónde puedes encontrar el originel magnifier.js? Tenemos este problema y utilizamos el tema Ultimo. Sin embargo, app / design / frontend / Infortis / ultimo es lo lejos que llegamos. Entonces, por supuesto, puedo crear las carpetas web / lupa / pero ¿de dónde obtener la lupa.js correcta?

¿Alguien un buen ejemplo? Gracias

— Emile
fuente

Magnifier.js original está en la carpeta MagentoRoot / lib / web / magnifier / folder.

— Nitin Vala