Problem beim Zoomen des Produktbilds auf der Produktdetailseite, wenn das Dropdown-Menü einen Überlappungsbereich aufweist

9

Zoom funktioniert gut,

Wenn Sie den Mauszeiger über das Dropdown-Menü Kategorie zum Überlappungsbereich von Produktbild und Dropdown-Menü bewegen, funktioniert der Zoom normal, auch wenn sich die Maus noch im Dropdown-Menü befindet.

Bitte überprüfen Sie das Aufnahmebild:

magento2 less-css zoom

— Mayur Rathod
quelle

Setzen Sie einen höheren Z-Index auf Zoom, um Ihr Problem zu lösen

— Manoj Deswal

@ManojDeswal, ich wurde versucht, z-Index zu verwenden: 99999; aber es funktioniert nicht. Können Sie mir die richtigen Lösungen anbieten?

— Mayur Rathod

Wenn Sie eine Online-URL haben, kann ich Ihnen helfen

— Manoj Deswal

In meinem lokalen System funktioniert es einwandfrei.

— Mayur Rathod

— Übergeben

19

Sie müssen den Code von lib / web / magnifier / magnifier.js in Ihrem Thema wie folgt ersetzen.

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

Ersetzen Sie es durch.

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

Wir müssen eine Funktion für das "Mausblatt" -Ereignis des Bildblocks hinzufügen, da sonst der Zoom angezeigt wird, nachdem die Maus den Bildblock verlassen hat.
Bitte fügen Sie den obigen Code hinzu und lassen Sie mich wissen, wenn Sie noch etwas benötigen.

— Nitin Vala
quelle

Magento 2.2.5. Ich habe diese Änderung vorgenommen, den Cache gelöscht und es funktioniert immer noch nicht so, wie es sollte. Irgendwelche anderen Vorschläge?

— Rudy C.

Bitte führen Sie den folgenden Befehl im Stammverzeichnis des Magento-Verzeichnisses aus. -> php bin / magento s: up -> php bin / magento s: d: c lass es mich wissen, wenn es nach dem obigen Befehl nicht funktioniert

— Nitin Vala

Das hat funktioniert! Der Text aus dem Namen des Bildes schneidet immer noch den unteren Rand ab. Ist Ihnen das vertraut? Ich hatte gehofft, dass das Beheben des Bild-Hover-Problems auch das Bild-Text-Problem beheben würde, aber es scheint separat zu sein? Vielen Dank für Ihre Hilfe und Zeit, Nitin.

— Rudy C.

Ja, die beiden Probleme sind getrennt. Sie werden bereits auf git hub github.com/magento/magento2/issues/15035 (siehe letzte 3-4 Kommentare) besprochen. Es kann auch in der neuesten Version von Magento behoben werden.

— Nitin Vala

Funktioniert für 2.2.4

— Joel Davey

8

Für Magento Version 2.2.6 ersetzen Sie den folgenden Code in Ihrem Thema. Dateipfad lib / web / magnifier / magnifier.js In app / design / frontend / vendor / module / web ersetzen

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

Ersetzen Sie es durch.

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

— Aniket Prajapati
quelle

Danke, es funktioniert !!

— Manish Goswami

Vielen Dank. Es hat funktioniert ...

— Soofz

6

Ich aktualisiere auf v2.2.6 und es funktioniert nicht mehr, danach
bearbeite ich den Code wie folgt und es funktioniert:

 $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
quelle

1

Ich habe gerade auf 2.2.6 aktualisiert und diesen Code verwendet. Arbeiten Sie immer noch nicht für mich? Vielen Dank. Zu Ihrer Information Ich habe den von Nitin vorgeschlagenen vorherigen Patch ohne Probleme verwendet.

— Rudy C.

Ich bearbeite den Code mit: $ (largeWrapper). ... was ist dein Frontfehler?

— Rudak

1

Dies löste mein Problem am 2.2.6. Danke.

— CDzWebDev

1

Dies funktioniert für mich am 2.3

— BartZalas

3

Sieht so aus, als wäre dies Magetnos Fehler.

Überprüfen Sie hier .

Fix wurde mit Lattest Magetno 2.2.4 zusammengeführt .

Wenn Sie eine ältere Version ausführen, können Sie die folgende Datei als Workarround ändern.

lib / web / magnifier / magnifier.js

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

Referenz: - Aktivieren Sie Dieses Commit, das mit Magento 2.2.4 zusammengeführt wird

Update: - Wenn Sie diese PR zusammenführen und dann wird es ein Zoomproblem für Sie sein. Es funktioniert nicht Wie es aussieht, ein Problem zu beheben, das mit dem anderen durcheinander gebracht wurde. Mach es auf eigenes Risiko !!!

— TBS Magier
quelle

3

Mit der neuesten Version funktionierte die obige Lösung immer noch nicht. Ich musste die Vorschau der Lupenklasse wie folgt angeben:

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

— user73198
quelle

Dies funktioniert bei einer Neuinstallation von 2.3.0 bei mir nicht. Irgendwelche Vorschläge?

— Rudy C.

1

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

Dieser Code funktioniert gut.

Vielen Dank,

— Priya
quelle

1

Wo finden Sie die originel magnifier.js? Wir haben dieses Problem und verwenden das Ultimo-Thema. App / Design / Frontend / Infortis / Ultimo ist jedoch, wie weit wir kommen. Dann kann ich natürlich das Web / die Lupe / die Ordner erstellen, aber woher bekomme ich die richtige Lupe.js?

Ist jemand ein gutes Beispiel? Vielen Dank

— Emile
quelle

Die ursprüngliche Datei magnifier.js befindet sich im Ordner MagentoRoot / lib / web / magnifier /.

— Nitin Vala