修改Shopify.addItem函数定义以添加对添加到购物车请求的限制

Question

Shopify提供Shopify JavaScript对象，如下图所示 您也可以通过访问Shopify store的此链接亲自查看。打开控制台并输入Shopify 现在，我需要修改addItem函数的行为。我们可以在JavaScript中覆盖一个函数，但是当我稍后在任何文件中访问Shopify.addItem时它会undefined。为了清楚起见，Shopify对象以及所有函数定义都在theme.js文件中定义，我试图覆盖的我的代码段在此文件下方添加。我能够访问Shopify对象，但我无法访问此功能，因此无法覆盖它。以下是Shopify.addItem的定义。

Shopify.addItem = function(variant_id, quantity, callback) {
  var quantity = quantity || 1;
  var params = {
    type: 'POST',
    url: '/cart/add.js',
    data: 'quantity=' + quantity + '&id=' + variant_id,
    dataType: 'json',
    success: function(line_item) {
      console.log('in add Item');
      if ((typeof callback) === 'function') {
        callback(line_item);
      }
      else {
        Shopify.onItemAdded(line_item);
      }
    },
    error: function(XMLHttpRequest, textStatus) {
      Shopify.onError(XMLHttpRequest, textStatus);
    }
  };
  jQuery.ajax(params);
};

这是我的代码试图覆盖它。

  (function(){
    var originalAddItem = Shopify.addItem;
    Shopify.addItem = function(){

      console.log('in overriden function');
      return originalAddItem.apply(this,arguments);

    };
  })();

但是这永远不会被执行，当我console.log(Shopify)它仍然包含函数的原始定义时。任何想法如何实现它？

Answer 1

您的主题是加载提供Shopify对象的Javascript。您可以通过检查主题和加载Javascript的方式轻松验证。有两种方法可以实现这一目标。一个是获取Shopify发行的JS的副本并将其作为资产（asset_url过滤器）加载到您的主题中，而第二个是从Shopify母舰（shopify_asset_url过滤器）加载CDN版本。

示例：寻找

  {{ 'shopify_common.js' | shopify_asset_url | script_tag }}

VS

  {{ 'shopify_common_custom.js' | asset_url | script_tag }}

如果您抓住自己的副本并将其作为商店中的资产加载，您当然可以覆盖该对象和功能。自2006年以来我一直这样做，你也可以。您也可以取消Shopify代码并使用Gavin的CartJS，它是相同的API但更好。你的选择。