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

Question

I've got a button, which is part of the provided code in my Magento theme, and according to the date/time stamp, I haven't inadvertantly edited it. I'm sure that it was working at some point, but a glance back into my source control over the last week, and I can't seem to track down where things went wrong.

Here is the button HTML:

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

... but when I click on it nothing happens. Seems pretty straight forward, except I can't see if/where there is a typo, etc. So, I check Firebug and I see the following error:

However, when I go to "View page source", the script is indeed in the page:

<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

The $ variable is in conflict with other JavaScript libraries being used. Removing the inclusion of the jQuery library should bring back the other functionality, in order to prove that is the problem.

In order to fix it, either rewrite the jPlayer code (replacing $ with jQuery ), or try using the jQuery.noConflict() function.

Ie, this: $(document).ready(function(){ ...

... becomes that: jQuery(document).ready(function(){ ...

More details can be found in the jQuery.noConflict() documentation.

In this particular example in my question above, I solved it by using noConflict() in the following way:

$.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"
  });
});

Answer 2

it seems like the productAddToCartForm is not getting instantiated

You could try to use firebug to create a VarienForm object from the console to see if its returning an object.

var tmpobj = new VarienForm('product_addtocart_form')

and see what what gets created in tmpobj

And also the.bind after both functions does not seems ok. You are not using an inmediate function and besides does functions are not returning anything.

A more complete example would be easier to fix.

I hope this helps you.