1、require.js定义继承文件

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

2、继承修改样例

define(['jquery'], function ($) {
    'use strict';
    return function (SwatchRenderer) {
        console.log('getProductSwatchRenderer');
        $.widget('mage.SwatchRenderer', $['mage']['SwatchRenderer'], {
            _init: function () {
                console.log('getProductSwatchRenderer');
                this._super();
            },
            /**
             * 渲染选择的标准
             * @constructor
             */
            AiwelineMultiSelectChangeRender: function () {
                let attributes = this.options.jsonConfig.attributes;
                let AiwelineMultiSelectTabData = this.options.jsonConfig.AiwelineMultiSelectTabData;
                let jsonSwatchConfig = this.options.jsonSwatchConfig
                console.log(this.options.jsonSwatchConfig)
                $('.attribute-tab-menu').on('click', function (ele) {
                    let attribute_code, attribute_id, tab_id, targetElement, siblingsElements;
                    targetElement = $(ele.target)
                    attribute_id = targetElement.data('attribute-id')
                    attribute_code = targetElement.data('attribute-code')
                    tab_id = targetElement.data('tab-id')
                    siblingsElements = targetElement.siblings();
                    // 选择css
                    for (let t = 0; t < siblingsElements.length; t++) {
                        let sibling_node = siblingsElements[t]
                        if (sibling_node.localName === 'li') {
                            sibling_node.style = AiwelineMultiSelectTabData.tab_style
                        }
                    }
                    ele.target.style = AiwelineMultiSelectTabData.tab_selected_style
                    // 筛选触发的选项
                    for (let y = 0; y < attributes.length; y++) {
                        let item = attributes[y];
                        // 如果是点击了默认
                        if (parseInt(tab_id) === 0) {
                            for (let u = 0; u < item.options.length; u++) {
                                let opt = item.options[u];
                                let label = opt.label
                                if (jsonSwatchConfig.hasOwnProperty(attribute_id)) {
                                    if (jsonSwatchConfig[attribute_id].hasOwnProperty(opt.id)) {
                                        label = jsonSwatchConfig[attribute_id][opt.id].value
                                    }
                                }
                                $('#option-label-' + attribute_code + '-' + attribute_id + '-item-' + opt.id).text(label)
                            }
                        } else {
                            if (item.AiwelineMultiSelectTabData.length) {
                                for (let i = 0; i < item.AiwelineMultiSelectTabData.length; i++) {
                                    if (parseInt(item.AiwelineMultiSelectTabData[i].tab_id) === parseInt(tab_id)) {
                                        for (let k = 0; k < item.AiwelineMultiSelectTabData[i].options.length; k++) {
                                            // 渲染切换label
                                            let opt = item.AiwelineMultiSelectTabData[i].options[k];
                                            $('#option-label-' + attribute_code + '-' + attribute_id + '-item-' + opt.option_id).text(opt.save_value)
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
            },
            /**
             * Render controls
             *
             * @private
             */
            _RenderControls: function () {
                var $widget = this,
                    container = this.element,
                    classes = this.options.classes,
                    chooseText = this.options.jsonConfig.chooseText;
                $widget.optionsMap = {};
                $.each(this.options.jsonConfig.attributes, function () {
                    var item = this,
                        controlLabelId = 'option-label-' + item.code + '-' + item.id,
                        options = $widget._RenderSwatchOptions(item, controlLabelId),
                        select = $widget._RenderSwatchSelect(item, chooseText),
                        input = $widget._RenderFormInput(item),
                        listLabel = '',
                        label = '';
                    // Show only swatch controls
                    if ($widget.options.onlySwatches && !$widget.options.jsonSwatchConfig.hasOwnProperty(item.id)) {
                        return;
                    }
                    if ($widget.options.enableControlLabel) {
                        label +=
                            '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
                            item.label +
                            '</span>' +
                            '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>';
                    }
                    if ($widget.inProductList) {
                        $widget.productForm.append(input);
                        input = '';
                        listLabel = 'aria-label="' + item.label + '"';
                    } else {
                        listLabel = 'aria-labelledby="' + controlLabelId + '"';
                    }
                    console.log($widget.options.jsonConfig)
                    // 处理多个Tab切换label
                    if (item.AiwelineMultiSelectTabData.length > 0) {
                        // 渲染选项卡
                        let tabs_html = ' <li class="attribute-tab-menu selected" ' +
                            'data-attribute-id="' + item.id + '" ' +
                            'data-attribute-code="' + item.code + '" ' +
                            'data-tab-id="0" ' +
                            'id="' + 'attribute_id_0" style=" ' + $widget.options.jsonConfig.AiwelineMultiSelectTabData.tab_style +
                            '">' + $widget.options.jsonConfig.AiwelineMultiSelectTabData.default_label + '</li>',
                            tab_menu_html = '',
                            AiwelineMultiSelectTabData = item.AiwelineMultiSelectTabData
                        for (let i = 0; i < AiwelineMultiSelectTabData.length; i++) {
                            let tab_id = AiwelineMultiSelectTabData[i].attribute_id + '_tab_code_' + AiwelineMultiSelectTabData[i].code;
                            tabs_html += ' <li class="attribute-tab-menu selected" ' +
                                'data-attribute-id="' + AiwelineMultiSelectTabData[i].attribute_id + '" ' +
                                'data-attribute-code="' + item.code + '" ' +
                                'data-tab-id="' + AiwelineMultiSelectTabData[i].tab_id + '" ' +
                                'id="' + 'attribute_id_' + tab_id + '" style=" ' +
                                'float: left; border: 1px solid gray;' +
                                'padding: 8px; margin: 1px;cursor: pointer;' +
                                '">' + AiwelineMultiSelectTabData[i].name + '</li>'
                        }
                        // 渲染选项卡菜单
                        tab_menu_html = '  <!-- 切换选项卡tab_menu开始-->\n' +
                            '<div class="tab_menu">' +
                            ' <ul style="\n' +
                            '    /* text-decoration: none; */\n' +
                            '    /* text-decoration-line: none; */\n' +
                            '    list-style: none;\n' +
                            '    padding-left: 0;\n' +
                            '    /* height: auto; */\n' +
                            ' ">' + tabs_html + ' ' +
                            ' <div style="clear: both;"></div>' +
                            ' </ul>' +
                            '</div> <!-- 切换选项卡tab_menu结束-->';
                        // 渲染原始html模板 Create new control
                        let control_html = '<!--tab-container开始--><div class="tab-container">' +
                            '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
                            'attribute-code="' + item.code + '" ' +
                            'attribute-id="' + item.id + '">' +
                            label +
                            tab_menu_html +
                            '<div aria-activedescendant="" ' +
                            'tabindex="0" ' +
                            'aria-invalid="false" ' +
                            'aria-required="true" ' +
                            'role="listbox" ' + listLabel +
                            'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
                            options + select +
                            '</div>' + input +
                            '</div></div><!--tab-container结束-->';
                        container.append('<!--选项卡tab开始--><div id="tab">' +
                            control_html +
                            '</div><!--选项卡tab结束-->')
                    } else {
                        // Create new control
                        container.append(
                            '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
                            'attribute-code="' + item.code + '" ' +
                            'attribute-id="' + item.id + '">' +
                            label +
                            '<div aria-activedescendant="" ' +
                            'tabindex="0" ' +
                            'aria-invalid="false" ' +
                            'aria-required="true" ' +
                            'role="listbox" ' + listLabel +
                            'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
                            options + select +
                            '</div>' + input +
                            '</div>'
                        );
                    }
                    $widget.optionsMap[item.id] = {};
                    // Aggregate options array to hash (key => value)
                    $.each(item.options, function () {
                        if (this.products.length > 0) {
                            $widget.optionsMap[item.id][this.id] = {
                                price: parseInt(
                                    $widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount,
                                    10
                                ),
                                products: this.products
                            };
                        }
                    });
                });
                // 触发 多选切换label的监听 点击事件
                $widget.AiwelineMultiSelectChangeRender()
                // Connect Tooltip
                container
                    .find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]')
                    .SwatchRendererTooltip();
                // Hide all elements below more button
                $('.' + classes.moreButton).nextAll().hide();
                // Handle events like click or change
                $widget._EventListener();
                // Rewind options
                $widget._Rewind(container);
                //Emulate click on all swatches from Request
                $widget._EmulateSelected($.parseQuery());
                $widget._EmulateSelected($widget._getSelectedAttributes());
            },
        });
        return $['mage']['SwatchRenderer'];
    };
});