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

9

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:

entrez la description de l'image ici

Mayur Rathod
la source
définir un z-index plus élevé pour zoomer, résoudra votre problème
Manoj Deswal
@ManojDeswal, j'ai essayé d'utiliser z-index: 99999; mais ça ne marche pas. Pouvez-vous me fournir des solutions appropriées.
Mayur Rathod
si vous avez une URL en ligne, je peux vous aider
Manoj Deswal
Cela fonctionne bien dans mon système local.
Mayur Rathod
passez votre URL en ligne, après inspection, je peux vous dire la solution exacte
Manoj Deswal

Réponses:

19

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.

Nitin Vala
la source
Magento 2.2.5. J'ai fait ce changement, effacé la mise en cache et cela ne fonctionne toujours pas comme il se doit. D'autres suggestions?
Rudy C.
Veuillez exécuter la commande suivante à la racine du répertoire magento. -> php bin / magento s: up -> php bin / magento s: d: c faites-moi savoir si cela ne fonctionnera pas après l'exécution de la commande ci-dessus
Nitin Vala
Ça a marché! Le texte du nom de l'image est toujours rogné en bas. Est-ce quelque chose que vous connaissez? J'espérais que la résolution du problème de survol de l'image résoudrait également le problème du texte de l'image, mais il semble être distinct? Merci pour votre aide et votre temps, Nitin.
Rudy C.
Oui, les deux problèmes sont séparés.C'est déjà discuté sur git hub github.com/magento/magento2/issues/15035 (voir les 3-4 derniers commentaires). Il peut également être résolu dans la dernière version de magento.
Nitin Vala
Fonctionne pour 2.2.4
Joel Davey
8

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);
Aniket Prajapati
la source
Merci ça marche !!
Manish Goswami
Merci. Ça a marché ...
soofz
6

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);
Rudak
la source
1
Je viens de mettre à jour 2.2.6 et j'ai utilisé ce code. Ne fonctionne toujours pas pour moi une autre suggestion? Merci. Pour info, j'utilisais le patch précédent suggéré par Nitin sans aucun problème.
Rudy C.
J'édite le code avec: $ (largeWrapper). ... quelle est votre erreur avant?
rudak
1
cela a résolu mon problème sur 2.2.6 merci.
CDzWebDev
1
Cela fonctionne pour moi le 2.3
BartZalas
3

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 !!!

TBS Mage
la source
3

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);
user73198
la source
Cela ne fonctionne pas pour moi sur une nouvelle installation de 2.3.0. Aucune suggestion?
Rudy C.
1
$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,

Priya
la source
1

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

Emile
la source
Magnifier.js d'origine se trouve sous MagentoRoot / lib / web / magnifier / folder.
Nitin Vala