Masalah pembesaran gambar produk pada halaman detail produk ketika menu tarik-turun memiliki area yang tumpang tindih dengannya

9

Zoom berfungsi dengan baik,

Tetapi ketika melayang pada menu drop-down kategori ke area tumpang tindih gambar produk dan menu drop-down, Zoom berfungsi normal, bahkan mouse masih pada menu drop-down.

Silakan periksa gambar yang diambil:

masukkan deskripsi gambar di sini

Mayur Rathod
sumber
atur z-index yang lebih tinggi untuk memperbesar, akan menyelesaikan masalah Anda
Manoj Deswal
@ ManojDeswal, saya sudah mencoba menggunakan z-index: 99999; tetapi tidak berhasil. Bisakah Anda memberi saya solusi yang tepat.
Mayur Rathod
jika Anda memiliki url online maka saya dapat membantu Anda
Manoj Deswal
Ini berfungsi dengan baik di sistem lokal saya.
Mayur Rathod
lewat URL online Anda, setelah memeriksa saya bisa memberi tahu Anda solusi tepat
Manoj Deswal

Jawaban:

19

Anda perlu mengganti kode lib / web / magnifier / magnifier.js dalam tema Anda seperti di bawah ini.

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

Ganti dengan.

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

Kita perlu menambahkan fungsi pada acara "mouseleave" dari blok gambar jika tidak zoom akan ditampilkan setelah mouse pergi dari blok gambar.
Silakan tambahkan kode di atas dan beri tahu saya jika Anda membutuhkan yang lain.

Nitin Vala
sumber
Magento 2.2.5. Saya membuat perubahan ini, dihapus cache dan masih tidak berfungsi sebagaimana mestinya. Ada saran lain?
Rudy C.
Silakan jalankan perintah berikut di root direktori magento. -> php bin / magento s: up -> php bin / magento s: d: c beri tahu saya jika itu tidak akan berfungsi setelah menjalankan perintah di atas
Nitin Vala
Itu berhasil! Teks dari nama gambar masih memotong bagian bawah, apakah ini sesuatu yang Anda kenal? Saya berharap bahwa memperbaiki masalah hover gambar juga akan memperbaiki masalah teks gambar tetapi tampaknya terpisah? Terima kasih atas bantuan dan waktu Anda, Nitin.
Rudy C.
Ya, kedua masalah ini terpisah. Sudah dibahas di git hub github.com/magento/magento2/issues/15035 (lihat 3-4 komentar terakhir). Itu juga dapat diselesaikan dalam rilis terbaru dari Magento.
Nitin Vala
Bekerja untuk 2.2.4
Joel Davey
8

Untuk magento versi 2.2.6 ganti kode di bawah ini dalam tema Anda. Jalur file lib / web / magnifier / magnifier.js Ganti dalam aplikasi / desain / antarmuka / vendor / modul / web

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

Ganti dengan.

   $box.on('mousemove', onMousemove);
   $box.on('mouseleave', mouseleave);
   function mouseleave(e) {
           onThumbLeave();
           isOverThumb = false;
           $magnifierPreview.addClass(MagnifyCls.magnifyHidden);
        }
   _init($box, customUserOptions);
Aniket Prajapati
sumber
Terima kasih itu berfungsi !!
Manish Goswami
Terima kasih. Ini berhasil ...
soofz
6

Saya memutakhirkan ke v2.2.6 dan tidak berfungsi lagi setelah itu
saya mengedit kode seperti ini dan berfungsi:

 $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
sumber
1
Saya baru saja memperbarui ke 2.2.6 dan menggunakan kode ini. Masih tidak bekerja untuk saya saran lain? Terima kasih. FYI Saya menggunakan tambalan sebelumnya yang disarankan oleh Nitin tanpa masalah.
Rudy C.
Saya mengedit kode dengan: $ (largeWrapper). ... apa kesalahan depan Anda?
rudak
1
ini menyelesaikan masalah saya di 2.2.6 terima kasih.
CDzWebDev
1
Ini bekerja untuk saya pada 2.3
BartZalas
3

Sepertinya ini adalah bug Magetno.

Periksa Di Sini .

Perbaikan telah digabungkan dengan Lattest Magetno 2.2.4 .

Jika Anda menjalankan versi yang lebih lama daripada Anda dapat memodifikasi file di bawah ini sebagai workarround.

lib / web / magnifier / magnifier.js

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

Referensi: - Periksa Komit ini yang digabung dengan Magento 2.2.4

Update: - Jika Anda menggabungkan PR ini dan daripada itu akan menjadi masalah zoom untuk Anda. Sepertinya tidak berfungsi, Memperbaiki satu Masalah yang dikacaukan dengan yang lain. Lakukan dengan risiko Anda sendiri !!!

TBS Mage
sumber
3

Dengan versi terbaru, solusi di atas masih tidak berfungsi, saya harus menentukan kelas pratinjau kaca pembesar khusus seperti ini:

$box.on('mousemove', onMousemove);
$box.on('mouseleave', mouseleave);
function mouseleave(e) {
    onThumbLeave();
    isOverThumb = false;
    $('.magnifier-preview').addClass(MagnifyCls.magnifyHidden);
}
_init($box, customUserOptions);
pengguna73198
sumber
Ini tidak berfungsi untuk saya pada instalasi baru 2.3.0. Ada saran?
Rudy C.
1
$box.on('mousemove', onMousemove);
$box.on('mouseleave', mouseleave);
function mouseleave(e) {
   onThumbLeave();
   isOverThumb = false;
   $largeWrapper.addClass(MagnifyCls.magnifyHidden);
}
_init($box, gOptions);

Kode ini berfungsi dengan baik.

Terima kasih,

Priya
sumber
1

Di mana Anda dapat menemukan magnifier.js originel? Kami memiliki masalah ini dan menggunakan tema Ultimo. Namun aplikasi / desain / antarmuka / Infortis / ultimo adalah seberapa jauh kita dapatkan. Lalu tentu saja saya bisa membuat web / kaca pembesar / folder tetapi dari mana mendapatkan kaca pembesar yang tepat.

Adakah yang bisa menjadi contoh? Terima kasih

Emile
sumber
Magnifier.js asli ada di bawah folder MagentoRoot / lib / web / magnifier /.
Nitin Vala