浏览文章

文章信息

Magento2【前端】如何继承js修改How to overwrite Swatch Renderer JS in Magento 2 15667


在magento2中,可以使用mixin轻松覆盖任何js。所以今天我将展示如何覆盖核心样例渲染器Js( core Swatch Renderer Js)。

下面以swatch-renderer.js为例修改swatch-renderer.js

第一步:创建 app/code/VendorName/ModuleName/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'VendorName_ModuleName/js/swatch-renderer-mixin': true
            }
        }
    }
};

第二步:创建 app/code/VendorName/ModuleName/view/frontend/web/js/swatch-renderer-mixin.js

define(['jquery'], function ($) {
    'use strict';

    return function (SwatchRenderer) {
        $.widget('mage.SwatchRenderer', $['mage']['SwatchRenderer'], {
            _init: function () {
                console.log('getProductSwatchRenderer');
                this._super();
            }
        });
        return $['mage']['SwatchRenderer'];
    };
});

提示:

以上覆盖的是_init方法,想覆盖其他方法自行选择。

比如覆盖_RenderControls,js的对象字面量覆盖,这个是个前端都懂。

现在,您需要删除静态内容并部署静态内容。

bin/magento s:s:d -f


原创