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

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:

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.

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.

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.

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.

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

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.