javascript - 覆盖/扩展 Magento 核心 javascript 文件

Question

最近几天，由于一些客户的抱怨和与我们的营销人员的讨论，我收到了更改可配置产品选项的默认行为的请求。他们要求我从选项下拉列表中删除 + $xx.xx，因为它会使客户/访客感到困惑，并且只留下可用选项而不显示价格变化。从他们的角度来看，这很公平，但从开发人员的角度来看，我认为这有点棘手。该站点运行 Magento CE 1.6.2，我们需要覆盖/更改的文件是 /public_html/js/varien/configurable.js。我们需要更改其中的 getOptionLabel 函数，使其不显示价格变化。所以我的问题是：更改此文件而不触及核心 javascript 文件的正确 Magento 方法是什么？提前致谢。

Answer 1

从原型手册http://prototypejs.org/doc/latest/language/Function/prototype/wrap/中查看此内容，您可以包装任何对象方法，甚至在需要时调用“父级”，这是一个伪示例：

//where Product.Config is the object/class you need to "override"
Product.Config.prototype.getOptionLabel  = Product.Config.prototype.getOptionLabel.wrap(function(parentMethod){
    //replace the original method here with your own stuff
    //or call parentMethod(); if conditions don't match
});

Answer 2

只是为了添加到@anton-s 的绝对正确答案，您还可以进行“完整”类重写：

// Create the original class
var ClassA = Class.create();
ClassA.prototype = {
    initialize: function(config) {
        this.config = config;
    },
    test: function(msg) {
        console.log('Hi from class A with message ' + msg);
    }
};

// Create new class extending the original class
var ClassB = Class.create(ClassA, {
    // $super is a reference to the original method
    test: function($super, msg) {
        console.log('Hi from class B');
        console.log('this.config is accessible in class B: ' + this.config);
        $super(msg + ' ...')
    }
});


// To make the extend an override, you can do this:
ClassA = ClassB;
// ClassA now is ClassB overriding the original ClassA
var a = new ClassA('some config data');
a.test('Call A 1');

由于所有这些仅适用于原型类，而不适用于已实例化的对象，因此我还将介绍这个 hack，这也几乎是 wrap() 所做的：

// Overriding a method of an already instantiated object
// There are many ways to do this more elegantly thanks to the amazing JS scoping magic
a.origTest = a.test;
a.test = function(msg) {
    console.log('Hi from the patched method');
    this.origTest(msg);
}
a.test('Call A 2');

请记住，尽管该wrap()方法更好，并且也可以用于类定义或具体实例。

// Wrap method of concrete instance
spConfig.getOptionLabel = spConfig.getOptionLabel.wrap(function(parentMethod, option, price) {
    return parentMethod(option, price);
});

// Wrap method of class declaration
Product.Config.prototype.getOptionLabel = Product.Config.prototype.getOptionLabel.wrap(function(parentMethod, option, price) {
    return parentMethod(option, price);
});

Answer 3

如何在 Magento 1.9 EE 中覆盖 \js\varien\configurable.js 并添加新的数据属性

创建文件 \js\jsoverride\configurable.js：

    Product.Config.prototype.reloadOptionLabels = Product.Config.prototype.reloadOptionLabels.wrap(function (parentMethod, element) {
    var selectedPrice;
    if (element.options[element.selectedIndex].config && !this.config.stablePrices) {
        selectedPrice = parseFloat(element.options[element.selectedIndex].config.price);
    } else {
        selectedPrice = 0;
    }
    for (var i = 0; i < element.options.length; i++) {
        if (element.options[i].config) {
            element.options[i].text = this.getOptionLabel(element.options[i].config, element.options[i].config.price - selectedPrice);
            element.options[i].setAttribute('data-in-stock', element.options[i].config.in_stock);
        }
    }
});

创建或使用文件：\app\design\frontend\enterprise\YOUR_THEME\layout\local.xml 并添加下一行：

<?xml version="1.0"?>
<layout version="0.1.0">
  <catalog_product_view>
    <reference name="head">
      <action method="addJs"><script>jsoverride/configurable.js</script></action>
    </reference>
  </catalog_product_view>
</layout>

注意，将数据填充到文件中的 element.options[i].config.in_stock

app\design\frontend\enterprise\YOUR_THEME\template\catalog\product\view\type\options\configurable.phtml

与下一行

var spConfig = new Product.Config(UPDATED JSON WITH NEW ATTRIBUTE);