ドロップダウンメニューに重複領域がある場合、製品詳細ページの製品画像のズームの問題

ズームは正常に動作し、

ただし、カテゴリのドロップダウンメニューを商品画像とドロップダウンメニューの重複領域にホバーすると、マウスがまだドロップダウンメニューにある場合でも、ズームは正常に機能しています。

キャプチャ画像を確認してください：

以下のように、テーマのlib / web / magnifier / magnifier.jsのコードを置き換える必要があります。

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

交換してください。

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

画像ブロックの「mouseleave」イベントに関数を追加する必要があります。そうしないと、画像ブロックからマウスが離れた後にズームが表示されます。
上記のコードを追加して、他に何か必要な場合はお知らせください。

magentoバージョン2.2.6の場合、テーマ内の以下のコードを置き換えます。ファイルパスlib / web / magnifier / magnifier.js app / design / frontend / vendor / module / webで置き換え

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

交換してください。

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

私はv2.2.6にアップグレードしましたが、その後機能しなくなりました。その後、
次のようにコードを編集して機能します。

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

これはMagetnoのバグのようです。

ここをチェックしてください。

修正はLattest Magetno 2.2.4と統合されました。

古いバージョンを実行している場合は、回避策として以下のファイルを変更できます。

lib / web / magnifier / magnifier.js

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

参照： -Magento 2.2.4とマージされるこのコミットを確認してください

Update：- このPRをマージすると、ズームの問題が発生します。そのように機能していないように見えますが、ある問題を他の問題で修正しています。あなた自身のリスクでそれをしてください!!!

最新バージョンでは、上記のソリューションはまだ機能しませんでした。具体的には次のように拡大鏡プレビュークラスを指定する必要がありました。

$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);

このコードは正常に動作しています。

おかげで、

originel magnifier.jsはどこにありますか？この問題があり、Ultimoテーマを使用しています。ただし、app / design / frontend / Infortis / ultimoがどれだけの距離に到達するかです。もちろん、web / magnifier /フォルダーを作成できますが、どこから適切なmagnifier.jsを取得できますか？

誰かいい例がありますか？ありがとう