Product Swatch 注入更多的行为

以上红圈就是Swatch，默认情况下当Swatch被选中后会切换产品图片、价格描述等，但有时候需要实现更多互动效果。

step 1 : 给Swatch提供数据

如果增加了产品属性，Swatch并不能读取，需要用DI重写类来增加前端可读取数据。

Magento\Swatches\Block\Product\Renderer\Configurable::getJsonConfig 正是向Swatch提供数据的method，但为了对core影响更少，应该使用 Magento\Swatches\Block\Product\Renderer\Configurable::_getAdditionalConfig，重写代码如下：

protected function _getAdditionalConfig()
{
    $data = [];
    foreach($this->getAllowProducts() as $key => $product) {
        // 新的attribute需要开启use in product listing，否则不能读取
        $data[$key] = $product->getData('new_attribute');
    }

    return [
        'new_attribute' => $data
    ];
}

step 2 : 附加点击后行为

vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js
以上程序正是swatch的主要前端代码，阅读代码可知swatch是个jQuery UI Widget，里面_OnClick正是点击行为，在最后一行新增代码就可以

_OnClick: function ($this, $widget) {
    // 以上代码省略
    
    var _jsonConfigIndex = _.values($widget.options.jsonConfig.index);
    if($widget.options.jsonConfig.hasOwnProperty('new_attribute')) {
        _.each(_.values($widget.options.jsonConfig.new_attribute), function(item, key){
            _.each(_jsonConfigIndex[key], function(optionId){
                if(optionId == $this.attr('option-id')) {
                    // item为产品属性的值
                    $('#new_attribute_div').text(item);
                }
            });
        });
    }
},