swatchRenderer.js 中的 Magento 2 错误答案

【问题标题】：Magento 2 error in swatchRenderer.jsswatchRenderer.js 中的 Magento 2 错误
【发布时间】：2016-03-18 11:44:21
【问题描述】：

我已经覆盖了app\code\Mydirectory\CustomSwatches\view\frontend\web\js\SwatchRenderer.js 中的magento SwatchRenderer.js 文件。

我的问题是我的产品页面加载出错：

未捕获的类型错误：无法读取未定义的属性“updateData”

我发现SwatchRenderer.js上的data('gallery')下面的函数是未定义的。

updateBaseImage: function (images, context, isProductViewExist) {
        var justAnImage = images[0];

        if (isProductViewExist) {
            context
                .find('[data-gallery-role=gallery-placeholder]')
                .data('gallery')
                .updateData(images);
        } else if (justAnImage && justAnImage.img) {
            context.find('.product-image-photo').attr('src', justAnImage.img);
        }
    }

我查看了一个 Magento 2 演示站点。在该站点上，上述数据属性设置为 JavaScript 对象。目标元素是具有上述属性的 div。但是在我的网站中它是未定义的，显然我认为我的网站上没有设置数据属性。谁能帮我找到上述元素的设置器函数/视图/文件？任何帮助，将不胜感激。谢谢。

【问题讨论】：

标签： javascript magento2

【解决方案1】：

您的 Magento 实例中使用了什么主题？您是否重命名了容器类名称？

在 SwatchRenderer.js 文件的第 202 行可以找到一段有趣的代码。在 _create 函数下，您将看到画廊变量的初始化，如 here

您会注意到它会在 .column.main 元素下找到具有数据库的元素。因此，缺少列 main 元素将返回空响应。

【讨论】：

您的 Magento 实例中使用了什么主题？您是否重命名了容器类名称？一个自定义主题，不，我没有重命名容器类。他们在适当的地方。元素[data-gallery-role=gallery-placeholder] 在那里。但它缺少data-gallery（不是data-gallery-role）属性。
只是 SwatchRenderer 文件？
您的产品视图页面的 HTML 代码。您也可以尝试在浏览器控制台上执行 jQuery("[data-gallery-role=gallery-placeholder]") 以检查所述元素是否存在于产品视图页面上。接下来，如果元素确实存在，请尝试执行 jQuery("[data-gallery-role=gallery-placeholder]",".column.main")。请张贴上述 jQuery 代码的结果，以便我进一步解释您的问题的解决方案
@oliver 我做了这些实验，但失败了。 <div class="media-gallery" data-role="media-gallery"><div class="zoom-image"><a href="<?php echo $large; ?>" data-role="gallery-thumb"> <img src="<?php echo $medium; ?>" alt="<?php echo $product->getName();?>" title="<?php echo $product->getName();?>"/> </a> </div>
上面的代码是我在 Magento 默认的数据角色，我应该重命名它吗？

【解决方案2】：

我找到了一种非常有效的方法来解决这个问题：

将/vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js文件复制到app/design/YourName/YourTheme/Magento_Swatches/web/js/swatch-renderer.js，并将updateBaseImage()（~1152行）内的代码替换为以下内容：

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

诀窍是：此方法不等待画廊完全加载，而此事件 (gallery:loaded) 随时可用。通过将此添加到方法中，它可以正常工作。

我只是希望 Magento 开发人员能够理解这一点并在核心代码中实现这一点。

【讨论】：