Problème de zoom de l'image du produit sur la page des détails du produit lorsque le menu déroulant présente une zone de chevauchement

Le zoom fonctionne bien,

Mais lorsque vous passez la souris sur le menu déroulant de catégorie dans la zone de chevauchement de l'image du produit et du menu déroulant, le zoom fonctionne normalement, même la souris est toujours dans le menu déroulant.

Veuillez vérifier l'image de capture:

Vous devez remplacer le code de lib / web / magnifier / magnifier.js dans votre thème comme ci-dessous.

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

Remplacez-le par.

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

Nous devons ajouter une fonction sur l'événement "mouseleave" du bloc d'image sinon le zoom s'affichera après le départ de la souris du bloc d'image.
Veuillez ajouter le code ci-dessus et faites-moi savoir si vous avez besoin d'autre chose.

Pour la version 2.2.6 de magento, remplacez le code ci-dessous dans votre thème. Chemin du fichier lib / web / magnifier / magnifier.js Remplacer dans app / design / frontend / vendor / module / web

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

Remplacez-le par.

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

Je mets à niveau vers la version 2.2.6 et cela ne fonctionne plus après avoir
édité le code comme ceci et cela fonctionne:

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

On dirait que c'est le bug de Magetno.

Vérifiez ici .

Le correctif a été fusionné avec Lattest Magetno 2.2.4 .

Si vous utilisez une version plus ancienne que vous pouvez modifier le fichier ci-dessous comme solution de contournement.

lib / web / magnifier / magnifier.js

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

Référence: - Cochez cette validation qui est fusionnée avec Magento 2.2.4

Update: - Si vous fusionnez ce PR et que ce sera un problème de zoom pour vous. Cela ne fonctionne pas ressemble à, résoudre un problème foiré avec un autre. Faites-le à vos risques et périls !!!

Avec la dernière version, la solution ci-dessus ne fonctionnait toujours pas, j'ai dû spécifier la classe d'aperçu de la loupe spécifiquement comme ceci:

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

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

Ce code fonctionne bien.

Merci,

Où pouvez-vous trouver le magnifier.js originel? Nous avons ce problème et utilisons le thème Ultimo. Cependant, app / design / frontend / Infortis / ultimo est notre chemin. Bien sûr, je peux créer le web / loupe / dossiers, mais d'où obtenir le bon magnifier.js?

Quelqu'un un bon exemple? Merci