Tôi có lỗi này trong trang chuyên mục. Khi tôi thay đổi màu từ tùy chọn swatch, nó sẽ tải sao vào bộ chứa hình ảnh sản phẩm và hiển thị lỗi trong SwatchRenderer.js

đây là lỗi:

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)

Tôi đang sử dụng tệp jquery.min tùy chỉnh và tạo một thanh trượt tùy chỉnh với sly.js hy vọng nó sẽ giúp bạn hiểu rõ vấn đề của tôi.

TIA

Vì tôi không thể sao chép vấn đề này nên tôi khó có thể nói chính xác vấn đề là gì nhưng theo mã từ lỗi thì dường như $('[data-gallery-role=gallery-placeholder]').data('gallery')không xác định được. Nguyên nhân của điều này có thể là do một lớp hoặc thuộc tính dữ liệu bị xóa / thay đổi.

Để xác nhận đây là trường hợp khi bạn sao chép vấn đề, hãy dán nó vào bảng điều khiển của bạn:

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

Đây là cách bản ghi giao diện điều khiển tìm cho tôi:

Nếu không xác định được trả lại thì đây là vấn đề của bạn.

Gỡ lỗi

Để giải quyết vấn đề này, điều đầu tiên tôi làm là kiểm tra các yếu tố / bộ chọn sau tồn tại trong DOM. Nếu chúng không tồn tại, hãy thử tìm vị trí của chúng trong lõi và thêm chúng trở lại.

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

Tôi nói điều này như sau mã trở lại từ lỗi này dẫn tôi đến sau:

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')

Một lựa chọn khác có thể data('gallery')không được đặt ra, nếu đó là vấn đề có thể là bất cứ điều gì.

Ghi chú

Nó sẽ hữu ích nếu bạn có thể bao gồm phiên bản Magento bạn đang làm việc và bất kỳ tùy chỉnh nào bạn đã thực hiện xung quanh swatches và / hoặc thư viện DOM và / hoặc JS.

Một cách nhanh chóng để gỡ lỗi này có thể là hoàn nguyên tất cả các thay đổi bạn đã thực hiện cho swatches / gallery và xem nó có hoạt động không, nếu nó thêm từng tệp một cho đến khi bạn tìm thấy một trong những nguyên nhân gây ra sự cố. Sau đó chạy một diff trên tập tin đó và đi từ đó.

Chúng tôi đã có vấn đề tương tự cho đến khi chúng tôi nhận ra rằng chúng tôi đang che giấu giá sản phẩm trên trang danh sách danh mục của chúng tôi. Rõ ràng, swatch-renderer.jsdựa vào các lớp trên hộp giá để xác định xem nó nằm trên chế độ xem sản phẩm hoặc trang danh sách sản phẩm. Sau khi kích hoạt lại hộp giá, chuyển đổi màu swatch bắt đầu hoạt động trở lại.

Tôi tìm thấy một cách khá hiệu quả để khắc phục điều này:

Sao chép /vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js-file vào app/design/YourName/YourTheme/Magento_Swatches/web/js/swatch-renderer.jsvà thay thế updateBaseImage()(dòng ~ 1152) bằng cách sau:

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));
    }
},

Bạn cũng có thể ghi đè tệp bằng mô-đun, nhưng tôi thấy đây là cách dễ nhất. Có rất nhiều thông tin có sẵn để ghi đè thành phần JS bằng mô-đun.

Thật kỳ lạ khi họ định nghĩa galleryvà chỉ cho rằng nó sẽ được xác định sau đó. Thêm một kiểm tra cho điều này sửa chữa mọi thứ.

Nó hoạt động hoàn hảo! Tôi chỉ hy vọng rằng Magento Dev sẽ tiếp nhận điều này và thực hiện điều này trong mã lõi.

Cùng một vấn đề ở đây. Điều gì đã xảy ra là tôi đã tạo ra một container cho sản phẩm.media bên ngoài .column.main. Sau đó, swatch-renderer.js đang tìm kiếm cha mẹ của sản phẩm.media (.column.main), giải pháp chỉ là thay đổi các dòng swatch-renderer.js tham chiếu đến .column.main sang vùng chứa mới, thùng chứa sản phẩm của tôi .

Hy vọng nó giúp.

Tôi đã gặp lỗi này khi tôi chọn chỉnh sửa trên trang của giỏ hàng xem. Vào updateBaseImagesau dòng này:

imagesToUpdate = this._setImageIndex(imagesToUpdate);

Thay thế:

this._updateGallery(gallery, imagesToUpdate, isInitial);

Với:

 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();
},

Lỗi xảy ra bởi vì swatcher hy vọng fotorama sẽ được tải. Điều elsekiện xử lý tải đầu tiên và ifxử lý thay đổi màu swatcher để cập nhật băng chuyền, vì gallerykhông undefinedcòn nữa.

Điều này xảy ra trên lượt xem và trang sản phẩm của cửa hàng

Tôi đang đối mặt với vấn đề này hơn và giải quyết nó trong magento2.3.0.

Đầu tiên Kiểm tra lớp "cột chính" Mã nguồn của trang xem sản phẩm nếu không tìm thấy hơn loại bỏ bố cục của bạn vị trí này

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

hơn là làm việc