Add To cart Button in articles magento not working

Question

I have a problem with the add to cart button in my magento store version community. When you try to add articles and click the button it doesn't work.

Here is the link of the issue: http://masluz.panamerik.net/ilunimacion-automotriz/gabinete-ice-2x24w-magg.html

my file view.phtml

    <div class="product-shop">
        <div class="product-name">
            <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
        </div>

        <?php if ($this->canEmailToFriend()): ?>
            <p class="email-friend"><a href="<?php echo $this->helper('catalog/product')->getEmailToFriendUrl($_product) ?>"><?php echo $this->__('Email to a Friend') ?></a></p>
        <?php endif; ?>

        <?php echo $this->getReviewsSummaryHtml($_product, false, true)?>
        <?php echo $this->getChildHtml('alert_urls') ?>
        <?php echo $this->getChildHtml('product_type_data') ?>
        <?php echo $this->getTierPriceHtml() ?>
        <?php echo $this->getChildHtml('extrahint') ?>

        <?php if (!$this->hasOptions()):?>
            <div class="add-to-box">
                <?php if($_product->isSaleable()): ?>
                    <?php echo $this->getChildHtml('addtocart') ?>
                    <?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
                        <span class="or"><?php echo $this->__('OR') ?></span>
                    <?php endif; ?>
                <?php endif; ?>
                <?php echo $this->getChildHtml('addto') ?>
            </div>
            <?php echo $this->getChildHtml('extra_buttons') ?>
        <?php elseif (!$_product->isSaleable()): ?>
            <div class="add-to-box">
                <?php echo $this->getChildHtml('addto') ?>
            </div>
        <?php endif; ?>

        <?php if ($_product->getShortDescription()):?>
            <div class="short-description">
                <h2><?php echo $this->__('Quick Overview') ?></h2>
                <div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
            </div>
        <?php endif;?>

        <?php echo $this->getChildHtml('other');?>

        <?php if ($_product->isSaleable() && $this->hasOptions()):?>
            <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
        <?php endif;?>

    </div>

    <div class="product-img-box">
        <?php echo $this->getChildHtml('media') ?>
    </div>

    <div class="clearer"></div>
    <?php if ($_product->isSaleable() && $this->hasOptions()):?>
        <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
    <?php endif;?>
</form>
<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'];
            // Remove custom datetime validators
            for (var methodName in Validation.methods) {
                if (methodName.match(/^validate-datetime-.*/i)) {
                    delete Validation.methods[methodName];
                }
            }

            if (this.validator.validate()) {
                if (url) {
                    this.form.action = url;
                }
                this.form.submit();
            }
            Object.extend(Validation.methods, nv);
        }
    }.bind(productAddToCartForm);
//]]>
</script>
</div>

<div class="product-collateral">

        <?php endif;?>
        <?php echo $html; ?>
    </div>

Answer 1

When you click it, the console receives the following error:

TypeError: productAddToCartForm is undefined

You are missing the productAddToCartForm function which is a standard Magento JS function used to add the product to the cart. This is an issue with your custom theme.

Your custom theme is most likely rewriting the file view.phtml which is used on the product detail pages.

1. Look in: app/design/frontend/base/design/base/default/template/catalog/product/view.phtml

2. The productAddToCartForm function is defined in this phtml file, you will see something like this:

   <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'];
               // Remove custom datetime validators
               for (var methodName in Validation.methods) {
                   if (methodName.match(/^validate-datetime-.*/i)) {
                       delete Validation.methods[methodName];
                   }
               }
   
               if (this.validator.validate()) {
                   if (url) {
                       this.form.action = url;
                   }
                   this.form.submit();
               }
               Object.extend(Validation.methods, nv);
           }
       }.bind(productAddToCartForm);
   //]]>
   </script>
   

3. Now open up the file that is rewriting the view.ptml file, located in your custom theme directory: app/design/frontend/[theme_scope]/[theme_name]/template/catalog/product/view.phtml (Note: [theme_scope] and [theme_name] should be the folders for your theme).

4. Paste the <script> code containing the productAddToCartForm function back into your theme's view.phtml file.

5. Save the file, clear & flush all Magento caches.

If done correctly, the function should not be restored and appear in your page's source markup. You can verify by viewing the html source of your page and checking if the function is defined.