Magento 2-Fehler in swatchRenderer.js in der Eigenschaft 'updateData'

7

Ich habe diesen Fehler in der Kategorieseite. Wenn ich die Farbe von der Farbfeldoption ändere, wird sie in den Produktbildcontainer geladen und zeigt einen Fehler in SwatchRenderer.js an

Hier ist der Fehler:

Uncaught TypeError: Cannot read property 'updateData' of undefined
at $.(anonymous function).(anonymous function).processUpdateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1168:25)
at $.(anonymous function).(anonymous function).processUpdateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function).updateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1137:22)
at $.(anonymous function).(anonymous function).updateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function)._ProductMediaCallback (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1103:18)
at $.(anonymous function).(anonymous function)._ProductMediaCallback (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at Object.mediaSuccessCallback [as success] (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:981:29)
at i (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:27449)
at Object.fireWith [as resolveWith] (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:28213)
at y (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:4:22721)

Ich verwende die benutzerdefinierte Datei jquery.min und habe mit sly.js einen benutzerdefinierten Schieberegler erstellt. Ich hoffe, er hilft Ihnen dabei, mein Problem gut zu verstehen.

TIA

Jassi BANga
quelle
Können Sie uns Ihre benutzerdefinierten js zeigen?
Khoa TruongDinh
( ajax.googleapis.com/ajax/libs/jquery/1.12.4/… ) Dies ist die benutzerdefinierte js, über die ich spreche
Jassi BANga
1
Links für mich gebrochen
Jamil
@leek Ich scheine durch, dass das Problem von den benutzerdefinierten js kam. Gibt es einen Grund, warum Sie die benutzerdefinierte jquery min js verwenden?
Khoa TruongDinh

Antworten:

7

Da ich dieses Problem nicht replizieren kann, fällt es mir schwer zu sagen, was genau das Problem ist, aber wenn ich dem Code aus dem Fehler folge, scheint es zu sein, wenn $('[data-gallery-role=gallery-placeholder]').data('gallery')es undefiniert ist. Die Ursache hierfür ist wahrscheinlich, dass eine Klasse oder ein Datenattribut entfernt / geändert wird.

Um dies zu bestätigen, fügen Sie dies in Ihre Konsole ein, wenn Sie das Problem replizieren:

console.log(jQuery('[data-gallery-role=gallery-placeholder]').data('gallery'));

So sieht das Konsolenprotokoll für mich aus: Geben Sie hier die Bildbeschreibung ein

Wenn undefined zurückgegeben wird, ist dies Ihr Problem.

Debuggen

Um dies zu beheben, überprüfe ich zunächst, ob die folgenden Elemente / Selektoren im DOM vorhanden sind. Wenn sie nicht existieren, versuchen Sie herauszufinden, wo sie sich im Kern befinden, und fügen Sie sie wieder hinzu.

  • [data-gallery-role=gallery-placeholder]
  • .column.main
  • .product-item-info

Ich sage dies, da das Befolgen des Codes aus diesem Fehler mich zu Folgendem führt:

  1. gallery.updateData(imagesToUpdate);
  2. mediaGallerySelector: '[data-gallery-role=gallery-placeholder]'
  3. this.updateBaseImage(images, $main, isProductViewExist);
  4. $main = isProductViewExist ? $this.parents('.column.main') : $this.parents('.product-item-info')

Eine andere Option könnte sein, dass data('gallery')nicht festgelegt wird, wenn dies der Fall ist, könnte das Problem irgendetwas sein.

Anmerkungen

Es ist hilfreich, wenn Sie die Version von Magento, an der Sie arbeiten, und alle Anpassungen, die Sie an Farbfeldern und / oder dem Galerie-DOM und / oder JS vorgenommen haben, einschließen können.

Eine schnelle Möglichkeit, dies zu debuggen, besteht darin, alle Änderungen, die Sie an Farbfeldern / Galerien vorgenommen haben, zurückzusetzen und zu überprüfen, ob dies funktioniert, wenn die Dateien nacheinander wieder hinzugefügt werden, bis Sie die gefunden haben, die das Problem verursacht hat. Führen Sie dann ein Diff für diese Datei aus und gehen Sie von dort aus.

Ben Crook
quelle
3

Wir hatten das gleiche Problem, bis wir feststellten, dass wir den Preis von Produkten auf unserer Kategorieauflistungsseite versteckten. Anscheinend swatch-renderer.jsstützt sich auf Klassen in der Preisbox, um festzustellen, ob es auf der Produktansicht oder Produktlistenseite ist. Nach dem erneuten Aktivieren der Preisbox funktionierte die Farbfeldumschaltung wieder.

Lauch
quelle
1
Großartig, war genau das, wonach ich gesucht habe. Danke :)
Narendra Vyas
3

Ich habe einen ziemlich effizienten Weg gefunden, dies zu beheben:

Kopieren Sie die /vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js-Datei nach app/design/YourName/YourTheme/Magento_Swatches/web/js/swatch-renderer.jsund ersetzen Sie die updateBaseImage()(Zeile ~ 1152) durch Folgendes:

updateBaseImage: function (images, context, isInProductView, eventName) {
    var gallery = context.find(this.options.mediaGallerySelector).data('gallery');

    if (eventName === undefined && gallery !== undefined) {
        this.processUpdateBaseImage(images, context, isInProductView, gallery);
    } else {
        context.find(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
            loadedGallery = context.find(this.options.mediaGallerySelector).data('gallery');
            this.processUpdateBaseImage(images, context, isInProductView, loadedGallery);
        }.bind(this));
    }
},

Sie können die Datei auch mit einem Modul überschreiben, aber ich fand, dass dies der einfachste Weg ist. Es stehen zahlreiche Informationen zur Verfügung, um eine JS-Komponente mithilfe eines Moduls zu überschreiben.

Es ist seltsam, dass sie definieren galleryund einfach davon ausgehen, dass es später definiert wird. Das Hinzufügen eines Checks für dieses Problem behebt alles.

Es funktioniert perfekt! Ich hoffe nur, dass die Magento-Entwickler dies aufgreifen und dies im Core-Code implementieren.

Daan van den Bergh
quelle
Dies funktioniert bei mir nicht, da es processUpdateBaseImage()inswatch-renderer.js
Mohit Rane
@MohitRane wurde möglicherweise in den letzten Magento-Versionen geändert? Wenn ich Zeit habe, werde ich mich darum kümmern.
Daan van den Bergh
0

Selbes Problem hier. Was passiert ist, dass ich einen Container für product.media außerhalb von .column.main erstellt habe. Dann suchte swatch-renderer.js nach dem übergeordneten Element von product.media (.column.main). Die Lösung bestand lediglich darin, die Zeilen swatch-renderer.js, die auf .column.main verweisen, in meinen neuen Container, product-container, zu ändern .

Ich hoffe es hilft.

Jorge Henrique
quelle
0

Ich habe diesen Fehler erhalten, als ich Bearbeiten auf der Seite des Warenkorbs ausgewählt habe. Ein updateBaseImagenach dieser Zeile:

imagesToUpdate = this._setImageIndex(imagesToUpdate);

Ersetzen:

this._updateGallery(gallery, imagesToUpdate, isInitial);

Mit:

 if (gallery) {
    this._updateGallery(gallery, imagesToUpdate, isInitial);
 } else {
    context.find(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
    gallery = context.find(this.options.mediaGallerySelector).data('gallery');
        this._updateGallery(gallery, imagesToUpdate, isInitial);
    }.bind(this));
}


// Add this method. To avoid code duplication
_updateGallery: function (gallery, imagesToUpdate, isInitial) {
    gallery.updateData(imagesToUpdate);

    if (isInitial) {
        $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
    } else {
        $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
            selectedOption: this.getProduct(),
            dataMergeStrategy: this.options.gallerySwitchStrategy
        });
    }

    gallery.first();
},

Der Fehler tritt auf, weil der Swatcher erwartet, dass das Fotorama geladen wird. Die elseBedingung behandelt die erste Ladung und die ifHandle die Farbänderung des Swatchers, um das Karussell zu aktualisieren, da dies gallerynicht undefinedmehr der Fall ist .

Dies geschieht in den Katalogansichten und auf der Produktseite

LTroya
quelle
0

Ich stehe vor diesem Problem als und löse es in magento2.3.0.

Überprüfen Sie zuerst den Quellcode der Produktspalten- Seitenklasse "Spaltenhaupt", wenn er nicht gefunden wurde. Entfernen Sie dann Ihr Layout an dieser Stelle

app/design/frontend/YourName/YourTheme/Magento_Theme/page_layout 

als das funktioniert.

Praveen Kumar Sharma
quelle