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:

magento2 less-css zoom

— Mayur Rathod
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

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

Magnifier.js d'origine se trouve sous MagentoRoot / lib / web / magnifier / folder.

— Nitin Vala