将商品添加到购物车的 JavaScript 已损坏

Question

我有一个按钮，它是我的 Magento 主题中提供的代码的一部分，根据日期/时间戳，我没有无意中编辑它。我确信它在某些时候是有效的，但回顾一下上周我的源代码控制，我似乎无法找出哪里出了问题。

这是按钮 HTML:

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>

...但是当我点击它时没有任何反应。看起来很简单，除了我看不到是否/哪里有拼写错误等。所以，我检查了 Firebug，我看到了以下错误:

但是，当我转到“查看页面源代码”时，脚本确实在页面中:

<script type="text/javascript">
//<![CDATA[
    var productAddToCartForm = new VarienForm('product_addtocart_form');
    productAddToCartForm.submit = function(button, url) {
        if (this.validator.validate()) {
            var form = this.form;
            var oldUrl = form.action;

            if (url) {
               form.action = url;
            }
            var e = null;
            try {
                this.form.submit();
            } catch (e) {
            }
            this.form.action = oldUrl;
            if (e) {
                throw e;
            }

            if (button && button != 'undefined') {
                button.disabled = true;
            }
        }
    }.bind(productAddToCartForm);

    productAddToCartForm.submitLight = function(button, url){
        if(this.validator) {
            var nv = Validation.methods;
            delete Validation.methods['required-entry'];
            delete Validation.methods['validate-one-required'];
            delete Validation.methods['validate-one-required-by-name'];
            if (this.validator.validate()) {
                if (url) {
                    this.form.action = url;
                }
                this.form.submit();
            }
            Object.extend(Validation.methods, nv);
        }
    }.bind(productAddToCartForm);
//]]>
</script>

Answer 1

$ 变量与正在使用的其他 JavaScript 库冲突。删除包含的 jQuery 库应该会恢复其他功能，以证明这是问题所在。

为了修复它，要么重写 jPlayer 代码(将 $ 替换为 jQuery)，要么尝试使用 jQuery.noConflict() 功能。

即，这个:$(文档).ready(函数(){ ...

... 变成:jQuery(文档).ready(函数(){ ...

更多详细信息可以在 jQuery.noConflict() 中找到文档。

在我上面问题的这个特定示例中，我通过以下方式使用 noConflict() 解决了这个问题:

$.noConflict();
jQuery(document).ready(function(){
  jQuery("#jquery_jplayer").jPlayer({
    ready: function () {      
      jQuery(this).jPlayer("setMedia", {
        mp3: jQuery('#jquery_jplayer').attr('media_file')
      });
    },
    swfPath: "/js/jplayer",
    supplied: "mp3"
  });
});