Magento2:如何覆盖核心js模块price-box.js


15

我需要扩展Magento_Catalog/js/price-box.js。我已经使用了“ mixins”功能,但不适用于price-box.js

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/price-box': {
                'My_Module/js/price-box/pluggin': true
            }
        }
    }
};

My_Module/view/frontend/web/js/price-box/pluggin.js

define(function () {
    'use strict';

    return function (target) { 
        // modify target
        var reloadPrice = target.reloadPrice;
        target.reloadPrice = function() {
           cosole.log("hello");
        };
        return target;
    };
});

Yogesh,提供有关此的更多信息。
Codrain Technolabs Pvt Ltd 2016年

Answers:


12
  1. 在自定义模块的requirejs-config.js名称中指定PriceBox js文件,其名称应与核心模块中已声明的名称相同。在我们的情况下,priceBox如下所示。您的模块requirejs-config.js将类似于

    var config = {
        map: {
             '*': {
                    priceBox:'namespace_modulename/js/custompricebox',
             }
        }
    };
  2. 现在,将文件创建custompricebox.js到上面指定的路径。我假设您想扩展reloadPrice价格框中的方法。所以你custompricebox.js会像下面这样。

    define(
        [
            'jquery',
            'Magento_Catalog/js/price-utils',
            'underscore',
            'mage/template',
            'mage/priceBox',
            'jquery/ui'
        ],
        function ($, utils, _, mageTemplate) {
    
            'use strict';
    
            $.widget('yournamespace.custompriceBox', $.mage.priceBox, {
                /**
                 * Render price unit block.
                 */
                reloadPrice: function reDrawPrices() {
    
                    var priceFormat = (this.options.priceConfig && this.options.priceConfig.priceFormat) || {},
                        priceTemplate = mageTemplate(this.options.priceTemplate);
    
                    _.each(this.cache.displayPrices, function (price, priceCode) {
                        price.final = _.reduce(price.adjustments, function(memo, amount) {
                            return memo + amount;
                        }, price.amount);
    
                        // you can put your custom code here. 
    
                        price.formatted = utils.formatPrice(price.final, priceFormat);
    
                        $('[data-price-type="' + priceCode + '"]', this.element).html(priceTemplate({data: price}));
                    }, this);
                },
    
    
            });
    
            return $.yournamespace.custompriceBox;
        }
    );
  3. 请注意,此代码未经测试。可能存在一些Syntex错误。让我知道您是否需要更多帮助。


嗨,Yagnesh,我们可以通过Mixin实现它吗?除了覆盖它,我们也可以扩展它吗?
Praful Rajput

@PrafulRajput,我还没有使用mixin,一旦我做到了,我一定会在此上更新您。
Codrain Technolabs Pvt Ltd 2016年

2
某种程度上,这对我不起作用(2.1.2版)。另外,法师/ priceBox确实给了我一些脚本错误。
TrytoFly

1
有人成功通过Mixin重写了它吗?
Pol Ravalitera
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.